# AI use cases for Boardui (BoardUI/boardui) Repo: [BoardUI/boardui](https://github.com/BoardUI/boardui) | Use cases: 5 | Page: https://dedupedai.com/use-cases/boardui-boardui/ BoardUI is a React design system for agentic interfaces, shipped as source files you copy into your project, with a working AI chat app on your own model key as its homepage. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Deploy a working AI chat app with your own model key: https://dedupedai.com/use-cases/boardui-boardui/deploy-ai-chat-on-own-key/ - Run the BoardUI chat app on your machine: https://dedupedai.com/use-cases/boardui-boardui/run-boardui-chat-locally/ - Copy BoardUI components into an existing Next.js app: https://dedupedai.com/use-cases/boardui-boardui/add-boardui-components-to-nextjs-app/ - Let a coding agent build screens from BoardUI through MCP: https://dedupedai.com/use-cases/boardui-boardui/have-coding-agent-build-with-boardui/ - Switch the BoardUI app to Arabic or Hebrew layout: https://dedupedai.com/use-cases/boardui-boardui/switch-app-to-arabic-or-hebrew/ ## How to deploy a working AI chat app with your own model key with Boardui Repo: [BoardUI/boardui](https://github.com/BoardUI/boardui) | Difficulty: Beginner | Time: 15 minutes | Basis: From the README Click one deploy button, paste one API key, and get a live AI chat site from this repo. **Who it is for:** A non-developer or founder who wants a hosted AI chat page for testing or a demo, without writing code. **The problem:** Building a chat front end with streaming replies, a composer, and a safe place for the API key takes time before anyone can try the model. **The outcome:** A deployed chat site at your own URL that answers with the model behind the key you supplied. ### Steps 1. Open the repo and click the Vercel deploy button in the README. 2. When Vercel asks for the environment variable AI_API_KEY, paste your model provider key. 3. Wait for the first deploy to finish, then open the URL Vercel gives you. 4. Send a message in the chat at the homepage to confirm the model replies. 5. In your provider dashboard, set a spending limit on the key if the provider offers one. ### Prompt to paste into your agent ```text Using the repo BoardUI/boardui, guide me through its Vercel deploy button and the AI_API_KEY variable, using as my provider. Expected output: a live URL where the homepage chat returns a reply. Verify that the key is set only as a server-side environment variable and that a spending limit was created where the provider offers one. ``` ### Caveat The README says the key never reaches the browser but the cost is bounded only by the spending cap you set on the key, so set one before sharing the URL. Risk, credentials: The chat is open to anyone with the URL, so anyone can spend against your key until a provider-side spending cap is set. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/boardui-boardui/deploy-ai-chat-on-own-key/ ## How to run the BoardUI chat app on your machine with Boardui Repo: [BoardUI/boardui](https://github.com/BoardUI/boardui) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Install dependencies, add your key to a local env file, and start the chat on localhost. **Who it is for:** A frontend developer who wants to read and edit the chat app source before deploying it. **The problem:** You need to see how the streaming chat route and components fit together before changing them. **The outcome:** A local chat at the dev server address that streams replies from your model key. ### Steps 1. Run `npm install` in the cloned repository. 2. Run `cp .env.example .env.local`, then put your key in AI_API_KEY inside `.env.local`. 3. Run `npm run dev` and open the local address it prints. 4. Edit `app/api/chat/route.ts` to see the server-side key handling and streaming reply path. ### Prompt to paste into your agent ```text In the repo BoardUI/boardui, install dependencies and start the dev server, then report the local URL. Expected output: a running chat page that returns a model reply to a test message. Verify that the key is in .env.local and not in any client-side file. ``` ### Caveat The README gives the local steps only for the default provider setup, so other providers need the variables described in .env.example. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/boardui-boardui/run-boardui-chat-locally/ ## How to copy BoardUI components into an existing Next.js app with Boardui Repo: [BoardUI/boardui](https://github.com/BoardUI/boardui) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Use the CLI to list, add, and install single components as editable source files. **Who it is for:** A developer with an existing Next.js project who needs a data table or stat cards without adopting a whole design system. **The problem:** Hand-building tables, cards, and sidebars in one visual language takes longer than wiring up reviewed source components. **The outcome:** Chosen BoardUI components copied into your project's component folders, ready to edit. ### Steps 1. Run `npx boardui@latest list` to see every component, one per line. 2. Run `npx boardui@latest add data-table` to install one component and the pieces it depends on. 3. Run `npx boardui@latest add stat-cards` to add a KPI row alongside it. 4. Import the installed components into a page in your project and run your dev server to check the result. ### Prompt to paste into your agent ```text In my Next.js project at , use the BoardUI CLI from the repo BoardUI/boardui to add the data-table and stat-cards components. Expected output: the component source files copied into the project and a page that renders both. Verify that the project builds without errors after the install. ``` ### Caveat The README says components install into any Next.js project, but the dependencies and wiring for each one still need checking after the copy. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/boardui-boardui/add-boardui-components-to-nextjs-app/ ## How to let a coding agent build screens from BoardUI through MCP with Boardui Repo: [BoardUI/boardui](https://github.com/BoardUI/boardui) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Connect the BoardUI MCP server so your agent can browse the catalog and install components. **Who it is for:** A developer who works in Claude Code or Cursor and wants the agent to build dashboard or agent UI with the design system. **The problem:** Coding agents often invent their own styles, so the output does not match a real design system. **The outcome:** An agent that installs the components you name and keeps the code on BoardUI tokens and type scale. ### Steps 1. Run `claude mcp add boardui -- npx -y boardui@latest mcp` for Claude Code, or add the same server to your Cursor MCP config. 2. Ask the agent in plain words to install the components you need, such as a data table and stat cards. 3. Check that the agent followed the rules in `AGENTS.md`. 4. Run your app and review the installed components in the browser. ### Prompt to paste into your agent ```text Using the BoardUI MCP server from the repo BoardUI/boardui, add the components to my project at . Expected output: installed component source and a page that uses them with BoardUI tokens. Verify that the AGENTS.md rules were followed and the app builds. ``` ### Caveat The README gives the MCP command for Claude Code and a config for Cursor, and points to Boardui.com/mcp for other clients like VS Code and Codex. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/boardui-boardui/have-coding-agent-build-with-boardui/ ## How to switch the BoardUI app to Arabic or Hebrew layout with Boardui Repo: [BoardUI/boardui](https://github.com/BoardUI/boardui) | Difficulty: Advanced | Time: 60 minutes | Basis: From the README Configure DirectionProvider and the document locale for a right-to-left interface. **Who it is for:** A developer building a product for Arabic or Hebrew speaking users who needs mirrored layouts and keyboard navigation. **The problem:** Setting CSS direction alone does not configure React Aria keyboard navigation, calendars, or portalled menus. **The outcome:** An app whose layout, navigation, and overlays follow right-to-left direction, with the provider set in the root layout. ### Steps 1. Run `npx boardui@latest add direction` in your existing project. 2. Wrap the children in `app/layout.tsx` with `DirectionProvider` and set the document language, such as `he` for Hebrew. 3. Replace physical left and right spacing with logical styles such as `ps`/`pe` and `start`/`end`. 4. Translate labels and accessible names in your own translation layer and check the layout in the browser. ### Prompt to paste into your agent ```text In the repo BoardUI/boardui, follow the RTL setup in the README for my project at with locale . Expected output: the root layout wrapped in DirectionProvider and the document set to the right language. Verify that keyboard navigation and the date picker still work in the target locale. ``` ### Caveat The README says direction and translation are configured separately, so right-to-left layout alone will still show English text until you translate it. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/boardui-boardui/switch-app-to-arabic-or-hebrew/