Makerkit

https://makerkit.dev/docs
Admin
Makerkit is a React SaaS boilerplate providing kits for Next.js, Supabase, and other frameworks,...
Tokens:1,303,451
Snippets:18,875
Trust Score:8.6
Update:1 month ago
Show doc for...
Tokens:
Raw
### Quick start project setup

Source: https://makerkit.dev/docs/nextjs-prisma/installation/overview

Complete sequence of commands to clone the repository, install dependencies, and start the development environment.

```bash
# Clone the repository
git clone git@github.com:makerkit/next-prisma-saas-kit-turbo.git
# Install dependencies
pnpm install
# Run setup script and follow the prompts
pnpm turbo gen setup
# Start Docker (Postgres and Mailpit)
# make sure you have Docker installed and running
pnpm run compose:dev:up
# Generate Prisma client
pnpm --filter @kit/database prisma:generate
# Run database migrations
pnpm --filter @kit/database prisma:migrate
# Seed the database with test data
pnpm run seed
# Start the development server
pnpm dev
```

--------------------------------

### Project Quick Start

Source: https://makerkit.dev/docs/nextjs-drizzle/installation/overview

Complete sequence of commands to clone, install, configure, and start the development environment.

```bash
# Clone the repository
git clone git@github.com:makerkit/next-drizzle-saas-kit-turbo.git
# Install dependencies
pnpm install
# Run setup script and follow the prompts
pnpm turbo gen setup
# Start Docker (Postgres and Mailpit)
# make sure you have Docker installed and running
pnpm run compose:dev:up
# Run database migrations
pnpm --filter "@kit/database" drizzle:migrate
# Seed the database with test data
pnpm run seed
# Start the development server
pnpm dev
```

--------------------------------

### Initialize Supamode with CLI

Source: https://makerkit.dev/docs/supamode/installation/clone-repository

Run the interactive setup wizard to clone the repository, install dependencies, and configure environment variables.

```bash
npx create-supamode-app@latest
```

--------------------------------

### Initialize Firebase Project

Source: https://makerkit.dev/docs/next-fire/configuration/setting-up-firebase

Starts the interactive setup process for the Firebase project.

```bash
firebase init
```

--------------------------------

### Setup Email Starter Repository

Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/authentication-emails

Commands to clone, install, and export email templates using the MakerKit email starter.

```bash
git clone https://github.com/makerkit/makerkit-emails-starter
```

```bash
cd makerkit-emails-starter && npm install
```

```bash
npm run export
```

--------------------------------

### Complete Database Test Example

Source: https://makerkit.dev/docs/next-supabase-turbo/development/database-tests

A full test suite example demonstrating setup, RLS enforcement verification, and cleanup.

```sql
begin;
create extension "basejump-supabase_test_helpers" version '0.0.6';
select no_plan();
-- Setup test users
select makerkit.set_identifier('owner', 'owner@example.com');
select makerkit.set_identifier('member', 'member@example.com');
select makerkit.set_identifier('stranger', 'stranger@example.com');
-- Create team (as owner)
select makerkit.authenticate_as('owner');
select public.create_team_account('TestTeam');
-- Add member using postgres role (bypasses RLS)
set local role postgres;
insert into accounts_memberships (account_id, user_id, account_role)
values (
  (select id from accounts where slug = 'testteam'),
  tests.get_supabase_uid('member'),
  'member'
);
-- Test member access (RLS enforced)
select makerkit.authenticate_as('member');
select isnt_empty(
  $$ select * from accounts where slug = 'testteam' $$,
  'Member can see their team'
);
-- Test stranger cannot see team (RLS enforced)
select makerkit.authenticate_as('stranger');
select is_empty(
  $$ select * from accounts where slug = 'testteam' $$,
  'Stranger cannot see team due to RLS'
);
-- Verify team actually exists (bypass RLS)
set local role postgres;
select isnt_empty(
  $$ select * from accounts where slug = 'testteam' $$,
  'Team exists in database (confirms RLS is working, not missing data)'
);
select * from finish();
rollback;
```

--------------------------------

### Supabase Startup Output

Source: https://makerkit.dev/docs/next-supabase/getting-started/running-the-application

Example output displayed after running the Supabase start command, containing API URLs and keys.

