BoardUI

BoardUI is a React design system for agentic interfaces: the parts an AI product needs and the parts every dashboard needs, in one visual language, as source files in your project. This repository is the whole free tier, and its homepage is a working AI chat on your own model key.

Click the button, paste one API key when Vercel asks for it, and the first deploy already answers.

This repository is generated from BoardUI's source and takes no pull requests. See CONTRIBUTING.md.

Why BoardUI?

• Built for agent products. Chat, thinking indicator, agent log, composer and sidebar, next to the tables, cards and forms around them.
• Source, not a dependency. npx boardui add copies the files into your project. Change anything.
• One visual language. Figma first, 400+ semantic tokens, light and dark from the same classes.
• Accessible by default. React Aria Components underneath, Tailwind CSS v4 on top, no runtime CSS.
• Agent-native. MCP server, agent skill, AGENTS.md rules and llms.txt, so coding agents build with the system.

What's in this repository

• All 62 free items as source: base components, application blocks, tokens and type scale. The catalogue is below.
• The app: a chat at /, a dashboard with the two free charts, and sign-in and sign-up screens, all built from the components in this repository. Chat history stays in the visitor's browser. No database.
• app/api/chat/route.ts, which reads your key server-side and streams replies. The key never reaches the browser.

Bring your own key

One variable. The provider is read from the key itself:

Create the key with a spending limit where the provider offers one: OpenRouter can cap the credits a key may spend, OpenAI has usage limits per project. The key never reaches the browser, but the chat itself is open to anyone who has your URL, so the cap is what bounds the cost.

Set CHAT_MODEL to use a different model. For Mistral or DeepSeek, whose keys have no recognisable shape, add AI_PROVIDER=mistral or AI_PROVIDER=deepseek. For any OpenAI-compatible server (Ollama, LM Studio, vLLM, LiteLLM, Together) set AI_BASE_URL and CHAT_MODEL. Every provider's usual variable (OPENAI_API_KEY, ANTHROPIC_API_KEY, ...) works too. See .env.example.

Run it locally

npm install
cp .env.example .env.local   # then put your key in AI_API_KEY
npm run dev

Install into an existing project

Every component in this repository also installs on its own, as source, into any Next.js project.

With an agent

BoardUI has an MCP server, so Claude Code, Cursor and any MCP client can browse the catalog and install for you. Add it once:

claude mcp add boardui -- npx -y boardui@latest mcp

Cursor and most other clients take the same server in their MCP config:

{
  "mcpServers": {
    "boardui": { "command": "npx", "args": ["-y", "boardui@latest", "mcp"] }
  }
}

Then ask in plain words. "Install every free BoardUI component" installs the whole free catalog in one go. "Add a data table and stat cards to the dashboard" installs just those and wires them in. The rules in AGENTS.md keep whatever it builds on BoardUI's tokens and type scale. Setup for VS Code, Codex and the rest is at boardui.com/mcp.

With the CLI

npx boardui@latest list              # every component, one line each
npx boardui@latest add data-table    # one component and what it depends on
npx boardui@latest add --all         # everything in this repository

Components

Application blocks

Composed screens and panels: sidebars, chat, tables, settings, cards.

Base components

The everyday building blocks.

Foundations

Tokens, type scale, global styles, utilities, and the agent rules.

BoardUI Pro

Everything in this repository is free and complete. Pro adds the full-page templates and the richer components, 8 templates and 23 components, installed into the same project as source: npx boardui@latest login <key> once, then add as usual. One-off payment, no subscription. See www.boardui.com/#pricing.

The 8 templates

Name	What it is
AI Chat Template	Full AI chat app: sidebar, resizable code panel, composer with model/effort controls.
AI Image Generation Template	Prompt thread with a live generation frame and feedback actions, plus a gallery panel of past generations.
AI Profile Template	AI contributions profile: cover card with activity heatmap, 30-day agents bar chart, and tokens trend chart.
Finance Dashboard Template	Balance KPIs, a cash-flow sankey, spending rings, portfolio bubbles, a daily spending heatmap, and a transactions data table.
Home Dashboard Template	KPI stat cards, revenue trend, earnings chart, contributions heatmap, and a customers table in a responsive app shell.
HR Management Template	Headcount KPIs, recent hires, hiring pipeline, engagement radar, hires vs. attrition, team breakdowns, and an employees data table.
Marketing Dashboard Template	Campaign KPIs, acquisition funnel, spend by channel, traffic sources, ad spend vs. ROAS, visitors by channel, and a campaigns data table.
Medical Report Template	Patient overview with steps, sleep score, activity rings, and most-active-days charts.

The 23 components

Name	What it is
Activity Rings Card	Apple Watch-style concentric goal rings with stat tiles.
Agent Limits Card	Context window usage bar with an expandable token breakdown, collapsible groups, and plan usage limits with reset times.
Agent Progress	Collapsible multi-step AI task progress with animated active, pending, and completed states.
Area Chart Card	Multi-series area chart with stacked, overlapping and 100% variants, gradient fills, period dropdown and stat tiles.
Bar List Card	Analytics breakdown list: ranked rows with share bars behind the labels, tabbed lists, metric caption, and a show-more pill.
Calendar	Month-view calendar with event chips, details popover, month switcher, and inbox feed.
Combo Chart Card	Bar-plus-line combo chart with independent left and right axes, hover dimming, and a pulsing active dot.
Composer	The AI chat composer, whole package: attachment and model menus, voice and send controls, the status bar, and the liquid-glass loading treatment for its controls.
Contributions Card	GitHub-style contributions heat grid with swappable accent family.
Earnings Chart Card	Bar chart card with period switcher, count-up headline, and hover outline.
Funnel Chart Card	Horizontal flow funnel with curved or sharp tapers, centred conversion pills, mono option, and a value/name footer under every column.
Heatmap Chart Card	Matrix heatmap card (rows × columns) with a theme-following ramp, hover-linked headline, and Less → More legend.
Line Chart Card	Line/area chart card with gradient fill, curved or sharp interpolation, and animated active dot.
Most Active Days Card	Continuous vertical month calendar with per-day mini activity rings.
Radar Chart Card	Radar chart card with filled, dotted, lines-only, and centre-score variants, hover-linked headline, and multi-series legend.
Radial Chart Card	Radial bar chart card: concentric rings (plain, labelled, or over a grid), single-value gauges, and a stacked half gauge.
Sankey Chart Card	Sankey flow card with pill nodes, target-tinted links, source and share labels, and hover isolation.
Scatter Chart Card	Scatter and bubble chart with grouped series, an optional size measure, hover isolation and stat tiles.
Sleep Score Card	Segmented score ring with hover-focused sub-scores and metric rows.
Stage Bars Card	Funnel stages as rounded horizontal pills with name, value, and share per stage, animated widths, and a mono option.
Steps Card	Weekly steps bar chart with week switcher, count-up headline, and hover outline.
Task List	Streaming agent task log: tasks reveal step by step with soft height, blur, and a shimmering running title.
Web Search	Streaming research trail: the queries an agent ran and the sources it opened, with real site marks.

Before going public

Requests bill to whoever owns the key, and anyone who has your URL can send them. Three ways to bound that, simplest first: create the key with a spending limit, turn on Vercel's deployment protection for a personal deployment, and put a rate limit in front of /api/chat before pointing the internet at it.

License

MIT. Use it, change it, ship it, share it. BoardUI Pro components and templates are sold separately under the BoardUI License.