Chakra UI MCP Server: Setup for Claude Code, Cursor and Other Apps

• Lists every Chakra UI component

  Returns the names of all Chakra UI components, so the assistant picks real ones instead of guessing.

  Try: “Which Chakra UI components can I use for a form?”

  Network · list_components

• Shows the options a component accepts

  Returns a component's props, such as size and variant, and its configuration options.

  Try: “What props does the Chakra UI Button accept?”

  Network · get_component_props

• Shows working example code for a component

  Returns usage examples for one component, from basic use to common patterns, with full code.

  Try: “Show me an example of the Chakra UI Dialog.”

  Network · get_component_example

• Shows the default theme

  Returns the theme specification: colors, fonts, text styles and layer styles. The assistant uses it to design pages that match.

  Try: “What colors and text styles does the default Chakra theme have?”

  Network · get_theme

• Helps set up your own theme

  Gives guidance and the list of token categories for defining new design tokens or changing existing ones.

  Try: “Add a brand color palette to my Chakra theme.”

  Network · customize_theme

• Gives short setup steps for Chakra UI

  Returns install steps for Vite, Next.js App Router, Next.js Pages Router or a general setup.

  Try: “How do I set up Chakra UI in a new Vite app?”

  Network · installation

• Shows how Chakra v2 code changes in v3

  Returns before-and-after snippets for common v2 to v3 changes. Its description tells the assistant to use it on any Chakra code it generates, so it does not use outdated v2 syntax.

  Try: “Migrate this Modal from Chakra v2 to v3.”

  Network · v2_to_v3_code_review

• Lists the Chakra UI Pro templates

  Lists the ready-made Pro blocks. It only appears when you set a Chakra Pro API key.

  Try: “What Pro templates does Chakra UI have for pricing pages?”

  Network · list_component_templates

• Fetches a Pro template

  Gets the code for one Pro block, such as a pricing section. It only appears when you set a Chakra Pro API key.

  Try: “Get the code for the Pro pricing template.”

  Network · get_component_templates

Watch out for

• Pro key is sent to Chakra's Pro service

  If you set CHAKRA_PRO_API_KEY, the key goes in a request header to pro.chakra-ui.com. Leave it out if you do not use the Pro templates. github.com

• Your code stays on your machine

  The tools take component names and search words, not your files. The assistant still sees whatever you paste into the chat. github.com

Security advisories