{T}

MCP

深入解析

用 ChatGPT 这类应用和大模型对话时，通常是输入一段文字，模型返回一段文字。但是模型的知识是有时间限制的，如果想让模型返回当前时间或查询当前天气，是做不到的。如果模型能调用外部工具，比如查询天气的 API 或获取当前时间的函数，就能获得更多信息

最开始的方案 Function Call

Function Call（函数调用）是 OpenAI 推出的一种功能，在 2023 年 6 月提出，它允许开发者将外部函数定义传递给模型，使模型能够结构化数据，从而调用一些外部工具。Function Call 使 AI 模型可以 "意识到" 它需要调用特定函数来完成用户的请求

Function Call 的工作流程主要包括以下几个步骤：

  1. 定义函数：开发者需要先定义函数的名称、描述和参数格式
  2. 传递函数定义：将函数定义作为参数传给模型
  3. 模型决定调用：模型根据用户的输入决定是否需要调用函数
  4. 处理函数输出：开发者获取模型返回的函数调用请求，实际执行函数，再将结果传回模型
  5. 模型生成最终回复：模型使用函数的返回结果，生成对用户的自然语言回答

下面是一个 Function Call 的流程图：

以获取天气信息为例，流程如下：

javascript
// 1. 定义函数结构
const tools = [
  {
    type: "function",
    function: {
      name: "get_weather",
      description: "获取指定地点的天气信息",
      parameters: {
        type: "object",
        properties: {
          location: {
            type: "string",
            description: "城市名称，如北京、上海"
          },
          unit: {
            type: "string",
            enum: ["celsius", "fahrenheit"],
            description: "温度单位"
          }
        },
        required: ["location"]
      }
    }
  }
];

// 2. 调用模型，传入函数定义
const response = await openai.chat.completions.create({
  model: "gpt-4o",
  messages: [{ role: "user", content: "北京今天的天气怎么样？" }],
  tools: tools
});

// 3. 模型返回函数调用请求
const toolCalls = response.choices[0].message.tool_calls;
// 例如: { name: "get_weather", arguments: '{"location":"北京","unit":"celsius"}' }

// 4. 实际执行函数
const weatherResult = await getWeatherData(JSON.parse(toolCalls[0].function.arguments));
// 返回结果如: { temperature: 25, unit: "celsius", description: "晴天" }

// 5. 将结果传回模型
const finalResponse = await openai.chat.completions.create({
  model: "gpt-4o",
  messages: [
    { role: "user", content: "北京今天的天气怎么样？" },
    response.choices[0].message,
    { role: "function", name: "get_weather", content: JSON.stringify(weatherResult) }
  ]
});

// 模型生成最终回答: "今天北京天气晴朗，气温25摄氏度。"

虽然 Function Call 很强大，但它也存在一些局限性：

  1. 封闭生态系统：每个 AI 提供商（如 OpenAI、Anthropic、Google）都有自己的函数调用实现方式，缺乏统一标准
  2. 复杂性管理：随着函数数量增加，管理变得复杂
  3. 实现差异：不同模型和提供商的函数调用能力可能有差异
  4. 缺乏模块化：难以在不同 AI 应用程序之间共享和重用工具
  5. 有限的功能集：自动决策和处理能力有限

MCP

这些局限性促使更具通用性的解决方案的出现 — MCP（模型上下文协议）。

MCP 的全称是 "模型上下文协议"（Model Context Protocol, MCP）。它是一种标准协议，目的是让外部工具和服务能无缝地与 AI 大模型应用程序进行交互。由 Anthropic 公司于 2024 年 11 月推出，就是那个开发大模型 Claude 的公司。目前以开源的形式发布，任何人都可以使用

可以把 MCP 想成个 USB-C 接口。就像 USB-C 可以连接各种设备一样，MCP 可以让 AI 模型连接各种数据源和工具。

通过 MCP 协议，就可以让 AI 大模型专注于做它擅长的事情，对应的工具部分就交给 MCP 服务器来完成，两者实现了解耦，互不干扰。

与 Function Call 相比，MCP 提供了一个更加开放、标准化的方式来连接 AI 模型与外部工具：

  1. 开放标准：不依赖于特定的 AI 提供商
  2. 统一接口：不同工具和服务可以使用同一套协议
  3. 可插拔架构：工具可以轻松添加和移除
  4. 跨平台兼容：可以在不同的 AI 应用中使用相同的工具，只需编写一次 Server 代码，可在其它实现了 Client 协议的工具中使用
  5. 开源生态：目前社区有大量开源的 MCP Server，可以直接拿来使用

