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"
}