```text
> supabase start
Applying migration 20221215192558_schema.sql...
Seeding data supabase/seed.sql...
Started supabase local development setup.
         API URL: http://localhost:54321
          DB URL: postgresql://postgres:postgres@localhost:54322/postgres
      Studio URL: http://localhost:54323
    Inbucket URL: http://localhost:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: ****************************************************
service_role key: ****************************************************
```

--------------------------------

### Complete Test Example

Source: https://makerkit.dev/docs/tanstack-prisma/database/testing

Demonstrates a full test suite setup using Vitest, PGlite, and database factories.

```typescript

import { describe, it, expect, beforeAll, afterEach, afterAll } from 'vitest';
import { createTestDatabase } from '@kit/database/testing/pglite';
import {
  createTestUser,
  createTestOrganization,
  createTestMember,
  createTestSubscription,
} from '@kit/database/testing';
import { createOrgAuthContext } from '@kit/database';
describe('Organization Billing', () => {
  let testDb: Awaited<ReturnType<typeof createTestDatabase>>;
  beforeAll(async () => {
    testDb = await createTestDatabase();
  });
  afterEach(async () => {
    await testDb.cleanup();
  });
  afterAll(async () => {
    await testDb.close();
  });
  it('should create organization with subscription', async () => {
    // Create test data using factories
    const testUser = createTestUser();
    const testOrg = createTestOrganization();
    const testMember = createTestMember({
      userId: testUser.id,
      organizationId: testOrg.id,
      role: 'owner',
    });
    // Insert with the Prisma client
    await testDb.db.user.create({ data: testUser });
    await testDb.db.organization.create({ data: testOrg });
    await testDb.db.member.create({ data: testMember });
    await testDb.db.subscription.create({
      data: {
        id: crypto.randomUUID(),
        plan: 'pro-monthly',
        referenceId: testOrg.id,
        status: 'active',
      },
    });
    // Create auth context for queries
    const ctx = createOrgAuthContext(testUser.id, testOrg.id, 'owner');
    // Query with the context's organizationId
    const result = await testDb.db.subscription.findFirst({
      where: { referenceId: ctx.organizationId },
    });
    expect(result?.plan).toBe('pro-monthly');
    expect(result?.status).toBe('active');
  });
});

```

--------------------------------

### Start the application

Source: https://makerkit.dev/docs/nextjs-drizzle/development-guide/development-workflow

Commands to initialize the development environment and start the application server.

```bash
pnpm compose:dev:up
pnpm dev
```

--------------------------------

### Start Production Server

Source: https://makerkit.dev/docs/next-fire/development/commands

Starts the production server; requires a prior build.

```bash
npm start
```

--------------------------------

### Setup and Initialization

Source: https://makerkit.dev/docs/tanstack-supabase/api/team-account-api

How to initialize the Team Account API using the Supabase server client within TanStack Start server functions.

```APIDOC
## Initialization

### Description
Import `createTeamAccountsApi` from `@kit/team-accounts/api` and initialize it with a Supabase server client inside your request handler.

### Usage
```typescript
import { createTeamAccountsApi } from '@kit/team-accounts/api';
import { getSupabaseServerClient } from '@kit/supabase/server-client';

// Inside a server function
const client = getSupabaseServerClient();
const api = createTeamAccountsApi(client);
```
```

--------------------------------

### Install Nginx

Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/vps

Install the Nginx web server on the VPS.

```bash
apt install -y nginx
```

--------------------------------

### Install Docker

Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/vps

Install Docker engine and compose plugin on Ubuntu.

```bash
# Add Docker's official GPG key
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
# Set up repository
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | tee /etc/apt/sources.list.d/docker.list > /dev/null
# Install Docker
apt update
apt install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
```

--------------------------------

### Install project dependencies

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/vps

Navigate to the project directory and install dependencies using pnpm.

```bash
cd repo # Replace repo with the name of the repository
pnpm install
```

--------------------------------

### Install Startup Font

Source: https://makerkit.dev/docs/tanstack-supabase/customization/fonts

Installs DM Sans for a friendly and approachable aesthetic.

```bash
pnpm --filter web add @fontsource-variable/dm-sans
# Headings and body: DM Sans
```

