RELATED 01
Chakra UI MCP Server
OFFICIAL SERVERGives an assistant Chakra UI component props, examples, theme tokens and v2-to-v3 migration help
41kGitHub stars
3.0k/wknpm downloads
72popularity score
Ark UI MCP Server
Ark UI component lists, props, code examples, styling hooks and docs for React, Vue, Svelte and Solid
Official · Chakra TypeScript Local · stdio Developer tools
61 popularity score ★ 5.5k ↓ 613/wk
Connect your client
Local (npm)
Add in one click
Opens the app, which asks before it adds the server.
Or add it by command or config
Claude CodeTerminal
claude mcp add ark-ui -- npx -y @ark-ui/mcpClaude Desktopclaude_desktop_config.json
{
"mcpServers": {
"ark-ui": {
"command": "npx",
"args": [
"-y",
"@ark-ui/mcp"
]
}
}
}Cursor~/.cursor/mcp.json
{
"mcpServers": {
"ark-ui": {
"command": "npx",
"args": [
"-y",
"@ark-ui/mcp"
]
}
}
}VS Code.vscode/mcp.json
{
"servers": {
"ark-ui": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@ark-ui/mcp"
]
}
}
}Codex~/.codex/config.toml
[mcp_servers.ark-ui]
command = "npx"
args = ["-y", "@ark-ui/mcp"]Gemini CLITerminal
gemini mcp add --scope user ark-ui npx -- -y @ark-ui/mcpWhat it does
The Ark UI MCP Server is the Chakra UI team's own server for Ark UI, their headless component library. It gives a coding assistant direct answers about the library while it writes UI code: which components exist for a chosen framework (React, Vue, Svelte or Solid), what props a component takes, which examples exist for it and the full source of one, and which CSS variables and data attributes a component exposes for styling.
It also searches the Ark UI documentation by keyword and returns a whole docs page as markdown when given its slug, such as components/dialog or guides/composition.
The package bundles no copy of the docs. Its source (packages/mcp/src/lib/fetch.ts) sends every tool call as a plain GET request to https://ark-ui.com/api and passes the JSON back, so answers follow the live site rather than the package version installed, and nothing works offline. The requests carry no key or account.
What it needs
| Runtime | Node.js |
|---|
Node.js with npx to run the published package @ark-ui/mcp over stdio. Outbound HTTPS access to ark-ui.com, which serves all the data. No account, API key or settings are needed.
Limits
Read-only: it looks up Ark UI material and cannot edit project files or install components. It covers Ark UI only, and frameworks only React, Vue, Svelte and Solid (the framework argument is a fixed list in the code). Every answer comes from the ark-ui.com API at call time, so it fails when that site is unreachable and its content may not match an older installed Ark UI version. The repository also holds an HTTP/SSE entry point (src/http.ts), but the npm package's only program is the stdio one.
Who it suits
Developers building interfaces with Ark UI who want their assistant to pull real props, examples and styling hooks instead of guessing. It needs nothing but Node and network access, and it only reads public documentation, so it is a low-commitment add. Teams not using Ark UI gain nothing from it, and anyone who needs offline answers or docs pinned to an older Ark UI release should read the docs shipped with their own version instead.
Tools 7
list_components- Lists the Ark UI component names available for one framework.
list_examples- Lists the example ids available for a component.
get_example- Returns the full code of one component example with its dependencies.
get_component_props- Returns the props a component accepts in a chosen framework.
styling_guide- Returns a component's CSS variables and data attributes for styling.
search_docs- Finds documentation pages matching a keyword, with slug, title and category.
get_docs- Returns one documentation page as markdown, looked up by slug.