Exploring TDesign: An Elegant Open‑Source UI Library with AI‑Ready Features

Overview

TDesign is an open‑source enterprise design system from Tencent. It provides component libraries for Vue 2, Vue 3, React, WeChat Mini‑Program, Flutter and UniApp. The system emphasizes:

Completeness : desktop and mobile components, plus design assets for Figma, Sketch and Adobe XD.

Consistency : unified API and visual style across all stacks.

Ease of use : a Starter Kit scaffolding tool and Design Token customization.

AI friendliness : a local MCP server that exposes component documentation, API, examples and icons for AI‑assisted development.

Project initialization

Install the CLI globally (requires Node v22 or later):

npm i tdesign-starter-cli -g

Create a new project:

td-starter init

The wizard prompts for project name, template type, code version and modules to include. After the wizard finishes, install dependencies and start the development server:

npm install
npm run dev

The application runs at http://localhost:3002.

Generated UI pages

The scaffolded project contains:

Theme settings with multiple modes, colors and navigation layouts.

Statistical report pages with chart components.

List pages supporting basic, card, filter and tree‑filter styles.

Detail pages with multi‑card and step‑by‑step layouts.

User‑center page and other standard admin sections.

MCP server

The MCP server ( tdesign-mcp-server ) enables local lookup of component API, example code, icon search and change logs.

{
  "mcpServers": {
    "tdesign-mcp-server": {
      "command": "npx",
      "args": ["-y", "tdesign-mcp-server@latest"]
    }
  }
}

The server provides five utilities for component search, documentation view, icon lookup, change‑record browsing and DOM‑structure inspection.

Developing an AI chat page with MCP

Using the MCP, an AI programming assistant (Qoder) can generate a complete chat page.

Initialize the project‑wide agent description so the assistant knows the codebase: /init AGENTS.md Enter a prompt that activates Qoder’s Spec mode, e.g.:

使用 tdesign mcp 开发一个 AI 聊天页面，涵盖聊天，获取对话历史记录，清除对话历史记录功能，其中使用的 conversationId 由前端生成 UUID，接口已在 http://localhost:8086/swagger-ui/index.html 中定义。

Review the AI‑generated development plan and approve execution.

During implementation, use Design Token classes (color, size, radius, shadow, font) to keep visual consistency with the rest of the project.

Finalize the page with TDesign’s built‑in Chatbot component, which supplies a fully functional conversational UI.

Repository

Project source: https://github.com/Tencent/tdesign