MCP 基本结构

MCP 用客户端和服务器的方式工作。一个应用程序可以连接多个服务器：

  • MCP 主机：比如 Trae IDE、Claude Desktop 等这些工具。
  • MCP 客户端：与服务器保持 1:1 连接的协议客户端。例如 Trae 内部就已经实现 MCP 客户端，只需要配置 MCP 服务器就可以在 Trae 智能体中使用
  • MCP 服务器：通过标准化的模型上下文协议提供特定功能的轻量级程序
  • 本地数据源：MCP 服务器可以安全访问的计算机文件、数据库和服务。
  • 远程服务：MCP 服务器可以连接的互联网上的外部系统（如 API）

最后两个本地数据源和远程服务和 MCP 已经没什么关系了，MCP 服务器只是调用它们来提供服务

MCP 客户端

MCP 客户端是实现了模型上下文协议的应用程序，它们能够连接到 MCP 服务器并使用其提供的功能。目前市场上已有多种 MCP 客户端，支持不同程度的 MCP 特性

不同的 MCP 客户端支持不同的功能组合，下面是一些主要客户端的功能支持对比：

客户端ResourcesPromptsToolsSamplingRoots备注
Claude Desktop✅✅✅❌❌支持本地和远程服务器
Trae❌❌✅❌❌支持工具功能
Cursor❌❌✅❌❌支持工具功能
Cline✅❌✅❌❌支持工具和资源

MCP 客户端主要支持以下核心功能：

  1. Resources (资源) - 允许服务器向客户端暴露数据和内容，由应用程序控制使用
  2. Prompts (提示) - 允许创建可重用的提示模板和工作流，由用户控制
  3. Tools (工具) - 使 AI 模型能够执行服务器提供的操作，由模型控制，这是目前支持、使用最广泛的
  4. Sampling (采样) - 允许服务器通过客户端请求 LLM 完成，目前部分客户端支持
  5. Roots (根) - 定义服务器可以操作的边界，目前少数客户端支持

上面介绍的 MCP 客户端基本上都是一些应用程序，如 Trae、Cursor

MCP 服务器

MCP 服务器是实现模型上下文协议的轻量级程序，它们向 AI 模型提供特定的功能和数据访问能力。

MCP 服务器可以按照功能大致分为以下几类：

  1. 文件和系统操作：文件系统访问、操作系统命令执行、内存管理
  2. 代码和开发工具：版本控制系统集成（Git、SVN）、代码分析和生成、IDE 集成
  3. 数据存储和检索：关系型数据库（MySQL、PostgreSQL）、NoSQL 数据库（MongoDB、Redis）、向量数据库
  4. 网络和 API：网络搜索、HTTP 请求、API 集成（如 GitHub API、Twitter API）
  5. 专业领域工具：图像处理、文档处理、金融数据分析

MCP 服务器的特点：

  1. 专一性：每个服务器通常专注于提供特定领域的功能
  2. 轻量级：设计为运行在本地或远程的小型服务
  3. 标准化接口：遵循 MCP 协议规范，确保与各种客户端兼容
  4. 隔离性：各服务器之间相互独立，一个服务器的故障不会影响其他服务器

MCP 服务器平台

  1. 官方 MCP 服务器仓库

MCP 官方维护的 MCP 服务器 GitHub 仓库 modelcontextprotocol/servers 提供大量参考实现，包括官方集成的第三方社区维护的 MCP 服务器

  1. MCP.so 平台

MCP.so 是由 Trae 赞助的第三方 MCP 服务器聚合平台，汇集了众多社区开发的 MCP 服务器。这个平台提供分类浏览、搜索和安装指南，是寻找特定功能服务器的便捷途径

  1. Trae 的 MCP 市场

Trae 的 MCP 市场提供了大量 MCP 服务器，你可以直接在市场中添加。

  1. 社区开发的 MCP 服务器

除了官方和聚合平台外，许多开发者和组织也在开发和共享自己的 MCP 服务器实现，可以通过 GitHub 搜索或社区论坛找到这些资源

MCP 服务器的优势

  1. 节省开发时间：利用现有服务器可以快速集成功能
  2. 社区维护：许多服务器由活跃的社区维护，持续改进和更新
  3. 经过验证：流行的服务器已被广泛使用和测试
  4. 标准化实现：遵循协议最佳实践

