shobky/fable-ui

Fable UI is a collection of ready-made building blocks for apps built with Next.js, shadcn/ui, and the Vercel AI SDK. Its main idea is that when a user asks an AI assistant a question inside your app, the answer does not always need to come back as plain chat text. Sometimes it makes more sense to show a real piece of app interface, like a metric card, a small form, or a chart. Fable UI gives the AI a defined set of tools it can call, and each tool is tied to a specific React component that your app already owns and controls. The project works on a copy and own model. Instead of installing a package that stays hidden in node_modules, you copy the actual component files into your own project using a command line tool. That means you can freely edit the components, their validation rules, and how the AI is told to use them, so the result matches your product instead of staying generic. The registry includes pieces such as a metric card for showing one KPI number, a suggested actions component for offering follow up prompts, a confirmation card for asking the user to approve something before it happens, a form card for collecting a few fields mid conversation, a data browser for showing filterable and searchable lists of records, and a charts component for line, bar, and pie charts. There is also a quickstart option that sets up a working chat page and API route in one step, plus optional drivers for connecting to REST APIs or Firebase. Every tool call from the AI is checked against a schema before anything renders, so an invalid or unexpected response falls back to an error state instead of breaking the page. This is aimed at product engineers who want AI features that feel like a normal, trustworthy part of their app rather than an open ended chat box. It requires a Next.js and shadcn/ui setup, and you supply your own AI provider and API key to run it.