Fable UI Quickstart

fable-ui/quickstart

FreeBlock

Install a production-ready AI SDK chat at /fable-chat with env-driven provider configuration.

Live preview

live · rendered by the registry

Rendered by fable-ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://fable-ui.shobky.com/r/quickstart.json

Source

examples/quickstart/app/fable-chat/page.tsxfable-ui.shobky.com/r/quickstart.json

1import { FableChat } from "@/components/fable-ui/chat/fable-chat"
2 
3export default function FableChatPage() {
4  return (
5    <main className="min-h-screen bg-background">
6      <FableChat />
7    </main>
8  )
9}

What it pulls in

npm packages

ai
@ai-sdk/react
@ai-sdk/anthropic
@ai-sdk/deepseek
@ai-sdk/google
@ai-sdk/mistral
@ai-sdk/openai
@openrouter/ai-sdk-provider
lucide-react
react-markdown
remark-gfm

Other registry items

button
input-group
textarea
message-scroller
message
bubble
marker
shobky/fable-ui/core
shobky/fable-ui/metric-card
shobky/fable-ui/suggested-actions

Files it writes

examples/quickstart/app/fable-chat/page.tsx
examples/quickstart/app/api/fable-chat/route.ts
examples/quickstart/components/fable-chat.tsx
examples/quickstart/components/fable-message.tsx
examples/quickstart/components/fable-tool-part.tsx
examples/quickstart/lib/tools.ts
examples/quickstart/lib/provider-config.ts
examples/quickstart/README.md

More from fable-ui

All 10 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs	Command
Chartscharts	fable-ui	Blocks	Free	3 deps · 6 files
DataBrowserdata-browser	fable-ui	Blocks	Free	4 deps · 21 files