Agent API

Generate animated React components programmatically. Use with AI agents, CI/CD pipelines, or build your own design tools.

Authentication

Pass your Gemini API key as a Bearer token. This is BYOK (Bring Your Own Key) — your key goes directly to the Gemini API.

Authorization: Bearer YOUR_GEMINI_API_KEY

POST /api/v1/generate

Generate an animated React component from a text prompt with optional style presets.

Request Body

Field	Type	Required	Description
prompt	string	✅	What to generate
style	string	—	Design style ID (e.g. glassmorphism)
palette	string	—	Color palette ID (e.g. midnight-aurora)
font	string	—	Font pairing ID (e.g. inter-jakarta)
animated	boolean	—	Enable animations (default: true)
animationLevel	string	—	subtle \| moderate \| extreme \| 3d

Response

{
  "code": "export default function GeneratedComponent() { ... }",
  "style_used": "glassmorphism",
  "palette_used": { "primary": "#00ff88", ... },
  "font_used": "inter-jakarta",
  "animation_level": "moderate"
}

Examples

curl -X POST https://vibedesign.vip/api/v1/generate \
  -H "Authorization: Bearer YOUR_GEMINI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "A pricing card with 3 tiers",
    "style": "glassmorphism",
    "palette": "midnight-aurora",
    "font": "inter-jakarta",
    "animated": true,
    "animationLevel": "moderate"
  }'

Browse Styles & Palettes

GET /api/v1/styles

Returns all available design styles and font pairings.

curl https://vibedesign.vip/api/v1/styles

GET /api/v1/palettes

Returns all available color palettes with hex values.

curl https://vibedesign.vip/api/v1/palettes

Use with AI Agents

The VibeDesign API is designed for AI agent integration. Agents can browse available styles, pick a palette, and generate production-ready React components in a single API call.

MCP Tool Definition

{
  "name": "vibedesign_generate",
  "description": "Generate an animated React component with VibeDesign",
  "parameters": {
    "prompt": { "type": "string", "description": "What to generate" },
    "style": { "type": "string", "description": "Design style (glassmorphism, cyberpunk, etc.)" },
    "palette": { "type": "string", "description": "Color palette (midnight-aurora, solar-flare, etc.)" },
    "animationLevel": { "type": "string", "enum": ["subtle", "moderate", "extreme", "3d"] }
  }
}

💡 Pro Tip

First call GET /api/v1/styles and GET /api/v1/palettes to discover available options, then pass them to the generate endpoint for consistent, branded output.

Rate Limits

10 requests per minute per API key. The Retry-After header indicates when you can try again.