AI Prompts for Varity

Varity Team Core Contributors Updated March 2026

Copy these prompts into your AI assistant to build Varity apps faster. Each prompt gives your AI the full context it needs — SDK patterns, database API, authentication setup, and deployment commands.

How to Use

Save the prompt as .cursor/rules/varity.mdc in your project root
Cursor automatically loads the rules for every file in the project
Start asking Cursor to build features — it knows Varity patterns

Copy the prompt content below
Add it to your project’s CLAUDE.md file
Claude Code reads this file automatically on every conversation

Save the prompt as .windsurfrules in your project root
Windsurf loads it automatically
Compatible with the same format as Cursor rules

Example Prompts for Building with Varity

These ready-to-use prompts help you build specific features. Copy them into ChatGPT, Claude, or Cursor to get started quickly.

Create a SaaS Dashboard

I'm building a SaaS app with Varity. I need:
- A dashboard layout with sidebar navigation
- User authentication (email + Google login)
- Protected routes that redirect unauthenticated users to /login
- A user profile page showing email and account info

Use @varity-labs/sdk for the database and @varity-labs/ui-kit for auth components.

Expected result: A complete dashboard setup with authentication and protected routes.

Add a Database Collection

Add a "customers" collection to my Varity app with these fields:
- name (string)
- email (string)
- plan (one of: 'free', 'pro', 'enterprise')
- createdAt (ISO date string)

Include:
1. TypeScript interface in src/types/index.ts
2. Collection accessor in src/lib/database.ts
3. React hook with CRUD operations and optimistic updates
4. A simple page component to list and create customers

Expected result: Full CRUD implementation following the Type → Collection → Hook → Page pattern.

Add Payment Processing

Integrate payments into my Varity app:
- Add a "Pro" pricing tier at $29/month
- Show an upgrade button on the dashboard
- Use the Varity App Store for payment processing
- Handle the 90/10 revenue split automatically

Include instructions for submitting to the App Store.

Expected result: Payment configuration and App Store submission guide.

Build a File Upload Feature

Add file upload to my Varity app:
- Users can upload images and PDFs
- Files are stored securely
- Display uploaded files in a gallery
- Include download and delete functionality

Use @varity-labs/sdk storage API.

Expected result: Complete file upload/download implementation with UI components.

Add Real-Time Notifications

Add a notification system to my Varity dashboard:
- Toast notifications for success/error messages
- Notification bell icon with unread count
- Store notifications in the database
- Mark as read functionality

Use optimistic updates for instant UI feedback.

Expected result: Notification system with database persistence and real-time UI updates.

Create a Multi-Step Form

Build a 3-step onboarding form for my Varity app:
1. User profile (name, company)
2. Plan selection (free, pro, enterprise)
3. Team invites (email list)

Store the data in the database and show a completion page.
Use Varity's database API for persistence.

Expected result: Multi-step form with state management and database integration.

Add Search and Filtering

Add search and filter capabilities to my projects page:
- Search by project name and description
- Filter by status (active, paused, completed)
- Filter by owner (show "My Projects" vs "All Projects")
- Client-side filtering since Varity db.get() returns all documents

Keep the UI responsive with optimistic updates.

Expected result: Search input and filter dropdowns with client-side data filtering.

Customize the SaaS Template

