{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/start/mcp-skills","result":{"data":{"current":{"frontmatter":{"title":"AI Agent MCP/Skills","order":11,"brief":null,"icon":"doc-mcp"},"fields":{"type":"start"},"tableOfContents":{"items":[{"url":"#what-is-mcp","title":"What is MCP?","items":[{"url":"#what-is-semi-mcp-useful-for","title":"What is Semi MCP useful for?"}]},{"url":"#what-is-skills","title":"What is Skills?","items":[{"url":"#what-is-semi-skills-useful-for","title":"What is Semi Skills useful for?"}]},{"url":"#installation-guide","title":"Installation Guide","items":[{"url":"#install-mcp","title":"Install MCP","items":[{"url":"#claude-desktop","title":"Claude Desktop"},{"url":"#cursor--trae","title":"Cursor & Trae"},{"url":"#claude-cli-claude-code","title":"Claude CLI (Claude Code)"},{"url":"#troubleshooting","title":"Troubleshooting"}]},{"url":"#install-skills","title":"Install Skills"}]},{"url":"#semi-mcp-detailed","title":"Semi MCP Detailed","items":[{"url":"#tools","title":"Tools"}]},{"url":"#semi-skills-detailed","title":"Semi Skills Detailed","items":[{"url":"#file-description","title":"File Description","items":[{"url":"#workflowsmd","title":"WORKFLOWS.md"},{"url":"#best_practicesmd","title":"BEST_PRACTICES.md"}]}]},{"url":"#related-resources","title":"Related Resources"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"category\": \"Start\",\n  \"title\": \"AI Agent MCP/Skills\",\n  \"subTitle\": \"AI Agent MCP/Skills\",\n  \"localeCode\": \"en-US\",\n  \"icon\": \"doc-mcp\",\n  \"order\": 11,\n  \"showNew\": true\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar Notice = makeShortcode(\"Notice\");\nvar SkillsWriter = makeShortcode(\"SkillsWriter\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"What is MCP?\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Model Context Protocol (MCP) is a standardized protocol for connecting AI assistants with external data sources and tools. Through MCP, AI assistants can dynamically discover and invoke various capabilities without having to integrate each tool separately.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Core Values of MCP\"), \":\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Unified Interface\"), \": Provides a standardized way for AI to interact with external systems\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Dynamic Discovery\"), \": AI can automatically discover available tools and resources\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Easy to Extend\"), \": New tools only need to implement the MCP protocol to be used by AI\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"What is Semi MCP useful for?\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi MCP is a Semi Design-specific server implemented based on the MCP protocol. It provides the following capabilities for AI assistants:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Query Component Documentation\"), \": AI can directly obtain usage documentation for any Semi Design component without manual searching\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"View Source Code Structure\"), \": AI can browse component source files to understand internal implementations\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Get Function Implementations\"), \": AI can view the complete code of specific functions to deeply understand component logic\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Deep Component Understanding\"), \": AI can view component style implementations and internal logic to write more precise code with better styling\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Version Switching\"), \": Supports querying component information for different versions to fit various project environments\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Through Semi MCP, AI assistants can write Semi Design code with \\\"reference available,\\\" significantly improving code accuracy and development efficiency.\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"What is Skills?\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Skills are modular capability extensions that allow AI assistants to enhance their functionality by adding pre-defined instructions and tools. Each Skill contains detailed documentation and related code resources, enabling AI to perform more professionally and efficiently in specific tasks.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Core Values of Skills\"), \":\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Domain Expertise\"), \": Adds domain-specific knowledge and best practices to AI assistants\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Standardization\"), \": Unifies team development processes and conventions\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Reusability\"), \": Quickly reuse successful experiences and solutions\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"What is Semi Skills useful for?\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi Skills is a pre-configured Semi Design expert knowledge base that helps AI assistants:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Follow Best Practices\"), \": Understand correct component import methods, theme customization approaches, and common pitfall avoidance\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Master Workflows\"), \": Know how to use MCP tools to complete common tasks (querying components, implementing features, troubleshooting issues)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Handle Complex Scenarios\"), \": When props cannot meet requirements, how to extend components via inheritance or modify internal UI\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Compatibility with New Versions\"), \": Obtain guidance for using components in new environments like React 19\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Through Semi Skills, AI assistants can think and code like professional Semi Design developers.\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Installation Guide\"), mdx(Notice, {\n    type: \"warning\",\n    title: \"\\u26A0\\uFE0F Version Recommendations\",\n    mdxType: \"Notice\"\n  }, \"Before starting the installation, it is recommended that your environment meets the following version requirements:\", mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Node.js\"), \": Recommended version greater than 20.19.0\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"npm\"), \": Recommended version greater than 11.3.0\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"If the versions do not meet the requirements, MCP may not run properly. You can check your current versions with the following commands:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"node -v\\nnpm -v\\n\"))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Install MCP\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Installation methods vary by client. Here are the configuration methods for common clients:\"), mdx(Notice, {\n    title: \"\\uD83D\\uDCA1 ByteDance Intranet Users\",\n    mdxType: \"Notice\"\n  }, \"Public network MCP cannot be used within the intranet. If you are a ByteDance intranet user, please change the package name to `@ies/semi-mcp-bytedance`, or search for \\\"Semi\\\" in the ByteDance Cloud MCP Marketplace to add with one click.\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Claude Desktop\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Add the following to the configuration file \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"claude_desktop_config.json\"), \":\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"{\\n  \\\"mcpServers\\\": {\\n    \\\"semi-mcp\\\": {\\n      \\\"command\\\": \\\"npx\\\",\\n      \\\"args\\\": [\\\"-y\\\", \\\"@douyinfe/semi-mcp\\\"] // For intranet users: change package to @ies/semi-mcp-bytedance\\n    }\\n  }\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Cursor & Trae\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Find MCP configuration in settings and add:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"{\\n  \\\"mcpServers\\\": {\\n    \\\"semi-mcp\\\": {\\n      \\\"command\\\": \\\"npx\\\",\\n      \\\"args\\\": [\\\"-y\\\", \\\"@douyinfe/semi-mcp\\\"] // For intranet users: change package to @ies/semi-mcp-bytedance\\n    }\\n  }\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Claude CLI (Claude Code)\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Run the following command in terminal to add MCP:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"claude mcp add semi-mcp -- npx -y @douyinfe/semi-mcp\\n# For intranet users: claude mcp add semi-mcp -- npx -y @ies/semi-mcp-bytedance\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Troubleshooting\"), mdx(Notice, {\n    type: \"warning\",\n    title: \"\\u26A0\\uFE0F oxc-parser Related Errors\",\n    mdxType: \"Notice\"\n  }, \"If you encounter `oxc-parser` or similar dependency resolution errors when running MCP, this is a known npm bug. Please follow these steps to resolve: First, upgrade npm to the latest version `npm install -g npm@latest`, then manually install globally in the terminal `npm i -g @douyinfe/semi-mcp` (ByteDance intranet users should replace the package name), and finally try configuring MCP again.\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Install Skills\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The installation panel below helps you install Semi Skills to your project with one click. Select the programming tool you use, click \\\"Add to My Project,\\\" choose the target directory, and the installation is complete.\"), mdx(SkillsWriter, {\n    mdxType: \"SkillsWriter\"\n  }), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"If your programming tool is not in the list, you can manually download the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/skills.zip\"\n  }, \"skills.zip\"), \" file, refer to the Skills paths for other programming tools in the table above, and extract the archive to the corresponding directory.\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Semi MCP Detailed\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi MCP is a server implemented based on Model Context Protocol (MCP) that provides documentation queries and code viewing capabilities for Semi Design components. Through this tool, AI assistants can quickly obtain usage documentation, source code structure, and other information about Semi Design components, improving development efficiency.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Please note that knowledge within MCP has been stably updated starting from Semi version 2.90.2. If your project uses a Semi version lower than this, there may be discrepancies between the knowledge obtained by AI and the actual low-version Semi in your project. You need to carefully verify or upgrade your project to version 2.90.2 or later. For subsequent versions, AI will pass the version number when calling tools to obtain version-specific knowledge.\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Tools\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi MCP provides the following tools for AI assistants to call:\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Tool Name\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Function\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Use Case\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"get_semi_document\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get component documentation or list\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Find components, understand APIs\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"get_semi_code_block\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get hidden code blocks in large documents\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"View detailed code examples\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"get_component_file_list\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get component source file list\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Understand component structure\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"get_file_code\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get file code content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"View component implementation\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"get_function_code\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get complete function implementation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Deeply understand logic\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Semi Skills Detailed\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi Design Skills is a pre-configured capability module containing Semi Design component usage guides, best practices, and workflows.\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"File Description\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"This Skill consists of the following files, each focusing on specific guidance:\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"WORKFLOWS.md\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Content\"), \": Complete workflow for using Semi MCP tools.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Contains\"), \":\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"MCP Tool Overview: Introduction to the five tools' functions and use cases\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Basic Query Process: Four-step flow - find component \\u2192 query details \\u2192 view source \\u2192 view function implementation\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Complete Task Examples: Detailed steps for common scenarios like Table filtering, form validation, cascade selector, drag-and-drop sorting\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Common Query Tips: Version-specific queries, getting complete code, error troubleshooting\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"When to Use\"), \": When you need to query component documentation, understand component APIs, or implement specific features but are unsure how to start.\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"BEST_PRACTICES.md\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Content\"), \": Best practices and considerations for using Semi Design components.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Contains\"), \":\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Component Import Methods: Recommended approach to directly import components, icons, and styles\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Theme Customization Guide: Directing AI to consult official customization documentation\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"React 19 Compatibility: Instructions on obtaining React 19-specific component usage guidance\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Component Extension Methods: How to extend Semi components via inheritance and gracefully modify internal UI without breaking version compatibility\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"When to Use\"), \": When you need to ensure code follows best practices or solve component usage issues.\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Related Resources\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://modelcontextprotocol.io\"\n  }, \"Model Context Protocol Documentation\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview\"\n  }, \"Claude Agent Skills Documentation\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developers.openai.com/codex/skills/\"\n  }, \"OpenAI Codex Skills Documentation\")))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/start/mcp-skills","next":{"fields":{"slug":"zh-CN/start/mcp-skills"},"id":"26ffae19-9719-53ea-9a41-c8e6447002c9","frontmatter":{"title":"AI Agent MCP/Skills","localeCode":"zh-CN","icon":"doc-mcp","showNew":true}},"previous":{"fields":{"slug":"zh-CN/start/overview"},"id":"8302bffd-bef5-51d0-bcb7-4f85da35c91d","frontmatter":{"title":"Overview 组件总览","localeCode":"zh-CN","icon":"doc-overview","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}