create-demokit

Set up DemoKit in your project with a single command. Detects your framework, installs the right packages, scans for API endpoints, generates fixture data, and wires up the provider.

npx create-demokit

What it does

1. Detects your framework from package.json (Next.js, Remix, React Router, TanStack Query, SWR, tRPC, or plain React)
2. Installs packages — @demokit-ai/core plus the correct adapter for your framework
3. Scans your codebase for API endpoints using schema parsers and fetch-call detection
4. Generates fixtures with realistic placeholder data for each detected endpoint
5. Creates a provider wrapper component tailored to your framework
6. Wires the provider into your root layout or entry file
7. Adds middleware for ?demo=true URL handling (Next.js only)

After setup, visit any page with ?demo=true to activate demo mode.

Usage

# Interactive setup in current directory
npx create-demokit

# Set up a specific project
npx create-demokit ./my-app

# Non-interactive with defaults
npx create-demokit --yes

# Preview changes without writing files
npx create-demokit --dry-run

# Set up with DemoKit Cloud
npx create-demokit --cloud

Flags

| Flag | Description | |------|-------------| | --yes, -y | Skip all prompts, use defaults | | --cloud | Generate DemoKit Cloud config and .env.local entries | | --framework <f> | Override detection: next, remix, react-router, tanstack-query, swr, trpc, react | | --level <l> | Data generation level: l1 (schema-valid) or l2 (relationship-valid, default) | | --dry-run | Show what would happen without making changes | | --no-install | Skip package installation | | --no-wire | Skip provider wiring (only generate fixtures) | | --verbose | Show detailed output | | -h, --help | Show help | | -v, --version | Show version |

What gets created

For a Next.js project, create-demokit generates:

lib/demo-fixtures.ts      # Fixture data for each detected endpoint
app/demo-providers.tsx     # DemoKitNextProvider wrapper component
middleware.ts              # Handles ?demo=true URL parameter

And modifies:

app/layout.tsx             # Wraps children with DemoKitProviders

The exact files vary by framework:

| Framework | Fixtures | Provider | Extra | |-----------|----------|----------|-------| | Next.js | lib/demo-fixtures.ts | app/demo-providers.tsx | middleware.ts | | Remix | app/demo/fixtures.ts | app/demo/providers.tsx | | | React Router | app/demo/fixtures.ts | app/demo/providers.tsx | | | TanStack Query | src/demo/fixtures.ts | src/demo/providers.tsx | | | SWR | src/demo/fixtures.ts | src/demo/providers.tsx | | | tRPC | src/demo/fixtures.ts | src/demo/providers.tsx | | | React | src/demo/fixtures.ts | src/demo/providers.tsx | |

Endpoint detection

The CLI finds your API endpoints using two strategies:

Schema parsers — statically analyze API route files, tRPC routers, Drizzle/Prisma schemas, Zod schemas, and TypeScript types to extract endpoints and data models.

Fetch-call finder — scans your client code for patterns like fetch('/api/...'), useSWR('/api/...'), useQuery(...), and axios.get(...) to discover which endpoints your app actually calls.

Both strategies run and results are merged. Schema-sourced endpoints take precedence when duplicates are found.

Fixtures

The generated fixture file maps HTTP method + URL pattern to response data:

import type { FixtureMap } from '@demokit-ai/core'

const DEMO_USERS = [
  { id: '1', name: 'Alice Johnson', email: '[email protected]', role: 'admin' },
  { id: '2', name: 'Bob Smith', email: '[email protected]', role: 'member' },
]

export const fixtures: FixtureMap = {
  'GET /api/users': () => DEMO_USERS,
  'GET /api/users/:id': ({ params }) => DEMO_USERS.find(u => u.id === params.id),
  'POST /api/users': ({ body }) => ({ id: crypto.randomUUID(), ...body }),
}

// Empty-state scenario
export const emptyFixtures: FixtureMap = {
  'GET /api/users': () => [],
}

Two scenarios are generated by default: fixtures (happy path with sample data) and emptyFixtures (empty state). Edit the file to add more scenarios or customize the data.

File conflicts

The CLI never silently overwrites existing files:

• Interactive mode — prompts you to overwrite or skip
• --yes mode — skips existing files (safe default)
• --dry-run — shows what would happen without writing anything

DemoKit Cloud

With --cloud, the CLI also generates:

• lib/demokit-config.ts — remote source configuration
• .env.local entries — NEXT_PUBLIC_DEMOKIT_API_URL and NEXT_PUBLIC_DEMOKIT_API_KEY

Set your API key after setup to connect to DemoKit Cloud for AI-powered narrative fixture generation.

Requirements

• Node.js 20+
• A project with a package.json

License

Apache-2.0