Customize the Varity SaaS Starter template:
- Change app name to "TaskFlow"
- Update primary color to purple (#8b5cf6)
- Replace the Projects feature with a "Workflows" feature
- Keep the same database pattern (Type → Collection → Hook → Page)

Update all branding in src/lib/constants.ts and src/app/globals.css.

Expected result: Rebranded template with custom feature replacing Projects.

Deploy and Go Live

Deploy my Varity app to production:
- Build the Next.js static export
- Deploy using varitykit CLI
- Submit to the Varity App Store
- Set up a free tier and $19/month pro tier

Provide the exact commands and configuration needed.

Expected result: Step-by-step deployment commands and App Store configuration.

Add Analytics Dashboard

Build an analytics dashboard for my Varity app:
- Total users count
- Active projects count
- Tasks completed this week
- Revenue chart (if using paid tiers)

Fetch data from the database and display using charts.
Include responsive design for mobile.

Expected result: Analytics page with data visualizations and responsive layout.

Varity App Development (Full Context)

This is the comprehensive prompt. It covers everything: SDK, database, auth, deployment, and template patterns. Use this as your .cursor/rules/varity.mdc or CLAUDE.md.

# Varity Development Rules

## What is Varity
Varity provides packages and a CLI for building, deploying, and monetizing applications.
Packages: @varity-labs/sdk, @varity-labs/ui-kit, @varity-labs/types
CLI: varitykit (Python, installed via pip)

## Core Packages

### @varity-labs/sdk
- `db` — Database module. Usage: `import { db } from '@varity-labs/sdk'`
- `db.collection<T>('name')` — Returns typed collection with .get(), .add(), .update(id, partial), .delete(id)

### @varity-labs/ui-kit
- `PrivyStack` — Auth provider wrapper. Wrap your app root.
- `PrivyLoginButton` — Drop-in login button (email, Google, Twitter, Discord, GitHub)
- `PrivyProtectedRoute` — Wrapper that redirects unauthenticated users
- `PrivyUserProfile` — User profile display component
- `usePrivy()` — Hook returning { user, authenticated, logout, ready }
- `DashboardLayout` — Sidebar dashboard layout (desktop only, add mobile nav manually)

### @varity-labs/types
- TypeScript type definitions for all Varity interfaces

## Database Pattern
1. Define TypeScript interface in `src/types/index.ts`
2. Create collection accessor in `src/lib/database.ts`:
   ```typescript
   import { db } from '@varity-labs/sdk';
   import type { MyType } from '../types';
   export const myItems = () => db.collection<MyType>('my_items');
   ```
3. Build React hook in `src/lib/hooks.ts` with:
   - useState for data, loading, error
   - useCallback + useEffect for initial fetch via collection().get()
   - Optimistic create/update/delete with rollback on error
4. Use hook in page component

## Auth Pattern
```tsx
// Layout: Set up auth provider
<PrivyStack appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}>
  {children}
</PrivyStack>

// Protected page: Wrap with route protection
<PrivyProtectedRoute>
  <DashboardContent />
</PrivyProtectedRoute>

// Get user info
const { user, authenticated, logout } = usePrivy();
const email = user?.email?.address;
```

## CLI Commands
- `varitykit doctor` — Check environment setup
- `varitykit init` — Scaffold new project from template
- `varitykit app deploy` — Deploy app (auto-detects static/dynamic)
- `varitykit app deploy --submit-to-store` — Deploy and submit to App Store

## Environment Variables (Next.js)
```
NEXT_PUBLIC_PRIVY_APP_ID=         # Auth (optional for dev, shared creds used)
NEXT_PUBLIC_VARITY_APP_ID=        # Your app ID (after deploy)
```

## Key Rules
- NEVER use blockchain/crypto terminology in user-facing code
- Use TypeScript interfaces for all data models
- Use optimistic UI updates in hooks (update state first, then API, rollback on error)
- Use `'use client'` directive for hooks and interactive components
- DashboardLayout has NO mobile support — implement mobile nav manually
- Database credentials are auto-injected at deploy time by the CLI
- For local dev, set NEXT_PUBLIC_VARITY_APP_TOKEN and NEXT_PUBLIC_VARITY_DB_PROXY_URL in .env.local, or build UI with mock data first
- .get() returns all docs — filter on client side (no server-side filtering)

Database Schema Design

Use this prompt when you want AI to help you design database collections and queries.

# Varity Database Design Rules

## API
- Import: `import { db } from '@varity-labs/sdk'`
- Collection: `db.collection<T>('collection_name')` — returns typed collection
- Operations: .get(options?), .add(doc), .update(id, partial), .delete(id)
- .get() options: { limit?, offset?, orderBy? } — filter on client side

## Pattern: Type → Collection → Hook → Page

### Step 1: Define the type
```typescript
// src/types/index.ts
export interface Customer {
  id?: string;          // Auto-generated, always optional
  name: string;
  email: string;
  plan: 'free' | 'pro' | 'enterprise';
  createdAt: string;    // ISO string
}
```

### Step 2: Create collection accessor
```typescript
// src/lib/database.ts
import { db } from '@varity-labs/sdk';
import type { Customer } from '../types';
export const customers = () => db.collection<Customer>('customers');
```

### Step 3: Build hook with optimistic updates
```typescript
// src/lib/hooks.ts
export function useCustomers() {
  const [data, setData] = useState<Customer[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const refresh = useCallback(async () => {
    try {
      setLoading(true); setError(null);
      const result = await customers().get();
      setData(result as Customer[]);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load');
    } finally { setLoading(false); }
  }, []);

  useEffect(() => { refresh(); }, [refresh]);

  const create = async (input: Omit<Customer, 'id' | 'createdAt'>) => {
    const optimistic = { ...input, id: `temp-${Date.now()}`, createdAt: new Date().toISOString() };
    setData(prev => [optimistic, ...prev]);
    try {
      await customers().add({ ...input, createdAt: optimistic.createdAt });
      await refresh();
    } catch (err) {
      setData(prev => prev.filter(c => c.id !== optimistic.id));
      throw err;
    }
  };

  // update and remove follow same optimistic pattern
  return { data, loading, error, create, update, remove, refresh };
}
```

## Rules
- `id` is always `string | undefined` — Varity generates it
- Use ISO strings for dates (new Date().toISOString())
- Collection names should be snake_case plural (customers, order_items)
- Keep interfaces flat — no nested objects for now
- Filter on client side: `data.filter(item => item.projectId === id)`

Add Authentication

# Varity Authentication Setup

## Install
npm install @varity-labs/ui-kit

## 1. Set up auth provider (layout.tsx)
```tsx
import { PrivyStack } from '@varity-labs/ui-kit';

export default function RootLayout({ children }) {
  return (
    <html><body>
      <PrivyStack appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}>
        {children}
      </PrivyStack>
    </body></html>
  );
}
```
No appId needed for development — shared credentials are used automatically.

## 2. Add login button
```tsx
import { PrivyLoginButton } from '@varity-labs/ui-kit';
<PrivyLoginButton />
```
Supports: Email (magic link), Google, Twitter, Discord, GitHub

## 3. Protect routes
```tsx
import { PrivyProtectedRoute } from '@varity-labs/ui-kit';
<PrivyProtectedRoute>
  <DashboardPage />  {/* Only shown when authenticated */}
</PrivyProtectedRoute>
```

## 4. Access user data
```tsx
import { usePrivy } from '@varity-labs/ui-kit';
const { user, authenticated, logout, ready } = usePrivy();
const email = user?.email?.address;
const name = email?.split('@')[0];
```

## Rules
- PrivyStack must wrap the entire app (in root layout)
- usePrivy() only works inside PrivyStack
- Check `ready` before rendering auth-dependent UI
- Check `authenticated` before showing protected content
- `user?.email?.address` — the primary user identifier

Deploy to Varity

# Varity Deployment

## Prerequisites
- pip install varitykit
- Node.js 18+
- A built React/Next.js app

## Deploy (static hosting)
```bash
npm run build
varitykit app deploy
```

## Deploy and submit to App Store
```bash
npm run build
varitykit app deploy --submit-to-store
```

## Environment Variables
Set in .env.local for development. On deploy, credentials are injected automatically.
```
NEXT_PUBLIC_PRIVY_APP_ID=         # Optional for dev
NEXT_PUBLIC_VARITY_APP_ID=        # Set after first deploy
```

## Check environment
```bash
varitykit doctor
```

## Common Issues
- "Module not found": Run npm install @varity-labs/sdk @varity-labs/ui-kit @varity-labs/types
- "CLI not found": Run pip install varitykit
- Build errors: Set `typescript: { ignoreBuildErrors: true }` in next.config.js during development
- Static export: Use `output: 'export'` in next.config.js. No dynamic routes ([id]) — use client-side state instead.

Customize the SaaS Template

# Customizing the Varity SaaS Template

## Template structure
```
src/
├── app/                    # Next.js pages
│   ├── page.tsx           # Landing page
│   ├── login/page.tsx     # Login page
│   └── dashboard/
│       ├── layout.tsx     # Dashboard layout (sidebar + mobile nav)
│       ├── page.tsx       # Dashboard home
│       ├── projects/      # Projects CRUD
│       ├── tasks/         # Tasks CRUD
│       ├── team/          # Team management
│       └── settings/      # Settings
├── lib/
│   ├── varity.ts          # SDK import (1 line: export { db } from '@varity-labs/sdk')
│   ├── database.ts        # Collection helpers
│   ├── hooks.ts           # React hooks for data
│   └── constants.ts       # App name, navigation items
├── types/
│   └── index.ts           # TypeScript interfaces
└── components/ui/         # Shared UI components
```

## Change branding
1. `src/lib/constants.ts` — Change APP_NAME
2. `src/app/globals.css` — Change CSS variables (:root { --color-primary-* })
3. `tailwind.config.js` — Colors reference CSS variables

## Add a new page
1. Create `src/app/dashboard/new-page/page.tsx`
2. Add to NAVIGATION_ITEMS in `src/lib/constants.ts`

## Add a new data model
1. Define interface in `src/types/index.ts`
2. Add collection in `src/lib/database.ts`
3. Create hook in `src/lib/hooks.ts` (copy useProjects pattern)
4. Build page component using the hook

## Navigation
Edit NAVIGATION_ITEMS in constants.ts:
```typescript
{ label: 'My Page', icon: 'star', path: '/dashboard/my-page' }
```
Available icons: dashboard, folder, list, people, settings, star

AI Prompts for Varity

How to Use

Example Prompts for Building with Varity

Create a SaaS Dashboard

Add a Database Collection

Add Payment Processing

Build a File Upload Feature

Add Real-Time Notifications

Create a Multi-Step Form

Add Search and Filtering

Customize the SaaS Template

Deploy and Go Live

Add Analytics Dashboard

Varity App Development (Full Context)

Database Schema Design

Add Authentication

Deploy to Varity

Customize the SaaS Template

Download Prompts

Next Steps