Chakra UI MCP
Chakra UI MCP server: a reference for components, props and theme tokens, plus code review for moving from version 2 to 3
- 40,712 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The server starts through `npx` and downloads the package from npm on first launch
- The Pro key lives in the client config and unlocks paid Chakra UI templates
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/chakra-ui-mcpDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The server starts through `npx` and downloads the package from npm on first launch
- The Pro key lives in the client config and unlocks paid Chakra UI templates
This is third-party code. Review the repository files before installing.
What it does
Chakra UI MCP is a server from the Chakra UI team that lets an agent read the library reference: the component list, each component's props, code examples and theme tokens. The data comes from the `get_components`, `get_component_props`, `get_component_example` and `get_theme` tools, so the agent builds the interface against the current API instead of guessing. The `v2_to_v3_code_review` tool reviews version 2 code and shows before and after snippets for the move to version 3. `list_blocks` and `get_component_templates` return Chakra UI Pro blocks and templates and need a key in `CHAKRA_PRO_API_KEY`. The server starts over stdio with `npx -y @chakra-ui/react-mcp`. The repository includes ready configs for Cursor and Claude Desktop and a command for Codex.
Who it is for. Interface developers on React who build with Chakra UI in Cursor, Codex or Claude Desktop and are moving a project to version 3.
Good fit when
- The agent writes a Chakra UI form and mixes up component props, and the server returns the current props
- A project is moving from Chakra UI 2 to 3, and a code review with before and after snippets speeds up the edits
- The app theme is built on tokens, and the agent benefits from semantic tokens, text styles and layer styles
- The team has Chakra UI Pro access and the agent picks ready blocks and templates from the Pro catalog
Not a fit when
- The interface uses a different library: the server knows only Chakra UI
- There is no Pro key but paid blocks are wanted: Pro templates are unavailable without it
- The agent has to edit the theme and project files itself: the tools return reference data and write nothing to the project
Example request
Use Chakra UI MCP to look up the Dialog props and build a sign-in form on Chakra UI 3 with field validationMCP
- Transport
- stdio
- Authentication
- not required
Environment variables
CHAKRA_PRO_API_KEYsecret- Chakra UI Pro key for Pro blocks and templates
Limitations
Chakra UI Pro blocks and templates work only with a key in the `CHAKRA_PRO_API_KEY` variable; the other tools run without it. The migration tool covers the move from version 2 to version 3 and no other upgrade paths. Codex needs Codex CLI 0.34.0 or newer. The repository has no ready command for Claude Code, so connect the server by following the Claude Desktop config. The server starts through `npx` and downloads the package from npm on first launch, so the machine needs Node.js.
How to disable. Remove the `chakra-ui` block from `mcpServers` in the client config. For Codex run `codex mcp remove chakra-ui` or delete the `[mcp_servers.chakra-ui]` section from `~/.codex/config.toml`.
FAQ
How do I connect Chakra UI MCP to Cursor?
Add a `chakra-ui` server to the Cursor config with the command `npx` and the arguments `-y @chakra-ui/react-mcp`. The repository also has a one-click install button for Cursor. After the editor restarts, the agent sees the server tools.
Do I need a key to use the server?
No, the reference tools work without one. The `CHAKRA_PRO_API_KEY` variable is only required for Chakra UI Pro blocks and templates.
How do I connect the server to Codex?
Run `codex mcp add chakra-ui -- npx -y @chakra-ui/react-mcp` or add a `[mcp_servers.chakra-ui]` section to `~/.codex/config.toml`. You need Codex CLI 0.34.0 or newer.
What does the v2_to_v3_code_review tool do?
It reviews Chakra UI 2 code and returns guidance for the move to version 3, with before and after snippets. Run it on the files the agent is about to edit.
What theme data does the server return?
The `get_theme` tool returns theme tokens, semantic tokens, text styles and layer styles. The agent uses them to pick colors and sizes from the project theme.
Discussion
No questions or reviews yet.
Related
MCP serversShadcn UI MCP Server
Shadcn UI v4 MCP Server
An MCP server that gives the agent shadcn/ui component source, demos and blocks for React, Svelte, Vue and React Native
MCP server of a React component library for agent interfaces: the agent finds a component and adds it to your project
The CodeRocket MCP server gives an agent a saved library's design rules, components and blocks over a read-only connection.
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
Vibe MCP gives an agent components, icons and tokens of the monday.com Vibe design system
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Chakra UI MCP (this card) | yes | not required | 40,712 | |
| Shadcn UI MCP Server | no | key is optional | 3,089 | reference for shadcn/ui components, not Chakra UI |
| shadcn/ui | no | 127,489 | a skill about shadcn/ui, with no server and no Chakra tokens |
README in short
The server description opens with its capabilities: components and examples, the move from version 2 to 3, design tokens and paid templates. It then lists seven tools, setup for Claude Desktop, Cursor and Codex, the single environment variable and pnpm development commands.