BoardUI: A React Design System for Agentic Interfaces, Shipped as Source

What BoardUI actually is, and the gap it fills

Most React component libraries are aimed at dashboards. BoardUI is aimed at the other half of an AI product: the chat surface, the thinking indicator, the streaming agent log, the composer with a stop control, and the sidebar that holds the thread history. The README frames this as "the parts an AI product needs and the parts every dashboard needs, in one visual language." That is the pitch, and it is a narrow one. If you are building a coding assistant, a research agent, or an internal tool where a model streams tokens into a UI, you usually end up assembling that UI from a generic kit plus a lot of one-off components. BoardUI ships those pieces already composed.

The audience is correspondingly specific. This is for a Next.js developer who has already chosen Tailwind CSS v4 and React Aria Components, and who wants the source in the repository rather than a black-box dependency. The repository holds 62 free items as source, which the README lists as base components, application blocks, tokens and a type scale. There is no paid tier described in the README, so treat the free catalogue as the whole scope you are evaluating.

Source files instead of a dependency, and what that costs you

The central design decision is that components are copied, not imported. The README states: "Source, not a dependency. npx boardui add copies the files into your project. Change anything." That is a real difference from a conventional library. You get the file, you own the file, and you can rewrite its internals without forking anything.

The trade-off is equally real. Copied source does not receive fixes when the upstream project changes. There is no package version to bump, no changelog to diff. The README notes that the repository "is generated from BoardUI's source and takes no pull requests," which tells you the project is not soliciting outside patches either. If you copy 62 components and later want an upstream improvement, you are diffing by hand.

The visual layer is built on roughly 400 semantic tokens, described as Figma-first, with light and dark themes driven from the same classes. Accessibility comes from React Aria Components underneath. No runtime CSS is shipped, which follows from the Tailwind approach. For a team that already treats design tokens as the contract between design and code, the token count is the part worth inspecting first, because it determines how much of your own styling you can express without reaching for arbitrary values.

Installing BoardUI with the CLI and rendering a first component

The README gives two install paths. Running the whole chat app locally takes three commands: install dependencies, copy the environment template and put a key in it, then start the dev server. The environment file is `.env.local` and the variable is `AI_API_KEY`.

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

After that, the app serves a chat at `/`, a dashboard with the two free charts, and sign-in and sign-up screens. Chat history is kept in the visitor's browser, and the README states there is no database. The API route at `app/api/chat/route.ts` reads the key server-side and streams replies, so the key does not reach the browser. If no provider key is set, the chat starter shows a setup notice instead of failing silently.

To pull individual components into an existing Next.js project, the CLI has three subcommands. `list` prints every component on one line, `add` copies one component together with its dependencies, and `add --all` copies everything in the repository.

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

The README's example for a composed screen is `npx boardui@latest add agent-chat`, which installs a working chat app with an app sidebar, streaming replies, a thinking indicator, a composer pill with a stop control, a chat-history rail for local thread switching, and the setup notice. Expect copied `.tsx` files under `components/`, not a new entry in `package.json`.

Bringing your own model key, and the provider detection rule

There is one required variable. The provider is inferred from the shape of the key, which the README documents as a table: `sk-ant-...` maps to Anthropic with `claude-haiku-4-5`, `sk-or-...` to OpenRouter with `openai/gpt-5-nano`, `sk-...` to OpenAI with `gpt-5.4-mini`, `AIza...` to Google Gemini with `gemini-2.5-flash`, `vck_...` to Vercel AI Gateway, `gsk_...` to Groq with `llama-3.3-70b-versatile`, and `xai-...` to xAI with `grok-4-fast-non-reasoning`. Override the model with `CHAT_MODEL`.

Two escape hatches matter. Providers whose keys have no recognisable shape, which the README names as Mistral and DeepSeek, need `AI_PROVIDER` set explicitly. Any OpenAI-compatible server, including Ollama, LM Studio, vLLM, LiteLLM and Together, needs `AI_BASE_URL` plus `CHAT_MODEL`, because an arbitrary server has no default model. The `.env.example` file shows the local Ollama case:

# Optional. Any OpenAI-compatible server (Ollama, LM Studio, vLLM, LiteLLM).
# Needs CHAT_MODEL, since an arbitrary server has no default.
AI_BASE_URL=http://localhost:11434/v1

Every provider's conventional variable, such as `OPENAI_API_KEY` or `ANTHROPIC_API_KEY`, also works according to the README. The security model is worth stating plainly: the key stays server-side, but the chat itself is open to anyone who has your URL. The README's own guidance is to create the key with a spending limit where the provider offers one, since "the cap is what bounds the cost." That is an honest framing of a deployment that has no authentication in front of the chat endpoint.