--------------------------------

### Install LibSQL Client

Source: https://makerkit.dev/docs/nextjs-drizzle/database/sqlite

Install the required dependency for Turso or edge runtime support.

```bash
pnpm --filter @kit/database add @libsql/client
```

--------------------------------

### Basic Setup

Source: https://makerkit.dev/docs/supamode/development/storage-explorer-api

How to initialize the StorageService using the @kit/storage-explorer package.

```APIDOC
## Basic Setup

### Description
Initialize the storage service instance to begin performing operations on Supabase storage.

### Code Example
```typescript
import { createStorageService } from '@kit/storage-explorer';
import { Context } from 'hono';

// Create service instance
const storageService = createStorageService(context);
```
```

--------------------------------

### Terminal warnings

Source: https://makerkit.dev/docs/next-supabase-turbo/installation/clone-repository

Examples of common terminal warnings that can be safely ignored during installation.

```text
WARN	 Failed to create bin at /vercel/path0/node_modules/.pnpm/node_modules/.bin/supabase. ENOENT: no such file or directory
```

```text
Ignored build scripts: core-js-pure, sharp, unrs-resolver.
Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.
```

--------------------------------

### Start development environment

Source: https://makerkit.dev/docs/react-native-supabase/running-locally

Commands to launch the backend, web app, and native build from the repository root.

```bash
# 1 — backend
pnpm run supabase:web:start
# 2 — web app (serves /api/v1 and the pages native links out to)
pnpm dev                # or: pnpm --filter web dev
# 3 — native, first run: compiles and installs a development build
pnpm ios:native        # or: pnpm android:native
```

--------------------------------

### Get Public URL Usage

Source: https://makerkit.dev/docs/supamode/development/storage-explorer-api

Example of generating a public URL for a file asset.

```typescript
const publicUrl = await storageService.getPublicUrl({
  bucket: 'public-assets',
  path: 'images/logo.png'
});
// URL can be used directly in <img> tags
```

--------------------------------

### Complete Layout Configuration Example

Source: https://makerkit.dev/docs/next-supabase-turbo/customization/layout-style

A comprehensive example of configuring navigation styles, sidebar behavior, and theme settings for a team-focused SaaS.

```bash
# Personal account: simple header navigation
NEXT_PUBLIC_USER_NAVIGATION_STYLE=header
# Team workspace: full sidebar with collapsed default
NEXT_PUBLIC_TEAM_NAVIGATION_STYLE=sidebar
NEXT_PUBLIC_TEAM_SIDEBAR_COLLAPSED=true
NEXT_PUBLIC_SIDEBAR_COLLAPSIBLE_STYLE=icon
NEXT_PUBLIC_ENABLE_SIDEBAR_TRIGGER=true
# Theme settings
NEXT_PUBLIC_DEFAULT_THEME_MODE=system
NEXT_PUBLIC_ENABLE_THEME_TOGGLE=true
```

--------------------------------

### Invoking Built-in Skills

Source: https://makerkit.dev/docs/next-supabase-turbo/installation/ai-agents

Examples of how to trigger specific skills by typing the command at the start of a message.

```text
/postgres-supabase-expert Create a projects table with RLS policies for team access
```

```text
/server-action-builder Create an action to update user settings
```

--------------------------------

### Get Audit Logs Usage Example

Source: https://makerkit.dev/docs/supamode/development/audit-logs-api

Demonstrates fetching the first page of audit logs.

```typescript
// Get all audit logs (first page)
const logs = await auditLogsService.getAuditLogs({});
console.log(`Found ${logs.total} total logs`);
console.log(`Showing page ${logs.pageIndex + 1} of ${logs.pageCount}`);
console.log(`Logs:`, logs.logs);
```

--------------------------------

### Install Node.js and pnpm

Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/vps

Set up the runtime environment using nvm.

```bash
# Install nvm (check https://github.com/nvm-sh/nvm for latest version)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
# Load nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
# Install Node.js (LTS version)
nvm install --lts
# Install pnpm
npm install -g pnpm
```

--------------------------------

### Clone and Install Email Starter

Source: https://makerkit.dev/docs/next-supabase-turbo/authentication-emails

Initialize the email starter repository to begin customizing templates.

