v0 by Vercel integration

Generate with v0, enforce with preset AI.

v0 by Vercel generates UI fast. preset AI ensures that generated code follows your design system rules. Together they create a complete workflow: define your standards in preset AI, prototype rapidly in v0, then validate before shipping.

The workflow

┌─────────────────────────────────────────────────────────────────┐
│  1. DEFINE          2. PROTOTYPE        3. VALIDATE            │
│  ─────────          ────────────        ──────────             │
│  preset AI          v0                  preset AI CLI          │
│                                                                 │
│  • Tokens           • Generate UI       • preset drift         │
│  • Presets          • Iterate fast      • Fix violations       │
│  • Patterns         • Use your tokens   • Commit clean         │
└─────────────────────────────────────────────────────────────────┘

Quick start

1. Open your design system in v0

From the preset AI dashboard, go to Settings → Export and click the Open in v0 button. This sends your presets to v0 as a component registry.

Alternatively, from any preset detail page (Studio), click the Open in v0 button in the header to open that specific preset.

2. Generate UI in v0

Once in v0, your design system context is loaded. You can:

• Ask v0 to generate components using your presets
• Reference your design tokens for consistent styling
• Build new UI that aligns with your existing patterns

3. Validate with preset AI

After generating code in v0, validate it against your design system:

# Check for drift in your codebase
preset drift ./src

# Strict mode — fail on any violation
preset drift ./src --strict

# Output for CI integration
preset drift ./src --format sarif

How it works

v0 registry format

preset AI exports your design system in v0's Registry JSON format, making your presets available as components in v0:

# Export to registry.json
preset export --format v0-registry --output registry.json

The registry includes:

• Component definitions with props and variants
• AI guidance for each preset (when to use, what to avoid)
• Dependencies for proper imports
• Documentation inline with components

Registry endpoint

preset AI hosts a registry endpoint for each design system. v0 fetches it in real time, so v0 always has your latest definitions.

Open in v0 URL

The Open in v0 button constructs a v0.dev/chat/api/open URL pointing at your registry. v0 fetches your registry and loads your design system context into the chat.

Complete example

Step 1: Define a button preset in preset AI

{
  "name": "primary-action",
  "component": "button",
  "description": "Primary call-to-action button",
  "props": {
    "variant": "default",
    "size": "default"
  },
  "usage": [
    "Form submissions",
    "Primary page actions",
    "Checkout flows"
  ],
  "avoid": [
    "Secondary actions (use secondary-action)",
    "Destructive actions (use destructive-action)"
  ]
}

Step 2: Open in v0 and generate

Click Open in v0 and ask:

Create a checkout form with a submit button using my primary-action preset.

v0 generates code using your preset definitions.

Step 3: Validate the generated code

$ preset drift ./src/components/CheckoutForm.tsx

Checking 1 file...

✓ CheckoutForm.tsx
  └── Button: matches primary-action preset

No drift detected. Your code follows the design system.

Step 4: Handle violations

If v0 generated something that doesn't match:

$ preset drift ./src/components/CheckoutForm.tsx

Checking 1 file...

✗ CheckoutForm.tsx
  └── Button (line 24): variant="primary" not in design system
     Suggestion: Use variant="default" (primary-action preset)

1 violation found.

Fix the code and re-run until clean.

CI/CD integration

Add drift detection to your CI pipeline:

# .github/workflows/drift.yml
name: Design system drift check

on: [pull_request]

jobs:
  drift:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install preset AI CLI
        run: curl -fsSL https://presetai.dev/install.sh | sh

      - name: Check for drift
        run: preset drift ./src --strict --format sarif > results.sarif

      - name: Upload SARIF
        uses: github/codeql-action/upload-sarif@v3
        with:
          sarif_file: results.sarif

See CI integration for the full reference.

Best practices

Define before generating

Create your presets in preset AI before prototyping in v0. This ensures v0 has your design system context.

Validate early and often

Run preset drift locally before pushing. Catch violations before they reach code review.

Use preset AI's AI guidance

Each preset includes usage and avoid fields. v0 uses these to make better suggestions.

Don't skip validation

v0 generates fast, but it may not always match your exact specifications. Always validate.

Don't modify generated code without re-validating

If you tweak v0's output, run drift again to ensure you didn't introduce violations.

Troubleshooting

"Open in v0" not working

1. Ensure you have a design system selected in preset AI
2. Check that your design system has at least one preset
3. Try the direct registry URL in your browser to verify it's accessible

v0 not using my presets

1. Verify the registry URL is correct
2. Check that presets have descriptive names and AI guidance
3. Be explicit in your prompt: "Use the primary-action preset from my design system"

Drift detection false positives

1. Ensure your preset definitions are up to date
2. Check that component prop mappings are correct
3. Use preset drift --verbose for detailed matching info