Integrate with vibesdiy.work API for AI-powered component generation

[jchris]

Overview

Replace local AI integration with hosted PromptCode API for better performance and centralized prompt logic.

API Integration

• Endpoint: https://vibesdiy.work/api/prompts/code
• Method: POST (streaming response)
• Auth: None required for CLI usage

Request Format

{
  "userPrompt": "react dashboard with charts",
  "stream": true,
  "temperature": 0.7
}

Implementation Tasks

• Add API client (src/ai/api-client.ts)
• Parse streaming component code response
• Extract import statements for dependency detection
• Convert React component to scaffolded project structure
• Add fallback to local generation if API unavailable
• Update CLI to use hosted endpoint by default

Benefits

• Eliminates code duplication with vibes.diy
• Uses proven prompt composition system
• Reduces CLI bundle size
• Gets Memphis Group styling and library selection

Technical Details

The endpoint uses the same sophisticated prompt composition logic as vibes.diy:

• Dynamic LLM module selection based on user prompt
• Memphis Group 1980s design aesthetic
• Fireproof database integration
• callAI structured outputs
• Tailwind CSS styling

Response is a streaming React component that can be parsed to extract:

• Import statements for package.json dependencies
• Component code for App.jsx
• Styling patterns for project structure

CLI Usage Pattern

// create-vibe will call:
const response = await fetch("https://vibesdiy.work/api/prompts/code", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    userPrompt: "react dashboard with charts",
    stream: true
  })
});

Example Flow

1. User runs: npm create vibe "todo app with drag and drop"
2. CLI calls PromptCode API with user's prompt
3. API responds with streaming React component using react-beautiful-dnd
4. CLI extracts dependencies from import statements
5. CLI scaffolds project with proper package.json and component files
6. User gets fully configured project ready for development

This approach leverages the same AI system that powers vibes.diy while providing a traditional CLI scaffolding experience.

[jchris]

It doesn't come back with source code, it comes back with a URL.