```bash
git clone https://github.com/makerkit/makerkit-emails-starter
cd makerkit-emails-starter
pnpm install
```

--------------------------------

### Get Download URL Usage

Source: https://makerkit.dev/docs/supamode/development/storage-explorer-api

Example usage of the getDownloadUrl method to retrieve a URL for file access.

```typescript
const downloadUrl = await storageService.getDownloadUrl({
  bucket: 'documents',
  path: 'reports/annual-report.pdf'
});
// Use URL for download
window.open(downloadUrl, '_blank');
```

--------------------------------

### Create a GET API Route

Source: https://makerkit.dev/docs/remix-supabase/how-to/api/api-routes

Example of a basic Remix loader function that returns a JSON response.

```typescript
import { json } from "@remix-run/node";
export async function loader() {
 return json({ text: 'Hello' });
}
```

--------------------------------

### Starting development services

Source: https://makerkit.dev/docs/nextjs-prisma/installation/running-the-project

Commands to initialize the development environment and database.

```bash
pnpm run compose:dev:up
```

```bash
pnpm dev
```

```bash
pnpm --filter @kit/database prisma:migrate
```

```bash
pnpm --filter @kit/database prisma:generate
```

```bash
pnpm run seed
```

--------------------------------

### Get Signed URL Usage

Source: https://makerkit.dev/docs/supamode/development/storage-explorer-api

Example of generating a temporary signed URL for a private file with a custom expiration.

```typescript
const signedUrl = await storageService.getSignedUrl({
  bucket: 'private-documents',
  path: 'contracts/agreement.pdf',
  expiresIn: 7200  // 2 hours
});
// URL expires after 2 hours
```

--------------------------------

### Start Development Server

Source: https://makerkit.dev/docs/nextjs-prisma/development-guide/development-workflow

Command to initialize the development environment for all apps and packages.

```bash
# Start all apps and packages
pnpm dev
# Development server runs at:
# - Web app: http://localhost:3000
```

--------------------------------

### Start Development Server

Source: https://makerkit.dev/docs/next-supabase-turbo/authentication-emails

Command to initiate the development environment for testing authentication flows.

```bash
pnpm dev
```

--------------------------------

### Start the development environment

Source: https://makerkit.dev/docs/nextjs-drizzle/installation/running-the-project

Commands to initialize local services, run database migrations, seed data, and start the development server.

```bash
pnpm compose:dev:up
pnpm --filter "@kit/database" drizzle:migrate
pnpm seed
pnpm dev
```

--------------------------------

### Quick Start Subscription Update

Source: https://makerkit.dev/docs/nextjs-drizzle/billing/per-seat-billing

Basic example of fetching an active subscription and updating its quantity based on member count.

```typescript
import { auth } from '@kit/better-auth';
import { getBilling } from '@kit/billing-api';
// Get active subscription and update seats
const billing = await getBilling(auth);
const { subscriptions } = await billing.listSubscriptions({ referenceId: orgId });
const sub = subscriptions.find(s => s.status === 'active');
await billing.updateSubscriptionQuantity({
  subscriptionId: sub.providerSubscriptionId,
  quantity: memberCount,
  priceId: process.env.STRIPE_SEAT_PRICE_ID, // Stripe only
});
```

--------------------------------

### addSetup(group, callback) and setup(group?)

Source: https://makerkit.dev/docs/next-supabase-turbo/api/registry-api

Manages initialization tasks for the registry.

```APIDOC
## addSetup(group, callback)
### Description
Queues an initialization task for a specific group.

## setup(group?)
### Description
Executes all queued initialization tasks for a given group. Tasks are executed once per group.
```

--------------------------------

### Get Audit Log Details Usage Example

Source: https://makerkit.dev/docs/supamode/development/audit-logs-api

Demonstrates fetching details for a specific audit log entry by ID.

```typescript
const details = await auditLogsService.getAuditLogDetails({
  id: 'audit-log-456'
});
console.log('Log details:', details.log);
console.log('User info:', details.user);
```

--------------------------------

### Supabase CLI Examples

Source: https://makerkit.dev/docs/next-supabase-turbo/installation/common-commands

Common examples for linking projects, pushing migrations, and pulling remote schemas.

