API Reference

Core (`@fabrik-sdk/ui`)

defineComponent

Defines a React component the LLM can render.

import { defineComponent } from "@fabrik-sdk/ui"
import { z } from "zod"

const card = defineComponent({
  name: "info_card",
  description: "Displays information in a card",
  schema: z.object({ title: z.string(), body: z.string() }),
  component: ({ title, body }) => <div>{title}: {body}</div>,
})

Parameters: ComponentDef<T>

Field	Type	Required
`name`	`string`	Yes
`description`	`string`	Yes
`schema`	`ZodType<T>`	Yes
`component`	`ComponentType<T>`	Yes
`loading`	`ComponentType<Partial<T>>`	No
`stepTitle`	`string \| (args: T) => string`	No

defineTool

Defines a server-side tool the LLM can call.

import { defineTool } from "@fabrik-sdk/ui"
import { z } from "zod"

const fetchWeather = defineTool({
  name: "fetch_weather",
  description: "Fetches weather data for a city",
  schema: z.object({ city: z.string() }),
  run: async ({ city }) => {
    const res = await fetch(`https://api.weather.com/${city}`)
    return res.json()
  },
})

Parameters: ToolDef<In, Out>

Field	Type	Required
`name`	`string`	Yes
`description`	`string`	Yes
`schema`	`ZodType<In>`	Yes
`run`	`(input: In) => Out \| Promise<Out>`	Yes
`stepTitle`	`string \| (args: In) => string`	No
`render`	`(input, context) => ReactNode`	No

createLibrary

Groups component definitions with uniqueness validation.

import { createLibrary } from "@fabrik-sdk/ui"

const components = createLibrary([weatherCard, stockChart])

FabrikClient

The core engine. Used internally by <Fabrik> — you only need this for headless usage.

import { FabrikClient } from "@fabrik-sdk/ui"

const client = new FabrikClient({
  provider,
  components: [weatherCard],
  tools: [fetchWeather],
  systemPrompt: "You are a helpful assistant.",
  storage: "memory",
  ask: true,
  maxSteps: 10,
})

React (`@fabrik-sdk/ui/react`)

Fabrik

Root provider component. Wraps your app and initializes the client.

<Fabrik
  provider={provider}
  components={[weatherCard]}
  tools={[fetchWeather]}
  systemPrompt="You are a helpful assistant."
  storage="memory"
  ask={true}
  maxSteps={10}
>
  {children}
</Fabrik>

Chat

Full-featured chat surface.

<Chat sidebar placeholder="Ask anything..." />

Fab

Floating action button that expands into a chat panel.

<Fab position="bottom-right" />

useChat

Hook for building custom chat UI. Returns messages, input controls, and actions.

See the Components page for the full return type.

Message

Renders a single FabrikMessage with all its parts.

import { Message } from "@fabrik-sdk/ui/react"

<Message message={msg} />

FabrikPages / defineRoute

Multi-page AI routing. Each route has its own system prompt and components.

import { FabrikPages, defineRoute } from "@fabrik-sdk/ui/react"

Server (`@fabrik-sdk/ui/server`)

handler

Creates a Next.js API route handler.

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

server

Client-side adapter that connects to the handler route.

import { server } from "@fabrik-sdk/ui/server"

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

Types

All types are exported from @fabrik-sdk/ui:

import type {
  FabrikMessage,
  FabrikThread,
  Part,
  TextPart,
  ComponentPart,
  ThinkingPart,
  StepPart,
  ImagePart,
  AskPart,
  ArtifactPart,
  StreamEvent,
  ComponentDef,
  ToolDef,
  Provider,
  StreamOptions,
  ToolSpec,
  Storage,
  ClientState,
  AskConfig,
  ConfirmAsk,
  ChoiceAsk,
  MultiChoiceAsk,
  TextAsk,
  PermissionAsk,
} from "@fabrik-sdk/ui"

FabrikMessage

interface FabrikMessage {
  id: string
  role: "user" | "assistant" | "system"
  parts: Part[]
  createdAt: string
}

Part (discriminated union)

type Part =
  | TextPart
  | ComponentPart
  | ThinkingPart
  | StepPart
  | ImagePart
  | AskPart
  | ArtifactPart

ThreadStatus

type ThreadStatus = "idle" | "streaming" | "waiting" | "error"

PartStatus

type PartStatus = "pending" | "streaming" | "done" | "error"

API Reference

On this page