gitwtfhub

wtf is fable-ui?

shobky/fable-ui — explained in plain English

Analysis updated 2026-05-18

5TypeScriptAudience · developerComplexity · 3/5Setup · moderate

TL;DR

A copy-and-own set of React components that let an AI assistant show real app UI, like metric cards or forms, instead of only replying in chat text.

Mindmap

mindmap
  root((fable-ui))
    What it does
      Renders AI tool calls as UI
      Copy and own components
      Schema validated payloads
    Tech stack
      Next.js
      shadcn ui
      Vercel AI SDK
      Zod
    Use cases
      Show KPI metrics
      Confirm actions
      Collect form input
      Browse data lists
    Audience
      Product engineers
      AI app builders

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Show a trusted KPI or metric card in response to a user's chat question.

REASON 2

Ask the user to confirm an action before a side effect happens.

REASON 3

Collect a few structured form fields directly inside a conversation.

REASON 4

Let users browse and filter a list of records the AI surfaces.

What's in the stack?

TypeScriptNext.jsshadcn/uiVercel AI SDKZodReact

How it stacks up

shobky/fable-uiagentigris/agentfundalange/tinyclaude
Stars555
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatehardmoderate
Complexity3/55/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Requires a Next.js plus shadcn/ui project and your own AI provider API key.

The README does not state license terms.

Wtf does this do

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.

Yoink these prompts

Prompt 1
Show me how to install the Fable UI quickstart chat into my Next.js app.
Prompt 2
Walk me through wiring the metric-card tool into my AI SDK route.
Prompt 3
Explain how Fable UI validates a tool payload before rendering it.
Prompt 4
Help me add the data-browser component with search and filters.
Prompt 5
Show me how to connect the REST driver to my own API for Fable UI.

Frequently asked questions

wtf is fable-ui?

A copy-and-own set of React components that let an AI assistant show real app UI, like metric cards or forms, instead of only replying in chat text.

What language is fable-ui written in?

Mainly TypeScript. The stack also includes TypeScript, Next.js, shadcn/ui.

What license does fable-ui use?

The README does not state license terms.

How hard is fable-ui to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is fable-ui for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.