MCP-UI 项目启动与配置教程

MCP-UI 项目启动与配置教程

mcp-ui UI over MCP. Bring rich AI experiences to the agents! 项目地址: https://gitcode.com/gh_mirrors/mcp/mcp-ui

1. 项目目录结构及介绍

MCP-UI 是一个基于 TypeScript 的 SDK，用于在 Model Context Protocol (MCP) 中实现交互式 Web 组件。项目目录结构如下：

mcp-ui/
├── examples/               # 示例代码和应用程序
├── packages/
│   ├── @mcp-ui/client/     # 客户端 UI 组件
│   └── @mcp-ui/server/     # 服务器端资源生成工具
├── dist/                   # 打包后的文件
├── docs/                   # 文档资料
├── workflows/              # GitHub Actions 工作流
├── .github/                # GitHub 设置
├── .gitignore              # Git 忽略文件
├── .eslintrc.json          # ESLint 配置文件
├── .prettierrc             # Prettier 配置文件
├── .prettierrc.json        # Prettier 配置文件
├── .releaserc.json         # Release 配置文件
├── CHANGELOG.md            # 更新日志
├── LICENSE                 # 开源协议
├── README.md               # 项目说明文件
├── package-lock.json       # npm 包锁定文件
├── package.json            # npm 包配置文件
└── pnpm-lock.yaml          # pnpm 包锁定文件

• examples/: 包含示例代码和应用程序，可以用来测试和展示 MCP-UI 的功能。
• packages/: 包含两个子包，@mcp-ui/client 和 @mcp-ui/server，分别是客户端和服务器端的实现。
• dist/: 打包后的文件存放目录。
• docs/: 文档资料存放目录。
• workflows/: GitHub Actions 工作流文件，用于自动化项目的构建、测试和发布等。
• .github/: GitHub 仓库的配置文件。
• .gitignore: 指定 Git 忽略的文件和目录。
• .eslintrc.json: ESLint 配置文件，用于规范代码风格。
• .prettierrc 和 .prettierrc.json: Prettier 配置文件，用于代码格式化。
• .releaserc.json: Release 配置文件，用于自动化版本发布。
• CHANGELOG.md: 记录项目的更新历史。
• LICENSE: 开源协议文件。
• README.md: 项目说明文件，包含项目介绍、安装、使用说明等。
• package-lock.json 和 pnpm-lock.yaml: 包锁定文件，确保在不同环境中依赖的一致性。

2. 项目的启动文件介绍

项目的启动主要依赖于 examples/server 目录下的服务器端示例代码。以下是一个简单的服务器启动示例：

// examples/server/index.ts
import express from 'express';
import { createHtmlResource } from '@mcp-ui/server';

const app = express();
const port = 3000;

// 创建一个 HTML 资源
const resource = createHtmlResource({
  uri: 'ui://greeting/1',
  content: {
    type: 'directHtml',
    htmlString: '<p>Hello, MCP UI!</p>',
  },
});

// 设置静态文件目录
app.use(express.static('public'));

// 路由处理
app.get('/resource', (req, res) => {
  res.json(resource);
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

这个示例使用了 express 框架来创建一个简单的 HTTP 服务器，并通过 /resource 路径提供 MCP-UI 资源。

3. 项目的配置文件介绍

项目的配置文件主要包括 .eslintrc.json、.prettierrc 和 .prettierrc.json。

• .eslintrc.json: ESLint 配置文件，用于指定代码风格规则，例如：

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "rules": {
    "react/prop-types": "off"
  }
}

• .prettierrc 和 .prettierrc.json: Prettier 配置文件，用于统一代码格式，例如：

{
  "semi": false,
  "singleQuote": true
}

这些配置文件确保了代码的风格一致性和可维护性。在项目开发过程中，应当遵循这些配置文件的规定来编写代码。

mcp-ui UI over MCP. Bring rich AI experiences to the agents! 项目地址: https://gitcode.com/gh_mirrors/mcp/mcp-ui