shobky/fable-ui: Fable UI is a copy-and-own registry of AI-intent-aware product experiences. It pairs React components with Vercel AI SDK tool definitions, model-facing manifests, examples, and docs so product engineers can render trusted UI from AI tool…

Fable UI is a copy-and-own registry of AI-intent-aware product experiences. It pairs React components with Vercel AI SDK tool definitions, model-facing manifests, examples, and docs so product engi...

Summary

Fable UI is a copy-and-own shadcn registry of React components paired with Zod-validated Vercel AI SDK tool contracts for Next.js apps. It renders bounded, model-facing UI from AI tool calls rather than letting the assistant emit untrusted HTML or JSX. The host application keeps ownership of data access, authentication, and persistence.

What it is useful for

Fable UI is useful for engineers building agentic chat interfaces in Next.js where the assistant should select from a fixed catalog of surfaces and blocks instead of generating arbitrary markup. The catalog exposes bounded tools — show_metric, show_next_actions, request_confirmation, collect_input, show_chart, show_text_editor, show_email_composer, show_code_block, and show_data_browser — alongside shared rendering code in core, model manifests, and optional host-owned REST and Firebase resource drivers. Adoption is incremental: engineers pick only the items they need rather than replacing their design system.

How engineers can use it

Per the README, Fable UI requires a Next.js application with shadcn/ui already set up, plus accurate @components, @lib, and @hooks aliases in components.json. Items are installed one at a time through the shadcn CLI against the hosted registry origin:

pnpm dlx shadcn@latest add https://fable-ui.shobky.com/r/core.json
pnpm dlx shadcn@latest add https://fable-ui.shobky.com/r/metric-card.json
pnpm dlx shadcn@latest add https://fable-ui.shobky.com/r/quickstart.json

The quickstart block installs /fable-chat plus /api/fable-chat exposing only show_metric and show_next_actions. On the server, only the AI SDK tool object is passed to streamText; on the client, the full Fable definition is mapped to FableToolPart.

Configure server-only values in .env.local: FABLE_AI_PROVIDER, FABLE_AI_MODEL, FABLE_AI_API_KEY. Note that .env.local does not do shell-style interpolation, so write the secret value directly rather than $OPENAI_API_KEY.

Documented limitations worth planning around:

• quickstart is a minimal two-tool demo; confirmation, form, chart, editor, email, code, DataBrowser, drivers, and get_rendered_data are added deliberately via the AI SDK integration guide.
• firebase-driver can trigger a pnpm 11 ignored-build prompt for @firebase/util and protobufjs; the README recommends reviewing scripts and setting an explicit allowBuilds policy rather than approving by default.
• The repository skill at .agents/skills/fable-ui is a coding-agent installation guide, not an MCP server.

For registry development, the README documents pnpm install, pnpm test, pnpm typecheck, pnpm build, pnpm registry:check, and recommends pnpm registry:consumer-smoke before publishing. License: MIT.