Please sign in
;
}
return (
Welcome, {user?.firstName}
Loading...
;
if (!isSignedIn) return Sign in to continue
;
return Hello, {user?.firstName}
;
}
```
## With tRPC
```ts
// packages/api/src/trpc.ts
import { initTRPC, TRPCError } from "@trpc/server";
import { auth } from "@clerk/nextjs/server";
const t = initTRPC.contextLoading...
;
return Hello, {user?.name}
;
}
```
### Mutations
```tsx
"use client";
import { trpc } from "@/app/providers";
export function UpdateName() {
const utils = trpc.useUtils();
const updateUser = trpc.user.update.useMutation({
onSuccess: () => {
utils.user.me.invalidate();
},
});
const handleSubmit = (e: React.FormEventWelcome, {user?.name}
{posts.map((post) => ({post.title}
))}
{error}
; } // Usage
// Do: Inline styles with safe properties
|
```
```tsx
// Don't: External fonts (unreliable)
fontFamily: "'Custom Font', sans-serif"
// Do: System font stack
fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
```
```tsx
// Don't: Dark mode CSS (limited support)
@media (prefers-color-scheme: dark)
// Do: Light theme only, or use Resend's dark mode support
```
================================================================================
## integrations/openrouter.md
================================================================================
# OpenRouter Integration
OpenRouter provides access to multiple AI models (Claude, GPT-4, Gemini, Llama, etc.) through a single API, with automatic fallbacks and cost optimization.
## Default Model
**Gemini 2.5 Flash** (`google/gemini-2.5-flash`) is the default for new projects:
- Pricing: $0.30/M input, $2.50/M output
- Context: 1,048,576 tokens (1M)
- Multimodal: text, image, audio, video, file input
- Built-in reasoning/thinking capabilities
Model choice is project-specific—switch based on requirements (coding, reasoning, speed, cost).
## Installation
```bash
pnpm add @openrouter/ai-sdk-provider ai
```
## Basic Setup
### Environment Variables
```bash
OPENROUTER_API_KEY=sk-or-v1-...
```
### Provider Configuration
```ts
// lib/ai.ts
import { createOpenRouter } from "@openrouter/ai-sdk-provider";
export const openrouter = createOpenRouter({
apiKey: process.env.OPENROUTER_API_KEY,
});
```
## Usage with Vercel AI SDK
### Text Generation
```ts
import { generateText } from "ai";
import { openrouter } from "@/lib/ai";
const { text } = await generateText({
model: openrouter("google/gemini-2.5-flash"),
prompt: "Explain quantum computing in simple terms",
});
```
### Streaming
```ts
import { streamText } from "ai";
import { openrouter } from "@/lib/ai";
const result = await streamText({
model: openrouter("google/gemini-2.5-flash"),
messages: [
{ role: "user", content: "Write a haiku about programming" }
],
});
for await (const chunk of result.textStream) {
process.stdout.write(chunk);
}
```
### With Tools
```ts
import { generateText, tool } from "ai";
import { openrouter } from "@/lib/ai";
import { z } from "zod";
const { text, toolCalls } = await generateText({
model: openrouter("google/gemini-2.5-flash"),
tools: {
weather: tool({
description: "Get the current weather",
parameters: z.object({
location: z.string(),
}),
execute: async ({ location }) => {
return { temperature: 72, conditions: "sunny" };
},
}),
},
prompt: "What's the weather in San Francisco?",
});
```
## Next.js API Route Example
```ts
// app/api/chat/route.ts
import { streamText } from "ai";
import { openrouter } from "@/lib/ai";
export async function POST(req: Request) {
const { messages } = await req.json();
const result = await streamText({
model: openrouter("google/gemini-2.5-flash"),
messages,
});
return result.toDataStreamResponse();
}
```
## React Hook Usage
```tsx
"use client";
import { useChat } from "ai/react";
export function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: "/api/chat",
});
return (
{messages.map((m) => (
);
}
```
## Cost Optimization
OpenRouter automatically routes to the cheapest available model that matches your requirements. You can also set budget limits:
```ts
const openrouter = createOpenRouter({
apiKey: process.env.OPENROUTER_API_KEY,
headers: {
"HTTP-Referer": "https://yoursite.com",
"X-Title": "Your App Name",
},
});
```
## Fallback Models
OpenRouter handles fallbacks automatically, but you can specify preferences:
```ts
// Will try Gemini first, then fall back to Claude
const result = await generateText({
model: openrouter("google/gemini-2.5-flash", {
fallbacks: ["anthropic/claude-sonnet-4"],
}),
prompt: "Hello",
});
```
================================================================================
## integrations/fal-ai.md
================================================================================
# fal.ai Image Generation
fal.ai provides fast image generation APIs.
## Default Models
**GPT-Image 1.5** (`fal-ai/gpt-image-1.5`) - OpenAI's text-to-image model:
- Pricing: $0.009 (low) to $0.133 (high) per image
- Supports text-to-image and image editing
- Sizes: 1024x1024, 1024x1536, 1536x1024
**Gemini 2.5 Flash Image** (`fal-ai/gemini-25-flash-image`) - Google's image generation:
- Pricing: $0.039/image
- Aspect ratios: 1:1, 16:9, 4:3, etc.
## Installation
```bash
pnpm add @fal-ai/client
```
## Environment Variables
```bash
FAL_KEY=...
```
## Setup
```ts
// lib/fal.ts
import { fal } from "@fal-ai/client";
fal.config({
credentials: process.env.FAL_KEY,
});
export { fal };
```
## Basic Image Generation
### GPT-Image 1.5
```ts
import { fal } from "@/lib/fal";
const result = await fal.subscribe("fal-ai/gpt-image-1.5", {
input: {
prompt: "A serene mountain landscape at sunset",
image_size: "1024x1024",
num_images: 1,
},
});
const imageUrl = result.data.images[0].url;
```
### Gemini 2.5 Flash Image
```ts
const result = await fal.subscribe("fal-ai/gemini-25-flash-image", {
input: {
prompt: "Professional headshot of a business executive",
aspect_ratio: "1:1",
},
});
```
## Image Sizes
| Size | Dimensions | Use Case |
|------|------------|----------|
| `square` | 1024x1024 | Avatars, icons |
| `square_hd` | 1536x1536 | High-res squares |
| `portrait_4_3` | 768x1024 | Portraits |
| `portrait_16_9` | 576x1024 | Tall portraits |
| `landscape_4_3` | 1024x768 | Standard landscape |
| `landscape_16_9` | 1024x576 | Wide landscape |
## Advanced Options
```ts
const result = await fal.subscribe("fal-ai/gpt-image-1.5", {
input: {
prompt: "A cyberpunk city at night",
image_size: "1536x1024",
num_images: 4,
quality: "high", // "low", "medium", "high"
},
});
```
## Image Editing
GPT-Image 1.5 supports image editing:
```ts
const result = await fal.subscribe("fal-ai/gpt-image-1.5", {
input: {
prompt: "Add a cat sitting on the chair",
image_url: "https://example.com/room.jpg",
},
});
```
## Polling vs Subscription
```ts
// Subscription (recommended) - auto-polls until complete
const result = await fal.subscribe("fal-ai/gpt-image-1.5", {
input: { prompt: "..." },
logs: true,
onQueueUpdate: (update) => {
if (update.status === "IN_PROGRESS") {
console.log("Processing...", update.logs);
}
},
});
// Manual queue for long operations
const { request_id } = await fal.queue.submit("fal-ai/gpt-image-1.5", {
input: { prompt: "..." },
});
// Check status later
const status = await fal.queue.status("fal-ai/gpt-image-1.5", {
requestId: request_id,
});
// Get result when done
const result = await fal.queue.result("fal-ai/gpt-image-1.5", {
requestId: request_id,
});
```
## Next.js Server Action
```ts
// actions/generate-image.ts
"use server";
import { fal } from "@/lib/fal";
export async function generateImage(prompt: string) {
const result = await fal.subscribe("fal-ai/gpt-image-1.5", {
input: {
prompt,
image_size: "1024x1024",
num_images: 1,
},
});
return result.data.images[0].url;
}
```
## Rate Limiting
fal.ai has per-model rate limits. For production:
```ts
async function generateWithRetry(prompt: string, maxRetries = 3) {
for (let i = 0; i < maxRetries; i++) {
try {
return await fal.subscribe("fal-ai/gpt-image-1.5", {
input: { prompt },
});
} catch (error: any) {
if (error.status === 429 && i < maxRetries - 1) {
await new Promise((r) => setTimeout(r, 2000 * (i + 1)));
continue;
}
throw error;
}
}
}
```
================================================================================
## integrations/voyage-embeddings.md
================================================================================
# Voyage AI Embeddings
Voyage AI provides state-of-the-art text embeddings optimized for semantic search and RAG applications.
## Installation
```bash
pnpm add voyage-ai-provider voyageai
```
## Environment Variables
```bash
VOYAGE_API_KEY=pa-...
```
## Basic Setup
### Provider Configuration
```ts
// lib/embeddings.ts
import { createVoyage } from "voyage-ai-provider";
export const voyage = createVoyage({
apiKey: process.env.VOYAGE_API_KEY,
});
```
### Direct Client (Alternative)
```ts
import VoyageAI from "voyageai";
const voyage = new VoyageAI({
apiKey: process.env.VOYAGE_API_KEY,
});
```
## Generating Embeddings
### With AI SDK Provider
```ts
import { embed, embedMany } from "ai";
import { voyage } from "@/lib/embeddings";
// Single text
const { embedding } = await embed({
model: voyage.textEmbeddingModel("voyage-3.5"),
value: "What is machine learning?",
});
// Multiple texts
const { embeddings } = await embedMany({
model: voyage.textEmbeddingModel("voyage-3.5"),
values: [
"What is machine learning?",
"How does neural networks work?",
"Explain deep learning",
],
});
```
### With Direct Client
```ts
const result = await voyage.embed({
input: ["Text to embed", "Another text"],
model: "voyage-3.5",
});
const embeddings = result.data.map((d) => d.embedding);
```
## Text Embedding Models
| Model | Dimensions | Best For |
|-------|------------|----------|
| `voyage-3-large` | 2048 | SOTA text, 9.74% better than OpenAI v3 large |
| `voyage-3.5` | 1024 | General purpose text |
| `voyage-3.5-lite` | 512 | Faster, lower cost |
| `voyage-code-3` | 1024 | Code retrieval |
| `voyage-finance-2` | 1024 | Financial documents |
| `voyage-law-2` | 1024 | Legal documents |
All models support dimension reduction (2048, 1024, 512, 256) via the `output_dimension` parameter.
## Multimodal Embeddings
For image and video search:
| Model | Best For |
|-------|----------|
| `voyage-multimodal-3` | Text + images, 41% better than CLIP on table/figure retrieval |
| `voyage-multimodal-3.5` | Text + images + video |
Multimodal models process interleaved text + images (unlike CLIP which separates them). 200M text tokens + 150B pixels free per account.
```ts
// Multimodal embedding with image
const { embedding } = await embed({
model: voyage.textEmbeddingModel("voyage-multimodal-3"),
value: {
content: [
{ type: "text", text: "Product description" },
{ type: "image_url", image_url: { url: "https://..." } },
],
},
});
```
## Database Storage (Neon + pgvector)
### Schema
```ts
// db/schema.ts
import { pgTable, text, vector, serial } from "drizzle-orm/pg-core";
export const documents = pgTable("documents", {
id: serial("id").primaryKey(),
content: text("content").notNull(),
embedding: vector("embedding", { dimensions: 1024 }),
});
```
### Enable pgvector
```sql
CREATE EXTENSION IF NOT EXISTS vector;
```
### Insert with Embedding
```ts
import { db } from "@/db";
import { documents } from "@/db/schema";
import { embed } from "ai";
import { voyage } from "@/lib/embeddings";
async function indexDocument(content: string) {
const { embedding } = await embed({
model: voyage.textEmbeddingModel("voyage-3.5"),
value: content,
});
await db.insert(documents).values({
content,
embedding,
});
}
```
### Semantic Search
```ts
import { sql } from "drizzle-orm";
import { db } from "@/db";
import { documents } from "@/db/schema";
import { embed } from "ai";
import { voyage } from "@/lib/embeddings";
async function search(query: string, limit = 10) {
const { embedding } = await embed({
model: voyage.textEmbeddingModel("voyage-3.5"),
value: query,
});
const results = await db
.select({
id: documents.id,
content: documents.content,
similarity: sql
{m.role}: {m.content}
))}
{isUploading &&
);
}
```
### Upload from Server Action
```ts
// lib/uploadthing-server.ts
import { UTApi } from "uploadthing/server";
export const utapi = new UTApi();
```
```ts
// actions/upload.ts
"use server";
import { utapi } from "@/lib/uploadthing-server";
export async function uploadFromUrl(url: string) {
const response = await utapi.uploadFilesFromUrl(url);
return response.data?.url;
}
export async function deleteFile(fileKey: string) {
await utapi.deleteFiles(fileKey);
}
```
## File Types Reference
```ts
// Common configurations
f({ image: { maxFileSize: "4MB" } }) // Images only
f({ pdf: { maxFileSize: "16MB" } }) // PDFs only
f({ video: { maxFileSize: "256MB" } }) // Videos only
f({ audio: { maxFileSize: "32MB" } }) // Audio only
f({ blob: { maxFileSize: "8MB" } }) // Any file type
f(["image", "pdf"]) // Multiple types
// With count limits
f({ image: { maxFileSize: "4MB", maxFileCount: 10 } })
// Custom mime types
f({ "image/png": { maxFileSize: "4MB" } })
```
## Styling
### Tailwind CSS
```tsx
Uploading... } |