如果现有服务器无法满足特定需求，再考虑开发自定义 MCP 服务器

MCP 案例：Playwright

Playwright MCP 服务器为 Trae 提供强大的浏览器自动化能力，让 AI 助手能够直接操作网页、截图和执行 JavaScript。这对于网页测试、数据抓取等任务特别有用。打开 Trae 的 MCP 市场，搜索 Playwright 并安装

  1. 浏览器自动化

    • 控制真实浏览器进行网页交互
    • 支持多种浏览器（Chrome、Firefox、Safari）
    • 可执行点击、输入、滚动等操作

  2. 网页截图

    • 捕获整个页面或特定元素的截图
    • 支持多种图片格式

  3. JavaScript 执行

    • 在页面上下文中执行 JavaScript 代码
    • 获取页面元素和数据

手动安装浏览器

playwright 安装浏览器失败，一直报网络的错误。但是我根据它下载的地址是可以下载的

bash
npx playwright install

下载地址：https://storage.googleapis.com/chrome-for-testing-public/145.0.7632.6/mac-x64/chrome-mac-x64.zip

下载完成后复制到桌面的 chrome-mc-x64 目录，执行下面的脚本：

bash
#!/bin/bash

# 配置变量
# Playwright 默认查找的 Chromium 版本目录
PLAYWRIGHT_CACHE_DIR="$HOME/Library/Caches/ms-playwright/chromium-1200"

# 本地 Chrome 所在的目录
LOCAL_CHROME_DIR="$HOME/Desktop/chrome-mc-x64"

echo "开始配置 Playwright 浏览器..."

# 1. 确保目标父目录存在
mkdir -p "$PLAYWRIGHT_CACHE_DIR"

# 2. 清理旧的配置（删除旧的软连接或目录，防止冲突）
TARGET_DIR="$PLAYWRIGHT_CACHE_DIR/chrome-mac-x64"
if [ -e "$TARGET_DIR" ] || [ -L "$TARGET_DIR" ]; then
    echo "正在清理旧的配置: $TARGET_DIR"
    rm -rf "$TARGET_DIR"
fi

# 3. 执行拷贝
echo "正在将 Chrome 从 '$LOCAL_CHROME_DIR' 拷贝到 '$TARGET_DIR'..."
echo "这可能需要几秒钟，请稍候..."
cp -R "$LOCAL_CHROME_DIR" "$TARGET_DIR"

# 4. 创建安装完成标记文件
echo "创建安装完成标记文件..."
touch "$PLAYWRIGHT_CACHE_DIR/INSTALLATION_COMPLETE"

echo "✅ 浏览器拷贝完成！"

示例 1：爬取信息

code
请帮我从 https://www.trae.ai/ 抓取产品信息，包括：
1. 产品名称和价格
2. 产品特点和优势
3. 将结果整理成表格形式

使用 MCP

AI 助手会使用 Playwright 访问网页，抓取信息并整理成表格。在执行过程中，可以看到 Trae 会调用 Playwright 服务器，期间进行了多次工具调用，来获取页面产品信息。

Playwright 期间会打开 Trae 的官网，然后截图，这个截图默认会保存用户的目录下。MCP 工具会提示在哪个目录下保存截图。

示例 2：自动化测试

code
请帮我测试掘金网站的插件页面：
1. 打开 https://juejin.cn/
2. 点击顶部导航栏的"插件"按钮
3. 等待页面加载完成
4. 截图并保存到当前目录
5. 检查页面是否包含"插件"相关的内容

AI 助手会执行这些步骤，借助 MCP 工具，可以打开浏览器点击页面进行跳转，并给出测试结果和截图

开发天气查询 MCP

Trae 结合 MCP 快速开发一个天气查询服务器。这个服务器能让 Trae 获取实时天气信息

申请高德天气 API

进入高德开放平台的控制台。创建个新应用，添加一个 API Key。高德天气 API 的文档

高德天气 API 支持查询实时天气和天气预报。它通常需要城市编码 (adcode) 作为参数。可以从高德的城市编码表中获取这些编码。

下载高德城市编码表。但高德的编码表会不定期更新，对于服务来说不要硬编码在代码里，建议通过 API 定期获取最新数据缓存到自己的应用中。这里不需要整的很复杂，就直接下载 Excel 文件使用

例如：扬州的城市编码为 321000

code
https://restapi.amap.com/v3/weather/weatherInfo?key=e149775b6f2792132061c30cba316d0f&city=321000