```bash

# Link to remote project
pnpm --filter web supabase link --project-ref your-project-ref
# Push migrations to production
pnpm --filter web supabase db push
# Pull remote schema
pnpm --filter web supabase db pull

```

--------------------------------

### Get Audit Logs by Account ID Usage Example

Source: https://makerkit.dev/docs/supamode/development/audit-logs-api

Demonstrates fetching audit logs for a specific account with custom pagination.

```typescript
const accountLogs = await auditLogsService.getAuditLogsByAccountId({
  accountId: 'account-123',
  page: 1,
  limit: 50
});
console.log(`Account has ${accountLogs.total} audit log entries`);
```

--------------------------------

### Start the development server

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/running-project

Command to launch the web application locally.

```bash
# Start the development server
pnpm dev
```

--------------------------------

### Install Demo Schema

Source: https://makerkit.dev/docs/supamode/installation/running-project

Executes the SQL command to seed the database with sample tables, roles, and user accounts.

```sql
call supamode.install_demo_schema();
```

--------------------------------

### Implement Pagination with TanStack Router

Source: https://makerkit.dev/docs/tanstack-supabase/content/cms-api

Example of using the CMS API within a TanStack Start route loader for paginated blog posts.

```typescript
import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import * as z from 'zod';
import { createCmsClient } from '@kit/cms';
const getPostsPage = createServerFn({ method: 'GET' })
  .validator(z.object({ page: z.number(), perPage: z.number().default(10) }))
  .handler(async ({ data }) => {
    const client = await createCmsClient();
    return client.getContentItems({
      collection: 'posts',
      limit: data.perPage,
      offset: (data.page - 1) * data.perPage,
      sortBy: 'publishedAt',
      sortDirection: 'desc',
    });
  });
export const Route = createFileRoute('/(marketing)/blog/')({
  validateSearch: (search: Record<string, unknown>) => ({
    page: typeof search.page === 'number' ? search.page : 1,
  }),
  loaderDeps: ({ search }) => ({ page: search.page }),
  loader: ({ deps }) => getPostsPage({ data: { page: deps.page, perPage: 10 } }),
  component: BlogList,
});
function BlogList() {
  const { page } = Route.useSearch();
  const { items, total } = Route.useLoaderData();
  const totalPages = Math.ceil(total / 10);
  return (
    <div>
      {items.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.description}</p>
        </article>
      ))}
      <nav>
        Page {page} of {totalPages}
      </nav>
    </div>
  );
}
```

--------------------------------

### CI Configuration for GitHub Actions

Source: https://makerkit.dev/docs/nextjs-drizzle/testing/e2e

Example configuration for running E2E tests in a CI environment, including building and starting the test server.

```yaml
- name: Run E2E tests
  run: |
    pnpm --filter web build:test
    pnpm --filter web start:test &
    sleep 10
    pnpm --filter web-e2e test
  env:
    CI: true
```

--------------------------------

### Install Roadmap Plugin via CLI

Source: https://makerkit.dev/docs/next-supabase-turbo/plugins/roadmap-plugin

Run this command to initiate the plugin installation process.

```bash
npx @makerkit/cli plugins add
```

--------------------------------

### Dependency Addition Examples

Source: https://makerkit.dev/docs/nextjs-drizzle/installation/setup-dependencies

Practical examples of adding specific libraries to designated packages.

```bash
# Add a UI library to web app
pnpm --filter web add framer-motion
# Add to specific package
pnpm --filter @kit/auth add jose
```

--------------------------------

### Initialize Team Account API in Server Functions

Source: https://makerkit.dev/docs/tanstack-supabase/api/team-account-api

Demonstrates initializing the API within a TanStack Start server function for GET requests.

```typescript
import { createServerFn } from '@tanstack/react-start';
import { createTeamAccountsApi } from '@kit/team-accounts/api';
import { getSupabaseServerClient } from '@kit/supabase/server-client';
export const loadTeamDataFunction = createServerFn({ method: 'GET' }).handler(
  async () => {
    const client = getSupabaseServerClient();
    const api = createTeamAccountsApi(client);
    // Use API methods
  },
);
```

--------------------------------

### Start Development Server

Source: https://makerkit.dev/docs/next-supabase-turbo/development/database-webhooks

