logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
6.3.3
  • Ant Design of React
  • Component Token
  • Disable Motion
  • Dynamic Theme
  • First Example
  • Local Theme
  • Modify Theme Token
  • Preset Algorithm
  • Use Token
  • Changelog
    v6.3.3
  • Basic Usage
    • Getting Started
    • Usage with Vite
    • Usage with Next.js
      UPDATED
    • Usage with Umi
    • Usage with Rsbuild
    • Usage with Farm
    • Usage with Refine
  • Others
    • Sponsor
  • AI
    • LLMs.txt
      NEW
    • MCP Server
      NEW
  • Advanced
    • Customize Theme
    • CSS Compatible
    • Server Side Rendering
    • Use custom date library
    • Internationalization
    • Common Props
  • Migration
    • From v5 to v6
  • Other
    • Third-Party Libraries
    • Contributing
    • FAQ
What is MCP?
Community MCP Server
Usage with AI Tools
Alternative: Using LLMs.txt
Learn More

MCP Server

contributors
    LLMs.txtCustomize Theme

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    X
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    WeaveFox logoWeaveFox-AI Development with WeaveFox 🦊
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    This guide explains how to use Ant Design with AI tools through Model Context Protocol (MCP).

    What is MCP?

    Model Context Protocol (MCP) is an open protocol that enables AI models to interact with external tools and data sources. Through MCP, AI assistants can access real-time documentation, code examples, and API references.

    Community MCP Server

    Ant Design recommends the community-maintained MCP server: @jzone-mcp/antd-components-mcp

    This MCP server provides the following capabilities:

    • list-components - List all available Ant Design components
    • get-component-docs - Get detailed documentation for a specific component
    • list-component-examples - Get code examples for a component
    • get-component-changelog - Get the changelog for a component

    Usage with AI Tools

    ToolDescriptionPrompt
    CursorAdd to .cursor/mcp.json or Settings → Features → MCP. DocumentationAdd Ant Design MCP server. Configuration: { "mcpServers": { "antd-components": { "command": "npx", "args": ["-y", "@jzone-mcp/antd-components-mcp"] } } }
    WindsurfAdd to ~/.codeium/windsurf/mcp_config.json. DocumentationAdd Ant Design MCP server. Configuration: { "mcpServers": { "antd-components": { "command": "npx", "args": ["-y", "@jzone-mcp/antd-components-mcp"] } } }
    Claude CodeAdd to mcpServers in Claude settings. DocumentationAdd Ant Design MCP server. Configuration: { "mcpServers": { "antd-components": { "command": "npx", "args": ["-y", "@jzone-mcp/antd-components-mcp"] } } }
    CodexAdd to .codex/mcp.json. DocumentationAdd Ant Design MCP server. Configuration: { "mcpServers": { "antd-components": { "command": "npx", "args": ["-y", "@jzone-mcp/antd-components-mcp"] } } }
    Gemini CLIAdd to MCP configuration. DocumentationAdd Ant Design MCP server. Configuration: { "mcpServers": { "antd-components": { "command": "npx", "args": ["-y", "@jzone-mcp/antd-components-mcp"] } } }
    TraeAdd to MCP settings. DocumentationAdd Ant Design MCP server. Configuration: { "mcpServers": { "antd-components": { "command": "npx", "args": ["-y", "@jzone-mcp/antd-components-mcp"] } } }
    QoderAdd to MCP configuration. DocumentationAdd Ant Design MCP server. Configuration: { "mcpServers": { "antd-components": { "command": "npx", "args": ["-y", "@jzone-mcp/antd-components-mcp"] } } }
    Neovate CodeConfigure MCP in settings or describe task with prompt. DocumentationAdd Ant Design MCP server. Configuration: { "mcpServers": { "antd-components": { "command": "npx", "args": ["-y", "@jzone-mcp/antd-components-mcp"] } } }

    Alternative: Using LLMs.txt

    If your AI tool doesn't support MCP, you can use our LLMs.txt support instead. We provide:

    • llms.txt - Structured overview of all components
    • llms-full.txt - Complete documentation with examples

    Learn More

    • Model Context Protocol Documentation
    • Ant Design LLMs.txt Guide
    • @jzone-mcp/antd-components-mcp on npm