Back to Blog

Announcing Ark UI MCP Server

The Ark UI MCP Server exposes tools for building production apps to AI agents

Sage

/

Today, we're excited to introduce the Ark UI MCP Server - a server that provides a comprehensive knowledge base about Ark UI to AI agents.

This server is built on the Model Context Protocol (MCP) , and gives AI assistants structured access to the Ark UI component system, allowing them to generate, suggest, and style framework-agnostic components consistently across React, Vue, Solid, and Svelte.

Available Tools

The MCP Server exposes several tools that AI assistants can call:

  • list_components: Returns a full list of all available components
  • list_examples: Lists various component examples
  • get_example: Retrieves code examples and usage patterns
  • styling_guide: Provides styling guidelines for components (data attributes and CSS variables)

Framework Demos

Let's take a look at how different AI tools build Ark UI components using the MCP Server.

React: Building a Checkbox w/ Copilot

Using VSCode Copilot to generate a closed checkbox component in React.

Vue: Building an OTP Verification w/ Cursor

Using Cursor to build an OTP verification component in Vue.

Using the MCP Server

Connect the MCP Server to your IDE or AI assistant of choice via the following steps:

Configure the MCP Server

To get started with the MCP server, add this to your AI tool's configuration file:

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

Start the MCP Server

In some IDEs (like VSCode), you might need to start the MCP server manually. Click the "Start" button.

Conclusion

The Ark UI MCP Server helps you build design systems in any framework. Check out the MCP docs to setup the server in your favorite IDE.

Got ideas for making the MCP Server even better? We'd love to hear from you! Share your thoughts on GitHub Discussions

Announcing Ark UI MCP Server | Ark UI