React MCP

Name: React MCP
Author: chakra-ui

Verified · npm:@chakra-ui

MCP server by chakra-ui · updated 3 days ago · ★ 41k · 1.4k downloads a week

Score 91

The official MCP server for Chakra UI React MCP is published by npm:@chakra-ui from its verified domain in the official MCP Registry.

Install Add to Cursor Add to VS Code GitHub Website

Works withClaude Code Claude Desktop Cursor Codex Gemini CLI VS Code Windsurf Antigravity CLI

Maintenance

Last commit 3 days ago

Licence

MIT: permissive, fine for commercial use

Quality

Published package or server URL, 40,698 stars, original repository

Security

Not checked yet. What we check

Install React MCP

Built from the published package, never by AI

claude mcp add react-mcp -- npx -y @chakra-ui/react-mcp

Run in your terminal. Add --scope user to use it in every project.

Step-by-step: install React MCP in Claude Code

{
  "mcpServers": {
    "react-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@chakra-ui/react-mcp"
      ]
    }
  }
}

Settings, Developer, Edit config. Paste into claude_desktop_config.json and restart.

Step-by-step: install React MCP in Claude Desktop

{
  "mcpServers": {
    "react-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@chakra-ui/react-mcp"
      ]
    }
  }
}

Add to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project).

Step-by-step: install React MCP in Cursor

{
  "servers": {
    "react-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@chakra-ui/react-mcp"
      ]
    }
  }
}

Add to .vscode/mcp.json. VS Code uses "servers", not "mcpServers".

Step-by-step: install React MCP in VS Code

codex mcp add react-mcp -- npx -y @chakra-ui/react-mcp

Step-by-step: install React MCP in Codex

{
  "mcpServers": {
    "react-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@chakra-ui/react-mcp"
      ]
    }
  }
}

Add to ~/.gemini/config/mcp_config.json (all projects) or .agents/mcp_config.json (this project).

Step-by-step: install React MCP in Antigravity CLI

gemini mcp add react-mcp npx -y @chakra-ui/react-mcp

Gemini CLI was replaced by Antigravity CLI in June 2026 and remains only for enterprise licences and paid API keys.

Step-by-step: install React MCP in Gemini CLI

MCP servers run with your permissions and can read what you give them access to. Some need an API key: check the README and add it under env in the react-mcp block.

React MCP: common questions

How do I install React MCP?

In Claude Code run claude mcp add react-mcp -- npx -y @chakra-ui/react-mcp. For Claude Desktop, Cursor and VS Code, paste the config shown above and restart. See the install guides.

Is React MCP the official server?

React MCP is published by npm:@chakra-ui from its verified domain in the official MCP Registry.

Is React MCP free?

The code is published under the MIT licence. The service it connects to may have its own pricing.

Is React MCP safe to use?

It scores 91 of 100. Grades: maintenance A, licence A, quality B. The security check has not run for it yet. Review the code before you install. How grades work.

Does React MCP work with ChatGPT?

Not directly. It runs locally, and ChatGPT only connects to remote servers with a URL. Use it in Claude Code, Claude Desktop, Cursor, VS Code or Codex.