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 calls. The goal is simple: let an assistant choose from product surfaces your app has explicitly installed and allowlisted, then render those results as typed React UI instead of asking users to read everything as chat text. The problem Chat-only product interfaces are good at conversation, but weak at product work. When the answer is a KPI, a confirmation, a form, or a browsable set of records, a giant text answer makes users parse structure by hand. Markdown tables help, but they are not product UI. They do not carry component state, interaction patterns, confirmation flows, disabled states, or app-owned validation. Fable UI keeps the conversational model, then routes the model's structured intent into UI the host app owns. Core flow User prompt -> AI model -> Fable tool call -> schema validation -> tool router -> React component -> rendered UI Today the app registers Fable tools with the AI SDK. When the model emits a tool call, the payload is validated against the tool schema. The client-side router maps the tool name to a component renderer and passes validated props into the installed Fable component. How it works The runtime is deliberately small. The model selects an installed tool. Its payload is validated. A renderer maps the streamed tool state to the installed React component. Unknown tools and invalid payloads fall back safely instead of crashing the conversation. The same boundary applies to data. The model may select an allowlisted resource such as orders. It can see safe fields, filters, and sorting options. It never sees private endpoints, Firestore paths, secrets, or permission rules. Read more https://shobky.com/case-studies/fable-ui