Submit Log in

Panda CSS MCP Server

by Panda CSS (Chakra UI)

v1.12.0

MIT

Repository Docs npm

Developer Tools

panda-cssdesign-tokenscssdesign-systemfrontend

Summary

Official Panda CSS MCP server that exposes your design system - tokens, recipes, patterns, breakpoints and the resolved config - so an agent styles components with real values.

Features

Expose design tokens, semantic tokens and the colour palette to an agent
Read component recipes and layout patterns with their variants
Report breakpoints, pseudo-classes and colour-mode conditions
Return the resolved Panda configuration
Generate a usage report across the codebase
One-command client config via panda-mcp init --client

Installation

Set up this MCP server in your favorite AI agent — copy a ready-made configuration below.

Any MCP-compatible agent

Most agents (Claude, Cursor, Windsurf, VS Code, and more) read a standard mcpServers configuration.

Open your agent's MCP configuration file.
Merge the snippet below into it.
Restart the agent — the "Panda CSS MCP Server" tools will be available.

{
  "mcpServers": {
    "panda-css-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@pandacss/mcp"
      ]
    }
  }
}

Claude Code

Add the server with a single CLI command.

claude mcp add panda-css-mcp -- npx -y @pandacss/mcp

Claude Desktop

Add the server to claude_desktop_config.json (Settings → Developer → Edit Config).

{
  "mcpServers": {
    "panda-css-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@pandacss/mcp"
      ]
    }
  }
}

Cursor

{
  "command": "npx",
  "args": [
    "-y",
    "@pandacss/mcp"
  ]
}

Windsurf

{
  "command": "npx",
  "args": [
    "-y",
    "@pandacss/mcp"
  ]
}

VS Code

{
  "command": "npx",
  "args": [
    "-y",
    "@pandacss/mcp"
  ]
}

Description

Panda CSS is a build-time CSS-in-JS framework, and its MCP server solves a specific problem: an AI assistant writing components for a Panda project has no way to know your design tokens, so it invents hex codes and spacing values that do not exist in the theme. This server reads the resolved Panda configuration and hands the agent the real thing.

Tools

get_tokens - all design tokens with values, CSS variables and usage examples
get_semantic_tokens - semantic tokens with their conditional values across responsive breakpoints and colour modes
get_recipes - component recipes with variants, defaults and usage examples
get_patterns - layout patterns with their properties and usage examples
get_conditions - breakpoints, pseudo-classes and colour modes with their CSS values
get_color_palette - the full colour palette
get_text_styles, get_layer_styles, get_animation_styles - typography, visual and animation style compositions
get_keyframes - keyframe animations defined in the theme
get_config - the resolved Panda configuration including paths, JSX settings and output options
get_usage_report - how the design system is actually being used across the codebase

Running it

npx -y @pandacss/mcp

There is also a one-shot config generator:

npx -y @pandacss/mcp init --client cursor

The MCP server is deliberately published as a separate package rather than being folded into @pandacss/dev, so that installing Panda does not pull the MCP SDK and Hono into every project that only wants the CSS framework.

MIT licensed, maintained in the chakra-ui/panda monorepo by the Panda CSS team.

Related MCP Servers

MCP: Azure DevOps MCP Server

by Microsoft

New

Microsoft's official MCP server for Azure DevOps - work items, repos, pipelines, wikis, test plans and iterations, reachable from any MCP client in plain language.

Developer Tools