The MCP server and the agent-facing files

BoardUI treats coding agents as a first-class installation path. It ships an MCP server, an agent skill, `AGENTS.md` rules and an `llms.txt` file. The README's example for Claude Code adds the server with a single command:

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

Other MCP clients take the same server through their configuration file. The README gives the JSON shape for Cursor:

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

Once connected, the workflow is conversational. The README's examples are "Install every free BoardUI component" for the whole catalogue, and "Add a data table and stat cards to the dashboard" for a targeted install that also wires the components in. The `AGENTS.md` rules are what keep generated code on BoardUI's tokens and type scale rather than inventing new spacing values.

This is the most interesting part of the project and also the least verifiable from the README alone. The claim is that an agent can browse the catalogue and install correctly; the README does not describe what happens when an agent picks a component that conflicts with your existing files, and it does not document rollback. Test the MCP path on a scratch branch before letting it touch a working application.

Where BoardUI is the wrong tool

The framework constraint is absolute. This is a Next.js and React project with Tailwind CSS v4 and React Aria Components. The README describes installing components "into any Next.js project," and nothing in the README suggests a Vue, Svelte, or plain-CSS path. If your application is not React, the catalogue is at most a visual reference.

The second limitation is maintenance visibility. There are no releases retrieved for this repository, and the README says it is generated from BoardUI's source and takes no pull requests. That combination means you should not expect a conventional open source contribution loop. The last push to the default branch was on 2026-09-05, so the repository is current, but a generated repository with no releases is a distribution channel more than a community project. If your procurement process requires a support contract or a public issue tracker with SLAs, this is not that.

The third is the chat starter's own scope. History lives in the visitor's browser and there is no database. That is fine for a demo or an internal tool, and wrong for anything needing shared threads, server-side retention, or per-user accounts. The sign-in and sign-up screens are UI cards; the README does not describe an auth backend behind them.

Finally, the related searches for this project turn up queries about a ZCU208 board and a `.exe` file. Those are different subjects that share the name. BoardUI is a TypeScript and React project, and there is no executable binary in the repository layout.

How BoardUI compares with shadcn/ui

The obvious comparison is shadcn/ui, because both copy component source into your project rather than installing a versioned package. The difference is in what gets copied and what sits underneath. shadcn/ui is a broad general-purpose set of primitives built on Radix and Tailwind, and it has no opinion about AI interfaces. BoardUI's catalogue is organized around agent products: agent chat, agent log, agent thinking, composer loader, auth card, app shell, and a TanStack-powered data table with sorting, selection and pagination.

That means the overlap is real but partial. If you need a dialog, a dropdown, or a date picker, shadcn/ui's catalogue is deeper and its community is larger. If you need a streaming agent log with a reveal ticker and a self-drawing tree guide, or a composer loader with an orbiting light band, BoardUI ships those as named components and shadcn/ui does not. The accessibility layer differs too: BoardUI uses React Aria Components, while shadcn/ui's primitives come from Radix. If your team has already standardized on one of those, that choice probably decides the question before the component list does.

Licence and what to check before you commit

BoardUI is MIT licensed, and the repository carries a `LICENSE` file at the root. MIT is permissive: you can use, modify and redistribute the code, including in commercial products, provided the copyright notice and permission notice are retained. Because the components are copied into your repository rather than installed as a dependency, the licence text travels with the files you copy, so keeping the notice in place is a matter of not deleting it. This is not legal advice; if your organization has a policy on attribution for vendored code, route the `LICENSE` file through it.

A few things are worth verifying yourself before adopting. Run `npx boardui@latest list` and read the full catalogue, since the README excerpt here is truncated partway through the component tables. Check that the copied files compile against your Tailwind v4 configuration, because the token layer is the part most likely to collide with an existing theme. And confirm the key you put in `AI_API_KEY` has a spending cap, since the chat endpoint has no authentication in front of it.

Editorial conclusion

Adopt BoardUI if you are building an AI product in Next.js with Tailwind CSS v4 and React Aria Components, and you want chat, thinking indicators, agent logs and dashboard tables that share one token set you can edit. Skip it if you need a versioned component package with a changelog, a maintained support channel, or a framework other than React. Before committing, run npx boardui@latest list, check that the emitted files compile under your Tailwind v4 setup, and confirm your provider key has a spending limit, because the chat endpoint is public to anyone who has the URL.

Frequently asked questions

Official sources

1. BoardUI/boardui on GitHub
2. Issues
3. License: MIT
4. Project website
5. README