Command to initiate the local Next.js development server.

```bash
pnpm run dev
```

--------------------------------

### Implement Billing Return Route

Source: https://makerkit.dev/docs/tanstack-supabase/billing/billing-api

Example of fetching session status within a TanStack Start server function and handling the result in a route component.

```typescript
import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import * as z from 'zod';
import { createBillingGatewayService } from '@kit/billing-gateway';
const retrieveSession = createServerFn({ method: 'GET' })
  .validator(z.object({ sessionId: z.string() }))
  .handler(async ({ data }) => {
    const service = createBillingGatewayService('stripe');
    const session = await service.retrieveCheckoutSession({
      sessionId: data.sessionId,
    });
    return { status: session.status };
  });
export const Route = createFileRoute('/_authenticated/settings/billing/return')({
  validateSearch: (search: Record<string, unknown>) => ({
    session_id:
      typeof search.session_id === 'string' ? search.session_id : undefined,
  }),
  loaderDeps: ({ search }) => ({ sessionId: search.session_id }),
  loader: ({ deps }) => {
    if (!deps.sessionId) {
      return { status: null };
    }
    return retrieveSession({ data: { sessionId: deps.sessionId } });
  },
  component: BillingReturnPage,
});
function BillingReturnPage() {
  const { status } = Route.useLoaderData();
  if (!status) {
    return <div>Invalid session</div>;
  }
  if (status === 'complete') {
    return <div>Payment successful!</div>;
  }
  return <div>Payment pending or failed</div>;
}
```

--------------------------------

### Start MySQL and push migrations

Source: https://makerkit.dev/docs/nextjs-drizzle/database/mysql

Commands to start the database container and apply migrations.

```bash
pnpm compose:dev:up
```

```bash
pnpm --filter "@kit/database" drizzle:migrate
```

--------------------------------

### Clean and Reinstall Workspace

Source: https://makerkit.dev/docs/next-supabase-turbo/troubleshooting/troubleshooting-installation

Use these commands to clear existing workspace artifacts and perform a fresh dependency installation if the development server fails to start.

```bash
pnpm run clean:workspaces
pnpm run clean
pnpm i
```

--------------------------------

### Run Local Stripe Webhooks Server

Source: https://makerkit.dev/docs/next-fire/development/commands

Starts a local server to listen for Stripe webhooks; requires Docker or a local Stripe CLI installation.

```bash
npm run stripe:listen
```

--------------------------------

### Configure Supabase Client Instructions

Source: https://makerkit.dev/docs/tanstack-supabase/installation/ai-agents

Example content for a package-specific AGENTS.md file defining client usage patterns for Supabase.

```markdown

# packages/supabase/AGENTS.md
## Client Usage
### Server Client (server functions & loaders)
import { getSupabaseServerClient } from '@kit/supabase/server-client';
const client = getSupabaseServerClient();
// RLS automatically enforced
### Admin Client (Use Sparingly)
import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
// CRITICAL: Bypasses RLS - validate manually!

```

--------------------------------

### Define Correct and Incorrect Patterns in AGENTS.md

Source: https://makerkit.dev/docs/tanstack-supabase/installation/ai-agents

Provide explicit code examples to guide the agent on preferred implementation patterns, such as using middleware and validators.

```typescript

## Patterns
### CORRECT - Use createServerFn with middleware + validator
export const myFunction = createServerFn({ method: 'POST' })
  .middleware(authFunctionMiddleware)
  .validator(schema)
  .handler(async ({ data, context }) => { /* context.user available */ });
### INCORRECT - Raw handler with no middleware or validation
export const myFunction = createServerFn().handler(async ({ data }) => {}); // Missing auth + validation

```

--------------------------------

### Install nvm and Node.js LTS

Source: https://makerkit.dev/docs/nextjs-prisma/installation/prerequisites

