chore: add mcp usage docs (#2454)

* chore: add mcp usage docs

* chore: add mcp usage docs

* chore: update docs

* chore: update docs

* chore: remove extra space

* chore: update link

---------

Co-authored-by: Rylan <rylanbot@qq.com>

Author: uyarn

docs/mcp.en-US.md

@@ -0,0 +1,51 @@
+---
+title: TDesign MCP
+description: A long-term maintained MCP tool provided by TDesign for more efficient and accurate use of TDesign development resources in AI-assisted programming scenarios.
+spline: ai
+---
+
+TDesign provides a long-term maintained [MCP](https://cnb.cool/tencent/tdesign/tdesign-mcp-server) tool that can be activated with simple configuration, enabling more efficient and accurate use of TDesign development resources in AI-assisted programming scenarios.
+
+## How to Install TDesign MCP
+
+In any AI IDE that supports the MCP protocol, add the following configuration to your MCP settings:
+
+```javascript
+{
+  "mcpServers": {
+    // or "servers" (depending on your MCP client)
+    "tdesign-mcp-server": {
+      "command": "npx",
+      "args": ["-y", "tdesign-mcp-server@latest"]
+    }
+  }
+}
+```
+
+## How to Use TDesign MCP
+
+TDesign MCP currently includes four built-in tools: `get-component-docs`, `get-component-list`, `get-component-changelog`, and `get-component-dom`. These tools help address various practical needs when using TDesign, including but not limited to assisted code generation, resolving API usage issues, upgrading component library versions, and assisting with code migration.
+
+### Assisted Code Generation
+
+With natural language descriptions, you can quickly write code with the help of TDesign MCP.
+
+<video controls width="100%">
+<source src="https://tdesign.gtimg.com/site/mcp/mcp-vibecoding.mp4" type="video/mp4" />
+</video>
+
+### Resolving API Usage Issues
+
+By providing more accurate context through TDesign MCP, models can quickly identify issues when using TDesign.
+
+<video controls width="100%">
+    <source src="https://tdesign.gtimg.com/site/mcp/mcp-fix.mp4" type="video/mp4" />
+</video>
+
+### Upgrading Component Library Versions
+
+By using TDesign MCP to retrieve the changelog of your current TDesign tech stack, you can streamline the TDesign upgrade process and quickly perform targeted regression testing for specific feature updates.
+
+<video controls width="100%">
+    <source src="https://tdesign.gtimg.com/site/mcp/mcp-changelog.mp4" type="video/mp4" />
+</video>

docs/mcp.md

@@ -0,0 +1,64 @@
+---
+title: TDesign MCP
+description: TDesign 提供的长期维护的 MCP 工具， 用于在 AI 辅助编程的场景中更高效、更准确地使用 TDesign 的各种开发资源。
+spline: ai
+---
+
+TDesign 提供长期维护的 [MCP](https://cnb.cool/tencent/tdesign/tdesign-mcp-server) 工具，通过简单的配置即可生效，用于在 AI 辅助编程的场景中更高效、更准确地使用 TDesign 的各种开发资源。
+
+## 如何安装 TDesign MCP
+
+在任何支持 MCP 协议的 AI IDE 中，将以下配置添加到 MCP 配置中
+
+```javascript
+{
+  "mcpServers": {
+    // 或 servers（根据不同的 MCP 客户端决定）
+    "tdesign-mcp-server": {
+      "command": "npx",
+      "args": ["-y", "tdesign-mcp-server@latest"]
+    }
+  }
+}
+```
+
+如果您在腾讯内网，也可以通过 http 方式使用 TDesign MCP
+
+```javascript
+{
+  "mcpServers": {
+    // 或 servers（根据不同的 MCP 客户端决定）
+    "tdesign-mcp-server-http": {
+      "url": "http://mcp.tdesign.woa.com/mcp"
+    }
+  }
+}
+```
+
+## 如何使用 TDesign MCP
+
+TDesign MCP 目前内置了四个 tools，分别是 `get-component-docs`、`get-component-list`、`get-component-changelog` 和 `get-component-dom`，用于辅助解决使用 TDesign 过程中的各种实际需求，包括但不限于辅助代码生成、解决 API 使用问题、升级组件库版本和辅助代码迁移等场景。
+
+### 辅助代码生成
+
+通过自然语言描述，可以配合 TDesign MCP 快速进行代码编写。
+
+<video controls width="100%">
+<source src="https://tdesign.gtimg.com/site/mcp/mcp-vibecoding.mp4" type="video/mp4" />
+</video>
+
+### 解决 API 使用问题
+
+通过 TDesign MCP 提供更准确的上下文，可以辅助模型更快定位到使用 TDesign 的问题。
+
+<video controls width="100%">
+    <source src="https://tdesign.gtimg.com/site/mcp/mcp-fix.mp4" type="video/mp4" />
+</video>
+
+### 升级组件库的版本
+
+通过 TDesign MCP 获取当前使用的 TDesign 技术栈的更新日志，可以辅助解决升级 TDesign 的过程，快速对一些功能升级进行针对性回归。
+
+<video controls width="100%">
+    <source src="https://tdesign.gtimg.com/site/mcp/mcp-changelog.mp4" type="video/mp4" />
+</video>