feat: v0 (Vercel) integration - import AI-generated UI components

[rubenmarcus]

Summary

Integrate with v0.dev to import AI-generated UI components and continue development with ralph-starter loops.

Why This Integration Matters

v0 is great at generating UI components from prompts, but it's not a full development environment. Ralph-starter can take v0 outputs and:

• Add business logic
• Integrate with backends
• Write tests
• Deploy to production

v0 Platform API (Beta)

SDK

npm install v0-sdk

Available Features

• Create and manage chat conversations
• Create and manage projects
• Export code to GitHub
• Link with Vercel deployments

Models Available

• v0-1.5-md - Everyday tasks and UI generation
• v0-1.5-lg - Advanced thinking/reasoning

Integration Approach

Option 1: Direct API Integration

ralph-starter source v0 --project <project-id>
ralph-starter source v0 --chat <chat-id>

Pulls:

• Generated components
• Chat history (as context for spec)
• Project structure

Option 2: GitHub Sync

v0 can export to GitHub. Ralph-starter watches the repo:

ralph-starter source github --repo user/v0-project --watch

Option 3: v0 Chat as Spec Source

Use v0 conversation as the spec for ralph loop:

ralph-starter run --spec-from-v0 <chat-id>

Config

// ralph.config.ts
export default {
  sources: {
    v0: {
      apiKey: process.env.V0_API_KEY,
      defaultModel: 'v0-1.5-md'
    }
  }
}

Auth

ralph-starter auth v0
# Opens browser for API key from v0.dev/chat/settings/keys

Use Cases

1. Generate UI in v0 → ralph adds logic, tests, deployment
2. Prototype in v0 → ralph implements full feature
3. v0 designs components → ralph integrates into existing app