将高德城市编码表 Excel 文件转化为项目 trae-convert-excel-to-json

code
用 Node.js 写个脚本，将 Excel 文件 AMap_adcode_citycode.xlsx 转为 JSON，只需要保留城市名称和 adcode

使用 Trae 辅助编程

创建个 Node.js MCP 服务器，提供一个查询天气的工具

MCP 官方在文档 For Server Developers 中介绍开发一个 MCP 服务器，并提供了 TypeScript、Python 等语言的编写示例。

MCP 官方也介绍 如何使用大模型 Claude 来加速 MCP 开发，并提供一个大模型可以识别的 txt 文件 llms-full.txt，但这个文件包含了很多内容，不只 MCP 服务器

提示词内容：

code
构建一个 MCP 服务器，需求如下：

1. 提供一个工具：获取所有城市编码列表，数据源是 `city_adcode.json`  文件，直接将数据返回就行了。
2. 提供一个工具：根据城市编码查询天气预报，你只需要返回数据结构，不需要做最终的内容拼接。
3. 查询天气预报请调用高德天气 API。
4. 使用 TypeScript 语言。
5. 代码要简洁，易读，易维护。要适当添加注释。
6. 根据 MCP 工具的实现规范，定义每一个工具的名称、描述（用中文写，一定要写），参数 Schema 通常会使用 zod 这个库，也需要清晰描述 Schema 每个参数的含义，因为大模型最终需要根据每个工具定义的描述信息来调用匹配的工具

请一定认真阅读以上需求，并严格遵守。实现过程中请一定参考以下文档：

* TypeScript SDK README 文档 https://github.com/modelcontextprotocol/typescript-sdk/blob/main/README.md
* MCP 官方文档 https://modelcontextprotocol.io/docs/develop/build-server
* 高德天气 API 文档 https://lbs.amap.com/api/webservice/guide/api/weatherinfo/
* llms-full.txt https://modelcontextprotocol.io/llms-full.txt
* tool 的参数定义示例：server.tool(
    "add", // tool 的名称
    '添加', // tool 的描述
    { a: z.number().describe('参数描述'), b: z.number().describe('参数描述') },
     async ({ a, b }) => {}
   );

运行服务器：npm run dev，如果没有错误，那么执行 npm run build 编译代码。编译后的 dist/index.js 文件是后续 MCP 服务器启动的入口文件

调试工具

@modelcontextprotocol/inspector 是个官方提供的 MCP 开发工具，允许开发者查看服务器暴露的 schema (包括工具定义、参数等)。它还允许开发者手动调用这些工具。可以在没有客户端的情况下测试服务器逻辑。

通过 npm 全局安装 Inspector：

bash
npm install -g @modelcontextprotocol/inspector

安装完成后可以这样启动 Inspector：

bash
mcp-inspector node dist/index.js

启动成功后访问 http://127.0.0.1:6274 查看 Inspector 界面，点击 Connect 按钮，链接 MCP 服务器

主要功能

  • 查看服务器工具列表: Inspector 会显示服务器提供的所有工具。它还会显示每个工具的描述、参数及其类型。这有助于确认服务器是否按预期定义了工具。
  • 手动调用工具: 可以直接在 Inspector 界面中选择一个工具。然后，填写参数并执行它。Inspector 会显示工具返回的结果或发生的任何错误。这个功能对于逐个测试工具非常方便。
  • 检查请求和响应: Inspector 会记录所有通过它的 MCP 消息。可以查看发送到服务器的原始请求和服务器返回的响应。这对于诊断通信问题很有帮助

使用 Inspector 可以大大简化天气服务器的调试过程。可以在 Trae 集成前确保每个工具都能正常工作

集成到 Trae 中使用

当天气 MCP 服务器开发完成并通过 Inspector 调试后，就可以将它集成到 Trae 中。MCP 服务器配置信息如下，文件地址要写全

json
{
  "mcpServers": {
    "weather-mcp-server": {
      "command": "node",
      "args": [
        "/Users/zhangzhengyang/Desktop/Code/AI/Trae/tianiqi/mcp/dist/index.js"
      ],
      "env": {
        "AMAP_KEY": "e149775b6f2792132061c30cba316d0f"
      }
    }
  }
}

在 Trae 中通过自然语言查询天气

