Skip to content
Panda CSS MCP Server

Panda CSS MCP Server

by Panda CSS (Chakra UI)
Released
v1.12.0
MIT
Repository Docs npm
Developer Tools

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.

  1. Open your agent's MCP configuration file.
  2. Merge the snippet below into it.
  3. Restart the agent — the "Panda CSS MCP Server" tools will be available.
{
  "mcpServers": {
    "panda-css-mcp": {
      "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: NVIDIA Elements

by NVIDIA

NVIDIA's official MCP server for the Elements design system — component APIs, design tokens, icons and validated project scaffolding for AI/ML and robotics UIs.

Developer Tools

MCP: Mantine MCP Server

by Mantine

Mantine's official documentation server: gives an agent the component list, per-component docs and the exact props table, so generated React code matches the installed version.

Developer Tools

MCP: Storybook

by Storybook

Official addon that connects a running Storybook to AI agents for component-aware UI generation and testing.

Developer Tools
Browse all MCP servers →