Skip to content
Panda CSS MCP Server

Panda CSS MCP Server

by Panda CSS (Chakra UI)
Released
16 views
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: Expo MCP Server

by Expo

New

Expo's official remote MCP server — searches Expo docs, installs compatible SDK packages, triggers and monitors EAS builds, and drives iOS/Android simulators.

Developer Tools

MCP: Hugging Face

by Hugging Face

New

Hugging Face's official MCP server — search the Hub's models, datasets and Spaces, read repository files, and call thousands of Gradio applications as tools from one remote endpoint.

Developer Tools
4 views

MCP: Qase MCP Server

by Qase

New

Qase test management over MCP: 36 task-oriented tools for cases, runs, results, defects and QQL search, hosted at mcp.qase.io or self-run with your own API token.

Developer Tools
6 views

MCP: Arm MCP Server

by Arm

New

Arm's official MCP server for porting and tuning software on Arm — semantic docs search, codebase migration scanning, container architecture checks and LLVM-MCA assembly analysis.

Developer Tools
8 views
Browse all MCP servers →