{"slug": "boardui", "title": "BoardUI", "summary": "BoardUI, a React design system for agentic interfaces, released its entire free tier as source files, including 62 components, a working AI chat demo, and an MCP server for coding agents, with support for multiple AI providers such as Anthropic, OpenAI, and Google Gemini. The system is built on Tailwind CSS v4 and React Aria Components, and can be installed via npx into any Next.js project.", "body_md": "You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert\n\nBoardUI 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.\n\nClick the button, paste one API key when Vercel asks for it, and the first deploy already answers.\n\nThis repository is generated from BoardUI's source and takes no pull requests. See CONTRIBUTING.md.\n\nWhy BoardUI?\n\nBuilt for agent products. Chat, thinking indicator, agent log, composer and sidebar, next to the tables, cards and forms around them.\n\nSource, not a dependency.npx boardui add copies the files into your project. Change anything.\n\nOne visual language. Figma first, 400+ semantic tokens, light and dark from the same classes.\n\nAccessible by default. React Aria Components underneath, Tailwind CSS v4 on top, no runtime CSS.\n\nAgent-native. MCP server, agent skill, AGENTS.md rules and llms.txt, so coding agents build with the system.\n\nWhat's in this repository\n\nAll 62 free items as source: base components, application blocks, tokens and type scale. The catalogue is below.\n\nThe 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.\n\napp/api/chat/route.ts, which reads your key server-side and streams replies. The key never reaches the browser.\n\nBring your own key\n\nOne variable. The provider is read from the key itself:\n\nKey looks like\n\nProvider\n\nDefault model\n\nsk-ant-...\n\nAnthropic\n\nclaude-haiku-4-5\n\nsk-or-...\n\nOpenRouter\n\nopenai/gpt-5-nano\n\nsk-...\n\nOpenAI\n\ngpt-5.4-mini\n\nAIza...\n\nGoogle Gemini\n\ngemini-2.5-flash\n\nvck_...\n\nVercel AI Gateway\n\nopenai/gpt-5-nano\n\ngsk_...\n\nGroq\n\nllama-3.3-70b-versatile\n\nxai-...\n\nxAI\n\ngrok-4-fast-non-reasoning\n\nCreate 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.\n\nSet 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.\n\nRun it locally\n\n```\nnpm install\ncp .env.example .env.local   # then put your key in AI_API_KEY\nnpm run dev\n```\n\nInstall into an existing project\n\nEvery component in this repository also installs on its own, as source, into any Next.js project.\n\nWith an agent\n\nBoardUI has an MCP server, so Claude Code, Cursor and any MCP client can browse the catalog and install for you. Add it once:\n\n```\nclaude mcp add boardui -- npx -y boardui@latest mcp\n```\n\nCursor and most other clients take the same server in their MCP config:\n\n```\n{\n  \"mcpServers\": {\n    \"boardui\": { \"command\": \"npx\", \"args\": [\"-y\", \"boardui@latest\", \"mcp\"] }\n  }\n}\n```\n\nThen 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.\n\nWith the CLI\n\n```\nnpx boardui@latest list              # every component, one line each\nnpx boardui@latest add data-table    # one component and what it depends on\nnpx boardui@latest add --all         # everything in this repository\n```\n\nComponents\n\nApplication blocks\n\nComposed screens and panels: sidebars, chat, tables, settings, cards.\n\nA working chat app: app sidebar, streaming replies, thinking indicator, a composer pill with stop control, a chat-history rail with local thread switching, and a setup notice when no provider key is set.\n\nShared streaming-log machinery: the reveal ticker, the blur-in with its soft clipping edge, and the curved tree guide that draws itself. Behind Task List and Web Search.\n\nPage frame for the chat starter: the sidebar, a phone drawer, and a titled content card, carrying the starter's own navigation so the sidebar only links to pages the app has.\n\nStreaming chat endpoint for agent templates: one AI_API_KEY from OpenAI, Anthropic, Google, OpenRouter, Groq, xAI or Vercel AI Gateway (or any OpenAI-compatible server by URL), a config probe for unconfigured deploys, and the message contract the BoardUI chat UI installs against.\n\nEverything 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.\n\nThe 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.\n\nStreaming research trail: the queries an agent ran and the sources it opened, with real site marks.\n\nBefore going public\n\nRequests 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.\n\nLicense\n\nMIT. Use it, change it, ship it, share it. BoardUI Pro components and templates are sold separately under the BoardUI License.\n\nAbout\n\nReact design system for agentic interfaces. Every free BoardUI component as source, with a working AI chat app on your own model key as the homepage.", "url": "https://wpnews.pro/news/boardui", "canonical_source": "https://github.com/BoardUI/boardui", "published_at": "2026-09-04 01:18:08+00:00", "updated_at": "2026-09-04 01:52:33.939628+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "ai-agents", "artificial-intelligence"], "entities": ["BoardUI", "React", "Tailwind CSS", "React Aria Components", "Next.js", "Anthropic", "OpenAI", "Google Gemini"], "alternates": {"html": "https://wpnews.pro/news/boardui", "markdown": "https://wpnews.pro/news/boardui.md", "text": "https://wpnews.pro/news/boardui.txt", "jsonld": "https://wpnews.pro/news/boardui.jsonld"}}