API Access

Semantic UI Component API for AI-Powered Development

Semantic Search

Natural language component search for AI code editors

Community-Driven Library

Growing collection of community components, verified for quality and reliability

Authentication

x-api-key: your_api_key_here

Search API

Request

// POST /api/search
{
  "search": "hero section",  // Required: search query
  "page": 1,                // Optional: page number (default: 1)
  "per_page": 20           // Optional: results per page (default: 20)
}

Success Response

{
  "results": [{
    "name": "Default",
    "preview_url": "https://cdn.21st.dev/...",
    "video_url": "https://cdn.21st.dev/...",
    "demo_id": 123,              // Use this ID for prompt generation
    "component_data": {
      "name": "Animated hero",
      "description": "Animated hero with text and two shadcn/ui buttons",
      "code": "https://cdn.21st.dev/...",
      "install_command": "pnpm dlx shadcn@latest add "https://21st.dev/r/...""
    },
    "component_user_data": {
      "name": "serafim",
      "username": "serafimcloud", 
      "image_url": "https://img.clerk.com/..."
    },
    "usage_count": 1621
  }],
  "metadata": {
    "plan": "free",           // Current API plan
    "requests_remaining": 80,  // Remaining API requests
    "pagination": {
      "total": 45,            // Total number of results
      "page": 1,              // Current page
      "per_page": 20,         // Results per page
      "total_pages": 3        // Total number of pages
    }
  }
}

Error Responses

// 401 Unauthorized
{
  "error": "API key is required"
}
// or
{
  "error": "Invalid API key"
}

// 400 Bad Request
{
  "error": "Search query is required"
}

// 500 Internal Server Error
{
  "error": "Internal server error",
  "details": "Error message details"
}

Generate Prompt API

Request

// POST /api/prompts
{
  "prompt_type": "basic",    // Required: one of ["basic","sitebrew","v0","lovable","bolt","extended","replit","magic_patterns"]
  "demo_id": "123"          // Required: demo ID from search results
}

Success Response

{
  "prompt": "Copy-paste this component to /components/ui folder:\n```tsx\ncomponent.tsx\n// Component code here...\n\ndemo.tsx\n// Demo code here...\n```\n"
}

Error Responses

// 401 Unauthorized
{
  "error": "API key is required"
}
// or
{
  "error": "Invalid API key"
}

// 400 Bad Request
{
  "error": "prompt_type and demo_id are required"
}
// or
{
  "error": "Demo or component code is missing"
}

// 404 Not Found
{
  "error": "Demo not found"
}
// or
{
  "error": "Component data not found"
}

// 500 Internal Server Error
{
  "error": "Internal server error",
  "details": "Error message details"
}
Your API Key