集成完成后，Trae 应该能够识别何时使用这个新的天气工具。例如，当用户问 Trae："苏州今天天气怎么样？"

  1. Trae 的语言模型会分析这个问题
  2. 它会发现 weather-mcp-server 服务器与该问题相关
  3. Trae 会通过 MCP 调用工具 get_city_adcodes 方法，获取城市编码列表，找到苏州的编码，然后调用工具 get_weather_forecast 方法，获取天气预报
  4. 服务器将格式化后的天气信息返回给 Trae
  5. Trae 接收到信息。然后会用自然语言将天气情况告诉用户

开发 MCP Client

快速构建

借助 Trae 快速构建一个 MCP Client

markdown
构建一个 MCP Client，需求如下：

1. 使用 TypeScript 语言
2. 代码要简洁，易读，易维护。要适当添加注释。
3. 给一个 READEME.md 文件，说明如何使用这个 MCP Client。
4. MCP Client 实现要完全遵循 MCP 协议。
5. 请根据提供的已经验证过 MCP 服务器进行自测，需要建立一个 MCP Server 的配置文件，具体配置信息后续我会填充，当前你可按照下面给的示例填充
6. 使用 OpenAI SDK 替换 @anthropic-ai/sdk，可以兼容更多的大模型，需要将模型的配置信息放到 .env 文件中，你可以创建一个 .env 的 example 文件

