Loading...
Loading...
> Everything you need to build and monetize AI features.
Fabrk includes a complete AI toolkit: multi-provider support (OpenAI, Google, Ollama), credit-based billing, AI chat with streaming, text tools (summarize, translate, rewrite), image generation (DALL-E), voice (speech-to-text, text-to-speech), MCP server for AI-assisted development, and pre-built AI components. Ship AI features from day one.
DESC: Set up your preferred AI provider. Fabrk auto-detects available providers and falls back gracefully.
1$# .env.local23$# Option 1: OpenAI (recommended for production)4$OPENAI_API_KEY="sk-..."56$# Option 2: Google Gemini7$GOOGLE_AI_API_KEY="..."89$# Option 3: Ollama (local development)10$OLLAMA_ENABLED="true"11$OLLAMA_BASE_URL="http://localhost:11434/v1"12$OLLAMA_MODEL="llama3.1:8b"
DESC: Check which provider is active.
1import { getCurrentProviderName, isAIConfigured } from "@/lib/ai";23// Check if any provider is configured4const configured = isAIConfigured(); // true56// Get active provider name7const providerName = getCurrentProviderName(); // "OpenAI (GPT-4o-mini)"
DESC: Enable credit-based billing for AI features.
1$# Run database migration2$npx prisma db push34$# Credits are now tracked automatically5$# See /docs/features/ai-credits for full setup
Send chat messages with streaming responses.
1// POST /api/ai/chat2const response = await fetch('/api/ai/chat', {3 method: 'POST',4 headers: { 'Content-Type': 'application/json' },5 body: JSON.stringify({6 messages: [7 { role: 'user', content: 'Explain React hooks' }8 ],9 systemPrompt: 'You are a helpful coding assistant'10 }),11});1213// Read streaming response14const reader = response.body.getReader();15const decoder = new TextDecoder();16while (true) {17 const { done, value } = await reader.read();18 if (done) break;19 const text = decoder.decode(value);20 // Process the streaming text chunk21}
Summarize, rewrite, translate, and more.
1// POST /api/ai/text2const response = await fetch('/api/ai/text', {3 method: 'POST',4 headers: { 'Content-Type': 'application/json' },5 body: JSON.stringify({6 text: 'Your long article here...',7 operation: 'summarize', // or: rewrite, translate, expand, grammar, tone8 options: { language: 'es' } // for translate9 }),10});1112const { result, operation, model } = await response.json();
Generate images with DALL-E 3.
1// POST /api/ai/image2const response = await fetch('/api/ai/image', {3 method: 'POST',4 headers: { 'Content-Type': 'application/json' },5 body: JSON.stringify({6 prompt: 'A futuristic cityscape at sunset',7 size: '1024x1024', // or: 1792x1024, 1024x17928 style: 'vivid', // or: natural9 quality: 'hd', // or: standard10 }),11});1213const { images, model } = await response.json();14// images[0].url contains the generated image URL
Speech-to-text and text-to-speech.
1// Speech-to-Text: POST /api/ai/speech-to-text2const formData = new FormData();3formData.append('audio', audioFile);4formData.append('language', 'en'); // optional56const sttResponse = await fetch('/api/ai/speech-to-text', {7 method: 'POST',8 body: formData,9});10const { text } = await sttResponse.json();1112// Text-to-Speech: POST /api/ai/text-to-speech13const ttsResponse = await fetch('/api/ai/text-to-speech', {14 method: 'POST',15 headers: { 'Content-Type': 'application/json' },16 body: JSON.stringify({17 text: 'Hello, world!',18 voice: 'nova', // alloy, echo, fable, onyx, nova, shimmer19 model: 'tts-1-hd', // or: tts-120 }),21});22const audioBlob = await ttsResponse.blob();
Full chat interface with streaming responses, message history, and terminal styling.
Summarize, rewrite, translate, expand, grammar check, and tone adjustment.
Generate images from text prompts with DALL-E 3 integration.
Speech-to-text (Whisper) and text-to-speech (TTS) for voice applications.
Generate forms from natural language. Get Zod schemas and React components instantly.
Token-based billing system for AI operations. Track usage, manage balances.
| Endpoint | Method | Description |
|---|---|---|
| /api/ai/chat | POST | Streaming chat completions |
| /api/ai/text | POST | Text operations (summarize, translate, etc.) |
| /api/ai/image | POST | Image generation (DALL-E 3) |
| /api/ai/speech-to-text | POST | Audio transcription (Whisper) |
| /api/ai/text-to-speech | POST | Voice synthesis (TTS) |
| /api/ai/generate-form | POST | AI form generation |
| Provider | Best For | Structured Output | Cost |
|---|---|---|---|
| OpenAI | Production apps | Excellent | ~$0.15/1M tokens |
| High volume | Good | ~$0.075/1M tokens | |
| Ollama | Local dev, privacy | Limited | Free (local) |
Provider Priority
Default credit costs per AI operation. Customize in src/lib/credits/pricing.ts
| Operation | Credits | Typical Use |
|---|---|---|
| Chat Message | 1 | AI chat, Q&A |
| Text Operation | 2 | Summarize, translate |
| Form Generation | 10 | AI form builder |
| Speech-to-Text | 5 | Audio transcription |
| Text-to-Speech | 5 | Voice synthesis |
| Image Generation | 50 | DALL-E images |
Ready to Use
Full chat interface with message bubbles, input field, streaming, and controls.
User and assistant message components with terminal styling and timestamps.
Animated typing indicator for streaming responses.
Current credit balance with color-coded progress bar. Warnings at 75%/90%.
14-day bar chart showing daily credit consumption with hover tooltips.
Transaction table with type icons, amounts, timestamps, and filtering.
Interactive demo of the AI chat component with streaming responses.
Full documentation on credit-based billing, tier allowances, and usage tracking.
Connect Claude Code or Cursor for AI-assisted development with design system awareness.
Try the AI form generator. See how natural language becomes React components.