Quickstart

1. Install

pnpm add @fabrik-sdk/ui ai @ai-sdk/google zod motion

2. Create the server route

This file handles LLM communication. API keys are read from environment variables.

app/api/chat/route.ts

import { aiSdk } from "@fabrik-sdk/ui/ai-sdk"
import { handler } from "@fabrik-sdk/ui/server"
import { google } from "@ai-sdk/google"

export const POST = handler({
  provider: aiSdk({ model: google("gemini-3-flash-preview") })
  // Reads GOOGLE_GENERATIVE_AI_API_KEY from .env.local
})

3. Create the client page

app/page.tsx

"use client"
import { Fabrik, Chat } from "@fabrik-sdk/ui/react"
import { server } from "@fabrik-sdk/ui/server"
import { defineComponent } from "@fabrik-sdk/ui"
import { z } from "zod"

const provider = server({ url: "/api/chat" })

const weatherCard = defineComponent({
  name: "weather_card",
  description: "Shows weather for a city",
  schema: z.object({
    city: z.string(),
    temp: z.number(),
    condition: z.string(),
  }),
  component: ({ city, temp, condition }) => (
    <div className="rounded-xl border p-4">
      <h3 className="font-bold">{city}</h3>
      <p className="text-3xl">{temp}°F</p>
      <p className="text-muted-foreground">{condition}</p>
    </div>
  ),
})

export default function Page() {
  return (
    <Fabrik provider={provider} components={[weatherCard]}>
      <Chat />
    </Fabrik>
  )
}

4. Add your API key

.env.local

GOOGLE_GENERATIVE_AI_API_KEY=AI...

5. Run

pnpm dev

Open http://localhost:3000 and ask "Show me the weather in San Francisco".

Switching providers

Swap the AI SDK model in your server route — the client code never changes:

OpenAI

import { aiSdk } from "@fabrik-sdk/ui/ai-sdk"
import { handler } from "@fabrik-sdk/ui/server"
import { openai } from "@ai-sdk/openai"

export const POST = handler({
  provider: aiSdk({ model: openai("gpt-4o") })
})
// pnpm add @ai-sdk/openai — env: OPENAI_API_KEY

Anthropic

import { aiSdk } from "@fabrik-sdk/ui/ai-sdk"
import { handler } from "@fabrik-sdk/ui/server"
import { anthropic } from "@ai-sdk/anthropic"

export const POST = handler({
  provider: aiSdk({ model: anthropic("claude-sonnet-4-20250514") })
})
// pnpm add @ai-sdk/anthropic — env: ANTHROPIC_API_KEY

Google Gemini

import { aiSdk } from "@fabrik-sdk/ui/ai-sdk"
import { handler } from "@fabrik-sdk/ui/server"
import { google } from "@ai-sdk/google"

export const POST = handler({
  provider: aiSdk({ model: google("gemini-3-flash-preview") })
})
// pnpm add @ai-sdk/google — env: GOOGLE_GENERATIVE_AI_API_KEY

The client code never changes.