请一定认真阅读以上需求，并严格遵守。实现过程中请一定参考以下文档：
1. 针对客户端开发者 MCP 开发指南 https://modelcontextprotocol.io/docs/develop/build-client#node
2. MCP 核心架构 https://modelcontextprotocol.io/docs/concepts/architecture
3. TypeScript 开发的 MCP Client 示例 https://github.com/modelcontextprotocol/quickstart-resources/blob/main/mcp-client-typescript/index.ts
4. llms-full.txt https://modelcontextprotocol.io/llms-full.txt
5. 用于调试的 MCP 服务器配置示例
  {
    "mcpServers": {
      "weather-mcp-server": {
      "command": "node",
      "args": ["/Users/zhangzhengyang/Desktop/Code/AI/Trae/tianiqi/mcp/dist/index.js"],
      "env": {
        "AMAP_KEY": "xxxx"
      }
    }
  }

6. 使用 OpenAI SDK 替换 @anthropic-ai/sdk，使用DeepSeek API 文档 https://api-docs.deepseek.com/zh-cn/

复制 .env.example 文件内容到 .env 文件中

env
# 阿里云千问 API Key (或其他兼容 OpenAI API 格式的 LLM API Key)
OPENAI_API_KEY="YOUR_API_KEY_HERE"

# LLM API 的 baseURL (例如阿里云的千问 API 地址)
OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"

# 使用的 LLM 模型名称
OPENAI_MODEL="qwen-plus"

# LLM 生成回复时的最大 token 数量（可选）
MAX_TOKENS="1500"

# LLM 生成回复时的温度参数，控制创造性，0.0 - 2.0
TEMPERATURE="0.7"

在生成的 mcp-servers-config.json 配置文件中配置：

  • 请将 args 中的路径修改为实际文件路径
  • 在 env 中配置 AMAP_API_KEY。
json
{
  "mcpServers": {
    "weather-mcp-server": {
      "command": "node",
      "args": ["/path/to/your/trae-weather-mcp-server/dist/index.js"],
      "env": {
        "AMAP_KEY": "YOUR_AMAP_API_KEY"
      }
    }
    // 你可以在这里添加更多其他 MCP Server 的配置
  }
}

通过 npm dev 启动项目。如果一切顺利，客户端会连接到 mcp-servers.json 中配置的默认服务器 。连接成功后，客户端会列出该服务器提供的所有工具

测试

text
尝试输入 "苏州天气"。
继续刚才的对话，输入 "继续查询天气"。

观察到不能关联到上一次的输入。使用 Trae 修复上下文问题

text
用户查询交互的地方，如果第二次输入内容无法关联上一次的上下文，请先做一个上下文记录

主要是确保客户端能够保存和传递完整的对话历史给 LLM。这样 LLM 在后续的交互中就能参考之前的对话内容

Sequential Thinking

Sequential Thinking 不是给 AI 注入更多知识，而是为它安装了一个“元认知”引擎，让它学会了像人类专家一样思考自己的思考过程。它终结了AI “一问一答” 的黑盒模式，将思考过程变成了一场可以被观察、被引导的动态、结构化的对话。

该工具的核心是赋予了AI一套动态、反思性的问题解决方法。通过以下几种方式重塑了AI的工作流：

  • 结构化拆解：面对复杂任务，AI不再试图一步登天，而是学会了将其分解为一个个可管理、可执行的清晰步骤，就像项目经理在梳理项目计划

  • 动态修正：这是它最接近人类“反思”的特性。在思考过程中，如果AI发现之前的判断有误或有更优解，它可以随时修正和完善自己的想法，而不是将错就错

  • 多路径探索：当遇到需要权衡的决策点时，AI 不必再进行“单选题”式的赌博。它可以开辟不同的推理路径，同时探索多种方案的利弊，为你提供更全面的决策依据

  • 弹性伸缩：AI 能够根据任务的实际复杂度，动态调整思考的步数和深度，确保既不会因思考过浅而遗漏关键信息，也不会因思考过深而浪费计算资源

  • 假设与验证：这让 AI 可以像科学家一样工作。它会先提出可能的解决方案（即“假设”），然后通过后续的思考步骤来系统地验证或推翻这些假设，最终找到最优解

Sequential Thinking 将 AI 从一个只会给出答案的“计算器”，升级为一个能够规划、反思、探索、验证的“思考伙伴”。它的思考过程不再是一个黑盒，而是一个对你完全透明、可以随时与你互动的玻璃盒

在 Trae AI 中配置 Sequential Thinking 非常简单。从 Trae 的 MCP 市场直接搜索 Sequential Thinking 进行添加即可

工具的参数解析

当你（或者更准确地说，是AI模型本身）调用 sequential_thinking 工具时，会传递一系列参数来控制思考过程。这些参数通常是由 AI 在背后根据你的提示词和对话上下文自动生成和管理的，无需手动指定它们，但理解它们有助于更好地设计提示词，引导AI进行更复杂的思考

以下是该工具的核心输入参数：

  • thought (string): 当前这一步思考的具体内容
  • nextThoughtNeeded (boolean): 是否需要进行下一步思考。如果为 true，AI 会继续调用该工具进行下一步推理
  • thoughtNumber (integer): 当前思考步骤的编号，从1开始
  • totalThoughts (integer): 预估完成整个任务总共需要多少步思考
  • isRevision (boolean, 可选): 标记当前步骤是否是对之前某个想法的修正
  • revisesThought (integer, 可选): 如果 isRevision 为 true，此参数会指明正在修正的是第几个思考步骤
  • branchFromThought (integer, 可选): 指明当前思考是从哪个步骤开始分岔的，用于探索不同的推理路径
  • branchId (string, 可选): 某个特定分支的唯一标识符
  • needsMoreThoughts (boolean, 可选): 表示AI判断可能需要比原计划更多的思考步骤

简单来说，这些参数构成了 AI 进行结构化思考的“操作指令”。它们由 MCP 客户端调用 AI 模型（如Claude、GPT等）根据你的高级指令（Prompt）来填充，然后传递给 sequential_thinking 这个MCP服务。这个服务就像一个“思考状态管理器”，它记录、组织并返回整个思考链，最终让AI能够呈现出逻辑清晰、步骤分明的推理过程

实战场景

场景一：让AI成为你的“软件架构师”

场景痛点：启动一个新软件项目时，需求、技术选型、模块划分、开发风险等众多因素交织在一起，如果缺乏系统性规划，很容易在开发过程中迷失方向或做出错误的技术决策。

把指挥棒交给AI：

markdown
你是一位经验丰富的软件架构师，为我规划一个“Markdown 在线编辑器”项目，核心功能是支持左侧编辑、右侧实时预览。

要求：
- 使用 sequential_thinking 规划核心开发步骤。
- 步骤应包括：
  1.  **需求定义**：明确产品的核心功能，如实时预览、文件操作等。
  2.  **技术栈选择**：对比并选择合适的前端框架和 Markdown 解析库。
  3.  **核心架构设计**：设计主要模块，如编辑器、预览器和同步机制。
  4.  **开发计划**：制定一个简单的开发路线图，并进行一次“修正”，思考并补充潜在的性能瓶颈，如大数据量下的渲染效率问题

输入提示词，这里要选择智能体 “Builder with MCP”，这样才能调用 MCP

实际执行效果展示：

Sequential Thinking 工具展现出强大的结构化思维能力，它会像图示一样，一步步地进行思考和规划。

从上图可以看到，sequential_thinking 工具的思考过程非常清晰和系统化：

  1. 系统性分析：如下图所示，AI进行了全面的需求分析，从核心功能开始，逐步扩展到文件操作、新建、打开、保存、导出文档等功能，这些都是要思考的内容。

  2. 技术选型的深度对比：在技术栈选择阶段，AI不是简单地推荐一个方案，而是系统地对比了多种技术组合的优缺点。例如，详细分析React vs Vue的生态差异、Monaco Editor vs CodeMirror的性能特点、以及marked vs markdown-it等解析库的功能对比，最终给出了基于项目需求的最优选择

  3. 架构设计的层次化思考：AI将复杂的系统架构分解为清晰的模块层次，从数据流设计到组件划分，每个环节都有详细的设计思路。包括编辑器组件的状态管理、预览器的渲染优化、以及两者之间的实时同步机制，形成了一个完整的技术架构图

  4. 主动的风险识别与修正：如下图所示，最令人印象深刻的是，AI在制定开发计划后，主动进行了"修正"思考，识别出了大文件渲染卡顿（当文档超过10MB或包含大量图片时，实时预览会卡顿）、实时同步延迟等潜在风险，并提出了虚拟滚动、防抖优化、分块解析等具体的解决方案。这种自我纠错和完善的能力，正是 sequential_thinking 的核心价值所在

  5. 可执行的开发路线图：最终输出的不是抽象的概念，而是包含具体时间节点、技术实现细节和测试策略的完整开发计划。从MVP版本到完整功能的迭代路径清晰明确，每个阶段都有明确的交付目标和验收标准

最终生成一份完整的项目规划报告

场景二：低配版 DeepSearch

场景痛点：在技术选型时，面对多个相似的技术方案，如何进行全面、客观的对比分析，避免因信息不全或理解偏差而做出错误决策？

通过组合 sequential_thinking（负责规划与拆解任务）和 Tavily（负责深度信息检索），可以构建一个低成本但效果强大的自动化研究工作流，称之为“低配版 DeepSearch”。

Tavily 是一个专为大型语言模型设计的搜索引擎，它通过 MCP (Model Context Protocol) 与 AI 无缝集成，提供高质量、实时、准确的搜索结果。与通用搜索引擎不同，Tavily 更擅长处理复杂的、需要深度研究的问题，能提供精准、无广告的结构化数据，是 AI 进行深度研究的理想工具

要在 Trae 中使用 Tavily，你需要完成以下配置：

  1. 添加 Tavily MCP Server：在 Trae 的 MCP 市场中搜索 “tavily”，选择第一个结果，然后点击“编辑配置”。按照格式要求填写 TAVILY_API_KEY 即可

  2. 获取免费 API Key：

    • 访问 Tavily 官网 并注册一个免费账户。免费的 "Researcher" 计划每月提供 1,000 次 API 调用，无需信用卡，完全够用。
    • 在账户后台的 "API Keys" 页面，复制 API Key

  3. 完成配置：将获取到的 API Key 填入 Trae 中弹出的输入框，即可完成配置

结合 sequential_thinking 和 Tavily，让 AI 成为一名出色的技术分析师：

markdown
我想深入了解 MCP 和传统 Function Call 的区别，希望你能帮我生成一份详细的技术对比分析报告。

我的需求：
- **全面对比**：我想了解这两种技术方案的核心差异，包括它们的设计理念、架构特点、功能优势等
- **实用信息**：希望你能搜索最新的技术资料和社区讨论，确保信息的准确性和时效性
- **决策支持**：我需要知道在什么情况下应该选择哪种方案，以及它们各自的适用场景
- **开发考量**：除了技术层面，我也关心开发体验、学习成本、生态支持等实际因素

请使用 sequential_thinking 工具来系统性地分析这个问题，并使用 Tavily 工具搜索相关的最新信息。如果发现分析过程中有遗漏的重要方面，请及时补充和修正。最终希望得到一份结构清晰的 Markdown 格式报告

AI 接到任务后，会像一名真正的研究员一样，开始它的工作：

  1. 启动思考链：首先，AI 使用 sequential_thinking 工具，将“对比 MCP 与 Function Call”这个复杂任务，拆解成一个个可执行的子任务，例如“分析框架构建”、“搜索 MCP 最新资料”、“搜索 Function Calling 相关信息”等。这确保了整个研究过程的逻辑性和条理性

  2. 调用 Tavily 进行深度搜索：在每个思考节点，如果判断需要收集信息了，AI 会调用 Tavily 工具，针对性地搜索互联网上的高质量信息。从截图中可以看到，AI 的搜索查询（Query）非常精准，并且利用了 advanced 模式进行深度搜索，确保了信息的全面和准确

  3. 迭代分析与信息整合：AI 在“思考”和“搜索”之间循环迭代，不断完善它的分析框架，并最终将所有信息整合成一篇结构清晰、内容详实的报告

最终成果：AI 会生成一份完整的技术对比报告。内容看起来还是很详细的，一个低配版 “DeepSearch”， 注意不是 “Research”，像 OpenAI 的 Deep Research 会产生更专业的报告，当然价格也是非常的贵。

场景三：打造一个全能 “研究智能体”

场景痛点：单纯的“思考链+搜索”组合虽然强大，但在真实的网络世界中，信息获取远比一次搜索要复杂。可能需要阅读长篇文章、与动态加载的页面交互，甚至处理反爬虫机制。每次都手动组合 Tavily、fetch、Puppeteer 等工具并编写复杂提示词，不仅效率低下，而且难以复用。

解决方案：利用 Trae 的“智能体”（Agent）功能，将“思考链 + 复合式信息获取”的完整工作流，封装成一个名为“全能 Research Agent”的自定义智能体。这个智能体将拥有一个强大的工具箱，并被赋予智能决策的能力，知道何时该用哪种工具。

实现步骤：

1. 配置全功能 MCP 工具集：确保已安装研究工作流所需的所有 MCP 工具。这不仅包括 sequential-thinking 和 tavily，还必须加上 puppeteer，为 Agent 配备完整的“搜索”、“阅读”和“交互”能力

2. 创建并配置智能体：在 Trae 的“智能体”市场中，点击“创建智能体”

  • 名称：研究智能体
  • 提示词（Prompt）：
markdown
# 角色

作为一名为深度探索而生的研究智能体，你的核心使命是系统性地拆解复杂问题，并以不屈不挠的专注力，深入挖掘、精准整合网络上的海量信息。你擅长从纷繁的数据中提炼出核心洞见，最终为我呈现条理清晰、信息翔实的综合性报告，成为我最可靠的专属信息分析专家。

# 核心能力

你的超能力是利用 `sequential_thinking` 来制定和调整研究计划，并根据任务情境，从你的工具箱中智能选择最合适的工具来获取信息。

# 工具箱与使用策略

1.  **`Tavily` (搜索)**: 你的默认起点。用于快速进行广泛的初步信息检索，了解概况，发现关键信息源（如文章、报告、GitHub 仓库的链接）。
2.  **`Puppeteer` (阅读与交互)**: 你的全能网页访问工具。在以下情况使用它：
- 当 `Tavily` 的搜索结果提供了关键页面的链接，需要获取其完整内容（无论是静态还是动态页面）进行深度阅读和分析时。
- 目标网站是动态的，需要执行 JavaScript 才能呈现完整内容（如无限滚动、点击“加载更多”）。
- 需要与页面进行简单交互才能获取信息时（如同意 Cookie、关闭弹窗）。

# 工作流程

1.  **规划**: 接收用户请求后，首先使用 `sequential_thinking` 规划研究框架和初步的信息收集策略。
2.  **执行与决策**: 按照计划，默认从 `Tavily` 开始。根据获取的结果，动态决策下一步是继续搜索，还是使用 `Puppeteer` 对链接进行深入阅读和分析。
3.  **适应与修正**: 在研究过程中，如果 `Puppeteer` 访问某个页面失败，必须反思可能的原因（如网站反爬机制），并调整策略。持续使用 `sequential_thinking` 来记录和调整你的策略。
4.  **整合与报告**: 收集足够信息后，整合所有来源的发现，生成一份结构清晰、逻辑严谨、内容详实的 Markdown 格式报告。
5.  **文件交付**: 将最终的 Markdown 报告写入到一个文件中，完成任务。

用这个 Agent 来完成一个真实的研究任务：“做一个有关 ‘2025 年 Agent 的发展现状报告’ ”

  • 任务启动：在对话框中向“研究智能体”下达指令

  • 思考与执行：Agent 开始工作。可以清晰地看到它的“思考链”：它如何使用 sequential_thinking 分解任务、规划步骤，并调用 Tavily 进行多轮、有针对性的搜索，最后将信息汇总，撰写报告

  • 成果交付：经过一系列严谨的“思考-执行-反思”循环后，Agent 交付了一份信息翔实、结构清晰的 Markdown 报告，并按要求存入了文件

配置了 sequential_thinking 和多功能工具集的 Agent，已经不再是一个简单的问答机器人，而是一个能够自主规划、执行复杂研究任务的得力助手