Install the Node Version Manager (nvm) and use it to install the latest Long Term Support version of Node.js.

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
# Install latest LTS Node.js
nvm install --lts
nvm use --lts
```

--------------------------------

### Install Umami Plugin

Source: https://makerkit.dev/docs/next-supabase-turbo/analytics/umami-analytics-provider

Use the MakerKit CLI to automatically wire up the Umami plugin.

```bash
npx @makerkit/cli@latest plugins add umami
```

--------------------------------

### Managing Setup Hooks

Source: https://makerkit.dev/docs/next-supabase-turbo/api/registry-api

Register initialization tasks using addSetup and execute them with setup. The setup method is idempotent and will not re-run tasks that have already completed.

```typescript
// Add setup tasks
emailRegistry.addSetup('initialize', async () => {
  console.log('Initializing email service...');
  // Verify API keys, warm up connections, etc.
});
emailRegistry.addSetup('initialize', async () => {
  console.log('Loading email templates...');
});
// Run all setup tasks (idempotent)
await emailRegistry.setup('initialize');
await emailRegistry.setup('initialize'); // No-op, already ran
```

--------------------------------

### Run Development Server

Source: https://makerkit.dev/docs/next-fire/development/commands

Starts the local development server.

```bash
npm run dev
```

--------------------------------

### Install Package Manager

Source: https://makerkit.dev/docs/nextjs-drizzle/installation/overview

Global installation command for pnpm.

```bash
npm install -g pnpm
```

--------------------------------

### Install dependencies

Source: https://makerkit.dev/docs/next-supabase-turbo/installation/clone-repository

Installs all workspace dependencies across the monorepo.

```bash
pnpm i
```

--------------------------------

### Sample .env File

Source: https://makerkit.dev/docs/react-router-supabase-turbo/configuration/environment-variables

A comprehensive list of environment variables required for the application setup.

```bash
# SITE
VITE_SITE_URL=http://localhost:5173
VITE_PRODUCT_NAME=Makerkit
VITE_SITE_TITLE="Makerkit - The easiest way to build and manage your SaaS"
VITE_SITE_DESCRIPTION="Makerkit is the easiest way to build and manage your SaaS. It provides you with the tools you need to build your SaaS, without the hassle of building it from scratch."
VITE_DEFAULT_THEME_MODE=light
VITE_THEME_COLOR="#ffffff"
VITE_THEME_COLOR_DARK="#0a0a0a"
# AUTH
VITE_AUTH_PASSWORD=true
VITE_AUTH_MAGIC_LINK=false
VITE_CAPTCHA_SITE_KEY=
# BILLING
VITE_BILLING_PROVIDER=stripe
# CMS
CMS_CLIENT=keystatic
# KEYSTATIC
VITE_KEYSTATIC_CONTENT_PATH=./content
# LOCALES PATH
VITE_LOCALES_PATH=apps/web/public/locales
# PATHS (to be used in "packages")
SIGN_IN_PATH=/auth/sign-in
SIGN_UP_PATH=/auth/sign-up
TEAM_ACCOUNTS_HOME_PATH=/home
INVITATION_PAGE_PATH=/join
# FEATURE FLAGS
VITE_ENABLE_THEME_TOGGLE=true
VITE_ENABLE_PERSONAL_ACCOUNT_DELETION=true
VITE_ENABLE_PERSONAL_ACCOUNT_BILLING=true
VITE_ENABLE_TEAM_ACCOUNTS_DELETION=true
VITE_ENABLE_TEAM_ACCOUNTS_BILLING=true
VITE_ENABLE_TEAM_ACCOUNTS=true
VITE_ENABLE_TEAM_ACCOUNTS_CREATION=true
```

--------------------------------

### Start WordPress Locally

Source: https://makerkit.dev/docs/next-supabase-turbo/content/wordpress

Commands to initialize the WordPress development environment.

```bash
# From packages/cms/wordpress/
docker-compose up
```

```bash
pnpm --filter @kit/wordpress run start
```

--------------------------------

### Install dependencies

Source: https://makerkit.dev/docs/next-fire/getting-started/clone-repository

Installs the required Node.js packages for the project.

```bash
npm i
```

--------------------------------

### Start Development Services

Source: https://makerkit.dev/docs/nextjs-drizzle/installation/prerequisites

Initializes the local development environment using Docker, including PostgreSQL and Mailpit.

```bash
pnpm compose:dev:up
```

--------------------------------

### Install Node.js

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/vps

Install Node.js version 20 using nvm.

```bash
nvm install 20
```
Tokens:
Raw