在今年的 AI 应用开发方向里MCPModel Context Protocol已经成为连接模型与外部世界的重要协议。近期 OpenAI 联合多家平台推出 WebMCP 黑客松核心方向就是把 MCP 的应用场景推到 Web 领域让模型不仅能聊天还能读取网页、调用 Web 工具、操作浏览器行为。对开发者来说这是一个值得投入时间去做的方向一方面 MCP 的生态还在快速成形另一方面 Web 场景的数据获取、信息聚合、内容处理天然适合做成可复用的 MCP Server。这篇文章不是新闻稿而是一份面向参赛者的实战教程。会先讲清楚 WebMCP 黑客松到底在考察什么能力再花较大篇幅解释 MCP 的工作机制然后从零实现一个“网页内容提取与摘要”MCP Server并把它接入 OpenAI API 完成验证。最后补充常见问题、排查链路和参赛提交时的检查清单。学完后你会有一个可以直接演示的 Web 场景 MCP 项目也能理解如何把其他网页能力扩展成更多 MCP 工具。1. WebMCP 黑客松在考察什么能力1.1 从主题拆分理解黑客松目标WebMCP 这个名称可以拆成两个部分Web代表 Web 场景包括网页抓取、信息提取、搜索、RSS 聚合、浏览器自动化、表单填写、内容审核等。MCP代表 Model Context Protocol是 AI 模型与外部工具、数据源之间的标准化通信协议。把两者组合起来WebMCP 黑客松希望参赛者解决的问题是如何让大模型更可靠地获取 Web 信息并基于这些信息完成真实任务。对开发者来说这个方向意味着参赛作品需要同时具备两个能力模型侧能够理解用户意图决定是否调用工具、调用哪个工具、传入什么参数。Web 侧MCP Server 能够真正获取网页数据、解析结构、返回模型可以理解的标准化结果。如果只是写一个普通的网页爬虫缺少 MCP 封装模型无法直接调用如果只是写一个 MCP Server但只返回写死的模拟数据又经不起现场演示的考验。真正有竞争力的作品应该是模型、工具、Web 数据三者形成一个完整闭环。1.2 参赛者需要提前准备哪些基础能力从准备参赛的角度看建议在动手前先确认自己具备以下基础能力能力方向具体内容建议掌握程度MCP 协议基础了解 client、server、tool、resource、prompt 的关系至少要理解 tool 的调用流程开发语言TypeScript、Python、Go 任选一种能独立完成一个 Server 项目Web 数据处理HTTP 请求、HTML 解析、JSON 序列化能处理常见网页结构变化AI API 调用OpenAI API 的认证、请求格式、工具调用机制能跑通一个最小闭环调试能力查看日志、模拟 MCP 请求、分析返回 JSON能定位 tool 调用失败原因如果这些能力还有欠缺也不用等完全准备好再参赛。可以选择一个最小的 Web 场景先实现一个只有两三个工具的 MCP Server把闭环跑通后再扩展。黑客松评审更看重完整度和真实可用性而不是工具数量。1.3 为什么 Web 场景特别适合 MCPMCP 的核心价值在于标准化。一个 MCP Server 可以被任意支持 MCP 的客户端调用不需要为每个 Agent 重写一套对接代码。而 Web 场景恰好是碎片化最严重的地方不同网站结构不同、接口协议不同、数据格式不同如果没有统一封装模型每接一个站点都要定制一套逻辑。通过 MCP可以把这些差异收敛到 Server 内部。对模型来说它只看到几个标准工具比如fetch_page、search_web、extract_article。实际抓取、解析、清洗逻辑全部封装在 Server 里。这样做的收益很明显模型不需要知道网页是 HTML 还是 JSON。网站改版时只需要修改 Server 的解析逻辑不需要改 Agent。同一套 Server 可以被多个 AI 应用复用。这也是 WebMCP 黑客松最有意义的地方解决 AI 与 Web 之间“最后一公里”的接入问题。2. MCP 的核心机制模型如何调用一个工具2.1 从一次用户提问看完整调用链很多人第一次接触 MCP 时容易把它当成一个具体的库或框架。实际上 MCP 是一套基于 JSON-RPC 的协议规范核心要解决的问题是AI 应用客户端如何与外部能力提供方服务端对话。一次典型的 MCP 工具调用流程如下用户在 AI 聊天界面提问“帮我提取这个网页的标题和正文摘要https://example.com/article”。客户端把用户消息发送给模型。模型判断需要调用fetch_page工具并返回一个工具调用请求包含工具名和参数。客户端收到请求后通过 MCP 协议向 MCP Server 发起tools/call请求。MCP Server 执行真实的网页抓取和解析返回结构化结果。客户端把工具结果回传给模型。模型基于工具结果生成最终回复。这个过程看起来简单但协议层面对每一步都有严格定义。2.2 MCP 消息示例初始化、工具发现、工具调用在 MCP 协议中客户端和 Server 之间通过 JSON-RPC 消息通信。下面是最关键的三个阶段。第一个阶段是初始化。客户端发送initialize请求双方确认协议版本和能力范围{ jsonrpc: 2.0, id: 1, method: initialize, params: { protocolVersion: 2025-03-26, capabilities: {}, clientInfo: { name: webmcp-demo-client, version: 1.0.0 } } }第二个阶段是工具发现。客户端调用tools/list获取 Server 支持的工具列表{ jsonrpc: 2.0, id: 2, method: tools/list }Server 返回的工具描述格式如下{ jsonrpc: 2.0, id: 2, result: { tools: [ { name: fetch_page, description: 抓取指定 URL 的网页内容并返回清理后的文本, inputSchema: { type: object, properties: { url: { type: string, description: 需要抓取的网页地址 }, maxLength: { type: integer, description: 返回文本的最大长度默认 5000 } }, required: [url] } } ] } }第三个阶段是工具调用。模型决定调用工具后客户端发送tools/call{ jsonrpc: 2.0, id: 3, method: tools/call, params: { name: fetch_page, arguments: { url: https://example.com/article, maxLength: 3000 } } }Server 执行完真实抓取后返回内容{ jsonrpc: 2.0, id: 3, result: { content: [ { type: text, text: 标题Example Article\n正文This is the main content... } ], isError: false } }从这三个消息可以看出MCP 的设计非常务实模型不感知具体实现Server 只暴露标准接口客户端负责两者之间的调度。2.3 三种常见的 MCP Server 传输方式MCP Server 可以通过不同方式与客户端通信常见的有三种传输方式适用场景特点stdio本地开发、单机调用通过标准输入输出通信适合 CLI 工具Streamable HTTP远程服务、多客户端共享通过 HTTP 端点通信适合部署到服务器WebSocket浏览器端、实时交互适合需要持续连接的场景在黑客松演示环境中本地开发推荐先用 stdio 跑通逻辑部署演示环境时再迁移到 Streamable HTTP。这样能减少初期调试成本又不影响最终展示。注意不要一开始就追求完整的协议实现。先保证一个工具能被客户端调用成功再逐步补齐其他能力开发效率会高很多。3. 环境准备搭建一个 MCP Server 开发环境3.1 选择语言与核心依赖实现 MCP Server 可以使用官方 SDK也可以自己实现 JSON-RPC 通信。对于黑客松项目推荐直接使用官方 SDK把精力放在业务逻辑上。以 TypeScript 为例需要准备以下依赖{ name: webmcp-demo-server, version: 0.1.0, type: module, dependencies: { modelcontextprotocol/sdk: ^1.0.0, cheerio: ^1.0.0, undici: ^6.0.0 }, devDependencies: { typescript: ^5.5.0, tsx: ^4.0.0, types/node: ^20.0.0 }, scripts: { dev: tsx src/index.ts, build: tsc, start: node dist/index.js } }依赖解析modelcontextprotocol/sdk官方 MCP SDK提供 Server、工具注册和传输层封装。cheerio服务端 HTML 解析库使用类似 jQuery 的语法提取网页元素。undici现代 HTTP 客户端用于发起网页请求。如果使用 Python可以改用mcp官方 SDK 和httpx、beautifulsoup4。选型时不需要纠结语言重点是能快速完成迭代。3.2 项目目录结构一个清晰的目录结构可以帮助后续扩展。webmcp-demo-server/ ├── src/ │ ├── index.ts # 入口文件初始化 MCP Server │ ├── tools/ │ │ ├── fetchPage.ts # 网页抓取工具 │ │ └── extractArticle.ts # 正文提取工具 │ ├── utils/ │ │ ├── http.ts # HTTP 请求封装 │ │ └── html.ts # HTML 清理与转换 │ └── types.ts # 类型定义 ├── package.json ├── tsconfig.json └── README.md在黑客松场景下目录不需要太重。但如果计划在赛后才继续迭代或要提交完整源码建议从一开始就保持结构清晰。3.3 环境检查要点开始编码前建议运行以下命令确认环境正常node -v npm -v如果是 Python 环境检查python --version pip --version同时确认网络环境可以访问目标网页。由于网页数据源不同比赛现场网络可能与本地环境不一致抓取逻辑最好设置超时和失败重试避免演示时因为网络波动中断。4. 实现一个 Web 场景 MCP Server网页内容提取与摘要4.1 工具设计输入、输出、边界这个 Demo 要实现两个工具fetch_page抓取网页把 HTML 转换为纯文本。extract_article抓取网页提取标题、正文段落、链接列表。工具设计时就要考虑模型调用时的易用性。输入参数要尽量少并且每个参数都要有清晰的 description。模型依赖 description 决定是否调用工具写得太模糊会导致调用错误。参数设计如下参数名类型必填说明urlstring是目标网页地址必须带协议maxLengthinteger否返回文本最大长度默认 5000includeLinksboolean否是否提取页内链接默认 false4.2 HTTP 请求封装先实现一个带超时和重试的 HTTP 请求工具。网页抓取最容易遇到的问题就是目标站响应慢或者直接超时因此这里要设置合理的超时时间。// src/utils/http.ts import { request } from undici; export interface FetchOptions { timeout?: number; maxRedirects?: number; } export async function fetchHtml(url: string, options: FetchOptions {}): Promisestring { const timeout options.timeout ?? 10000; const maxRedirects options.maxRedirects ?? 5; const response await request(url, { method: GET, headers: { User-Agent: webmcp-demo-server/0.1.0, Accept: text/html,application/xhtmlxml, }, maxRedirections: maxRedirects, headersTimeout: timeout, bodyTimeout: timeout, }); if (response.statusCode 400) { throw new Error(HTTP ${response.statusCode}: ${url}); } const contentType response.headers[content-type] ?? ; if (!contentType.includes(text/html) !contentType.includes(application/xhtmlxml)) { // 有些网站返回 JSON 或图片这里只处理 HTML } return await response.body.text(); }关键点设置User-Agent可以降低被目标站拒绝的概率但不要伪装成浏览器保持诚实无害的标识即可。maxRedirections控制重定向次数防止死循环。超时分为headersTimeout和bodyTimeout比单一超时更精细。4.3 HTML 清理与文本转换抓取到的 HTML 往往包含大量脚本、样式、导航链接。直接返回给模型会浪费 token也不利于理解。所以要做两层处理先去除无用节点再转换为纯文本。// src/utils/html.ts import * as cheerio from cheerio; export function htmlToText(html: string, maxLength: number): string { const $ cheerio.load(html); // 移除脚本、样式、导航、广告等噪声节点 $(script, style, noscript, iframe, nav, footer, aside).remove(); // 提取主要区域的文本 const bodyText $(body).text(); // 合并连续空白 const cleaned bodyText.replace(/\s/g, ).trim(); return cleaned.length maxLength ? cleaned.slice(0, maxLength) ... : cleaned; }这段代码的重点是remove方法。网页中信息密度最低的节点就是 script 和 style先把它们移除后续文本质量会好很多。4.4 正文提取工具实现extract_article工具比fetch_page更进一步它返回结构化数据标题、内容、链接。// src/tools/extractArticle.ts import * as cheerio from cheerio; import { fetchHtml } from ../utils/http.js; import { htmlToText } from ../utils/html.js; export interface ExtractArticleParams { url: string; maxLength?: number; includeLinks?: boolean; } export async function extractArticle(params: ExtractArticleParams) { const maxLength params.maxLength ?? 5000; const includeLinks params.includeLinks ?? false; const html await fetchHtml(params.url); const $ cheerio.load(html); const title $(title).text().trim() || $(h1).first().text().trim() || ; const content htmlToText(html, maxLength); let links: string[] []; if (includeLinks) { links $(a[href]) .map((_, el) $(el).attr(href)) .get() .slice(0, 20); } return { title, content, links, url: params.url, }; }这里有意使用title标签优先、h1标签兜底的策略。很多网页 h1 是图片或装饰文案title 通常更可靠。4.5 注册工具到 MCP Server接下来把工具注册到 MCP Server。SDK 版本不同注册方式略有差异但核心思路一致给 Server 添加工具定义和处理器。// src/index.ts import { McpServer } from modelcontextprotocol/sdk/server/mcp.js; import { StdioServerTransport } from modelcontextprotocol/sdk/server/stdio.js; import { fetchPage } from ./tools/fetchPage.js; import { extractArticle } from ./tools/extractArticle.js; const server new McpServer({ name: webmcp-demo-server, version: 0.1.0, }); server.registerTool( fetch_page, { description: 抓取指定 URL 的网页内容并返回清理后的纯文本, inputSchema: { type: object, properties: { url: { type: string, description: 需要抓取的网页地址 }, maxLength: { type: integer, description: 返回文本最长长度默认 5000 }, }, required: [url], }, }, async (args: any) { try { const result await fetchPage(args); return { content: [{ type: text, text: JSON.stringify(result) }], }; } catch (error: any) { return { content: [{ type: text, text: 抓取失败${error.message} }], isError: true, }; } } ); server.registerTool( extract_article, { description: 抓取网页并提取标题、正文和链接适合文章类页面, inputSchema: { type: object, properties: { url: { type: string, description: 文章页面地址 }, maxLength: { type: integer, description: 正文最长长度默认 5000 }, includeLinks: { type: boolean, description: 是否提取页内链接默认 false }, }, required: [url], }, }, async (args: any) { try { const result await extractArticle(args); return { content: [{ type: text, text: JSON.stringify(result) }], }; } catch (error: any) { return { content: [{ type: text, text: 提取失败${error.message} }], isError: true, }; } } ); const transport new StdioServerTransport(); await server.connect(transport);这里要注意工具返回结构。MCP 的content数组可以是多个文本块或图片块。黑客松项目中最简单可靠的做法就是返回 JSON 字符串。这样模型能拿到结构化信息同时避免复杂的资源类型。4.6 运行 Server 并验证工具列表启动 Servernpm run dev启动后 MCP SDK 会在 stdio 上监听消息。此时没有客户端连接所以不会有输出这是正常的。可以用一个简单的 MCP 客户端或调试工具来验证工具列表是否注册成功。如果使用mcp-remote或其他 MCP 客户端可以参考官方调试方式。在本地验证阶段一个更直接的方法是写一个临时 Node 脚本直接用 SDK 的Client连接 Server// scripts/list-tools.ts import { Client } from modelcontextprotocol/sdk/client/index.js; import { StdioClientTransport } from modelcontextprotocol/sdk/client/stdio.js; const transport new StdioClientTransport({ command: npm, args: [run, dev], }); const client new Client({ name: test-client, version: 1.0.0 }); await client.connect(transport); const tools await client.listTools(); console.log(JSON.stringify(tools, null, 2)); await client.close();运行npx tsx scripts/list-tools.ts预期输出中应该能看到fetch_page和extract_article两个工具定义。5. 接入 OpenAI让模型真正调用 Web 工具5.1 OpenAI API 对 MCP 的支持方式OpenAI 在 2025 年开始支持 MCP 协议但不同版本的 API 和 SDK 接入方式有差异。如果使用较新的 Responses API 或支持 MCP 的 SDK可以直接注册 MCP Server。如果使用传统 Chat Completions API则可以通过 tool calling 机制手动实现类似效果。考虑到黑客松现场的兼容性这里采用一种稳妥方案不依赖 SDK 的 MCP 自动发现而是手动把工具列表转换成 OpenAI 的tools参数由模型决定是否调用。当模型返回 tool call 时再把工具名和参数转发给 MCP Server拿到结果后回传给模型。这种方式对 MCP 协议没有任何侵入同时保证了最终用户看到的效果与原生 MCP 一致。5.2 工具描述转换OpenAI 的 function calling 工具格式与 MCP 的 inputSchema 非常接近可以直接做一个映射。假设我们只有一个extract_article工具转换后的 OpenAI tools 定义如下{ type: function, function: { name: extract_article, description: 抓取网页并提取标题、正文和链接适合文章类页面, parameters: { type: object, properties: { url: { type: string, description: 文章页面地址 }, maxLength: { type: integer, description: 正文最长长度默认 5000 }, includeLinks: { type: boolean, description: 是否提取页内链接默认 false } }, required: [url] } } }这里不需要做复杂转换因为 MCP 的inputSchema本身就是 JSON Schema和 OpenAI 的parameters结构基本一致。5.3 完整调用闭环下面代码演示了如何把 OpenAI API 和 MCP Server 连接起来。import OpenAI from openai; import { Client } from modelcontextprotocol/sdk/client/index.js; import { StdioClientTransport } from modelcontextprotocol/sdk/client/stdio.js; const openai new OpenAI({ apiKey: process.env.OPENAI_API_KEY, }); const mcpTransport new StdioClientTransport({ command: npm, args: [run, dev], }); const mcpClient new Client({ name: openai-webmcp-bridge, version: 1.0.0 }); await mcpClient.connect(mcpTransport); const mcpTools await mcpClient.listTools(); const openaiTools mcpTools.tools.map((tool) ({ type: function as const, function: { name: tool.name, description: tool.description, parameters: tool.inputSchema, }, })); const userMessage 提取 https://example.com 的标题和正文摘要; const messages: OpenAI.Chat.ChatCompletionMessageParam[] [ { role: user, content: userMessage }, ]; const response await openai.chat.completions.create({ model: gpt-4o-mini, messages, tools: openaiTools, }); const assistantMessage response.choices[0].message; if (assistantMessage.tool_calls assistantMessage.tool_calls.length 0) { const toolCall assistantMessage.tool_calls[0]; const toolName toolCall.function.name; const args JSON.parse(toolCall.function.arguments); const mcpResult await mcpClient.callTool({ name: toolName, arguments: args, }); messages.push(assistantMessage); messages.push({ role: tool, tool_call_id: toolCall.id, content: JSON.stringify(mcpResult.content), }); const finalResponse await openai.chat.completions.create({ model: gpt-4o-mini, messages, }); console.log(finalResponse.choices[0].message.content); } await mcpClient.close();这段代码的核心逻辑从 MCP Server 拉取工具列表。把工具列表映射为 OpenAI 可识别的 tools 参数。发送用户消息模型返回 tool call。通过 MCP Client 调用真实工具。把工具结果作为tool角色消息回传给模型。模型生成最终回答。如果你使用的是较新的 Responses API代码结构会稍有不同但整体思路一样模型无法直接访问外部网页必须通过工具调用间接获取数据。注意OPENAI_API_KEY不要写死在代码里也不要在演示录屏中暴露。使用环境变量加载即可。比赛提交源码时要注意确认 API Key 是否被误提交到 Git 仓库。5.4 没有 OpenAI API Key 时如何验证如果暂时没有 OpenAI API Key或不方便在开发环境使用仍然可以验证 MCP Server 是否工作正常使用 MCP 官方调试客户端直接查看tools/list和tools/call的返回结果。写一个本地脚本手动调用callTool方法传入示例参数确认工具逻辑正确。使用支持 MCP 的开源客户端工具进行联调。只有接入 OpenAI 是为了验证“模型是否能在无人干预的情况下调用工具”。如果这一步暂时做不了可以先保证 MCP Server 自身质量等环境允许时再补闭环演示。6. 运行验证与结果分析6.1 验证步骤建议一个完整的黑客松项目至少要有三个层次的验证验证层次验证内容验证方式工具层工具能否正确抓取并解析网页直接调用callTool检查返回 JSON协议层MCP Server 与客户端通信是否正常使用 MCP Client 连接查看工具列表模型层模型能否正确决定调用并生成最终回答通过 OpenAI 接入代码完成端到端对话6.2 预期结果与异常结果直接调用extract_article传入https://example.com正常返回结果类似{ title: Example Domain, content: Example Domain This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission., links: [], url: https://example.com }如果目标网页抓取失败可能返回{ content: [ { type: text, text: 提取失败HTTP 404: https://example.com/not-exist } ], isError: true }在模型层验证时建议提前准备几个测试 URL包括一个正常文章页验证提取效果。一个会跳转的 URL验证重定向处理。一个超时或失败的 URL验证错误信息是否清晰。6.3 演示脚本要提前排练黑客松现场演示时间有限不要依赖现场输入 URL 和实时调试。建议提前准备一份演示脚本包含预置的用户提问。每个提问预期展示的效果。如果工具调用失败如何自然过渡到下一步。展示 MCP Server 源码中的关键逻辑。一个稳定的演示路径是先展示工具层调用结果再展示模型层对话效果最后展示源码片段和架构图。这样即使现场网络不好也能通过工具层截图和源码展示说明项目价值。7. 常见问题排查链路7.1 MCP Server 启动后没有输出现象运行npm run dev后控制台没有任何日志。可能原因stdio 模式下Server 只有收到客户端请求才会输出没有日志是正常的。Server 启动时 crash错误被吞掉。检查方式先直接用 Node 运行编译后的文件看是否有报错。用测试客户端连接如果连接失败会看到错误信息。解决方案在入口文件开头加一行日志确认进程启动例如console.error(server started)。注意 stdio 模式下console.log会污染协议通道调试日志建议用console.error输出到 stderr。7.2 模型没有返回 tool call现象接入 OpenAI 后模型直接回答“我无法访问网页”没有调用工具。可能原因工具描述不清晰模型不确定该调用哪个工具。tools参数没有正确传入。模型版本不支持 function calling。检查方式打印发送给 OpenAI 的完整请求体确认 tools 参数非空。使用一个明确要求调用工具的用户提问例如“请用 extract_article 工具提取一下 https://example.com 的内容”。解决方案在用户提示词中明确要求使用工具降低模型调用门槛。确认 API 请求中tools字段格式正确。7.3 工具调用成功但返回结果被模型忽略现象MCP Server 正常返回内容但模型最终回答与工具结果无关。可能原因tool角色的消息结构不正确。tool_call_id与模型返回的 id 不匹配。把工具结果放到了错误的 messages 顺序中。检查方式打印 messages 数组确认 role、tool_call_id、content 三者的对应关系。参考 OpenAI 官方 tool calling 示例逐项比对。解决方案正确实现assistantMessage - tool result - final response的顺序。不要把工具结果直接追加为普通 user 消息。7.4 网页抓取超时或返回 403现象本地测试正常但部署后抓取某些网站失败。可能原因目标站对非浏览器请求有限制。网络环境与本地不一致。没有设置超时导致请求挂起。检查方式先用 curl 测试目标 URL确认是否可访问。查看 MCP Server 日志中的超时时间和状态码。解决方案增加超时和重试机制。合理设置 User-Agent。对失败请求返回可读的错误信息。注意不要为了抓取网页而绕过网站的反爬机制或访问权限限制。黑客松项目应使用公开可访问的数据源并遵守目标网站的 robots 协议和使用条款。8. 参赛检查清单与扩展方向8.1 提交前检查清单黑客松项目的提交物通常不只是代码还包括 Readme、演示视频和在线体验地址。建议在提交前逐项确认检查项具体要求是否完成MCP Server 可运行提供明确的启动命令工具逻辑完整每个工具都有输入验证和异常处理OpenAI 接入可用演示环境能跑通模型调用工具的闭环演示视频录制 3 到 5 分钟包含关键效果README 清晰包含项目背景、启动方式、目录结构、演示流程环境变量处理API Key 等敏感信息不要提交到仓库数据源合规使用公开数据源遵守使用条款错误处理展示失败场景时项目是否给出友好提示8.2 可以继续扩展的 Web 场景如果这个 Demo 已经跑通可以考虑在黑客松中扩展以下方向Web 搜索工具接入公开搜索 API模型先搜索再回答。RSS 聚合工具把多个订阅源聚合后返回最近文章。表单填写工具结合浏览器自动化库让模型完成表单提交。SEO 分析工具输入 URL返回标题长度、关键词密度、链接数量。内容比较工具抓取多个页面输出对比结果。扩展时优先级建议为先做用户需求真实的场景再做技术上有挑战的场景。黑客松评审更愿意看到一个能在 5 分钟内讲清楚、真实解决网页信息获取问题的作品而不是一个堆了一堆工具但每个都不稳定的项目。8.3 学习路径建议如果对 MCP 还不太熟建议按以下顺序学习先读 MCP 官方规格说明中的工具调用部分理解 JSON-RPC 消息格式。用官方 SDK 实现一个只返回固定数据的 Hello World Server。把 Server 接入 OpenAI完成模型到工具的调用闭环。再加入真实的网页抓取逻辑。再考虑部署到远程服务使用 Streamable HTTP 传输。这套路径的核心是先跑通协议再叠加业务逻辑。能在黑客松结束前掌握前四步就足以完成一个高质量参赛作品。MCP 生态仍处于快速演进阶段Web 场景的 MCP 工具标准化程度还不高现在动手实践正好可以踩在趋势的前面。
在今年的 AI 应用开发方向里MCPModel Context Protocol已经成为连接模型与外部世界的重要协议。近期 OpenAI 联合多家平台推出 WebMCP 黑客松核心方向就是把 MCP 的应用场景推到 Web 领域让模型不仅能聊天还能读取网页、调用 Web 工具、操作浏览器行为。对开发者来说这是一个值得投入时间去做的方向一方面 MCP 的生态还在快速成形另一方面 Web 场景的数据获取、信息聚合、内容处理天然适合做成可复用的 MCP Server。这篇文章不是新闻稿而是一份面向参赛者的实战教程。会先讲清楚 WebMCP 黑客松到底在考察什么能力再花较大篇幅解释 MCP 的工作机制然后从零实现一个“网页内容提取与摘要”MCP Server并把它接入 OpenAI API 完成验证。最后补充常见问题、排查链路和参赛提交时的检查清单。学完后你会有一个可以直接演示的 Web 场景 MCP 项目也能理解如何把其他网页能力扩展成更多 MCP 工具。1. WebMCP 黑客松在考察什么能力1.1 从主题拆分理解黑客松目标WebMCP 这个名称可以拆成两个部分Web代表 Web 场景包括网页抓取、信息提取、搜索、RSS 聚合、浏览器自动化、表单填写、内容审核等。MCP代表 Model Context Protocol是 AI 模型与外部工具、数据源之间的标准化通信协议。把两者组合起来WebMCP 黑客松希望参赛者解决的问题是如何让大模型更可靠地获取 Web 信息并基于这些信息完成真实任务。对开发者来说这个方向意味着参赛作品需要同时具备两个能力模型侧能够理解用户意图决定是否调用工具、调用哪个工具、传入什么参数。Web 侧MCP Server 能够真正获取网页数据、解析结构、返回模型可以理解的标准化结果。如果只是写一个普通的网页爬虫缺少 MCP 封装模型无法直接调用如果只是写一个 MCP Server但只返回写死的模拟数据又经不起现场演示的考验。真正有竞争力的作品应该是模型、工具、Web 数据三者形成一个完整闭环。1.2 参赛者需要提前准备哪些基础能力从准备参赛的角度看建议在动手前先确认自己具备以下基础能力能力方向具体内容建议掌握程度MCP 协议基础了解 client、server、tool、resource、prompt 的关系至少要理解 tool 的调用流程开发语言TypeScript、Python、Go 任选一种能独立完成一个 Server 项目Web 数据处理HTTP 请求、HTML 解析、JSON 序列化能处理常见网页结构变化AI API 调用OpenAI API 的认证、请求格式、工具调用机制能跑通一个最小闭环调试能力查看日志、模拟 MCP 请求、分析返回 JSON能定位 tool 调用失败原因如果这些能力还有欠缺也不用等完全准备好再参赛。可以选择一个最小的 Web 场景先实现一个只有两三个工具的 MCP Server把闭环跑通后再扩展。黑客松评审更看重完整度和真实可用性而不是工具数量。1.3 为什么 Web 场景特别适合 MCPMCP 的核心价值在于标准化。一个 MCP Server 可以被任意支持 MCP 的客户端调用不需要为每个 Agent 重写一套对接代码。而 Web 场景恰好是碎片化最严重的地方不同网站结构不同、接口协议不同、数据格式不同如果没有统一封装模型每接一个站点都要定制一套逻辑。通过 MCP可以把这些差异收敛到 Server 内部。对模型来说它只看到几个标准工具比如fetch_page、search_web、extract_article。实际抓取、解析、清洗逻辑全部封装在 Server 里。这样做的收益很明显模型不需要知道网页是 HTML 还是 JSON。网站改版时只需要修改 Server 的解析逻辑不需要改 Agent。同一套 Server 可以被多个 AI 应用复用。这也是 WebMCP 黑客松最有意义的地方解决 AI 与 Web 之间“最后一公里”的接入问题。2. MCP 的核心机制模型如何调用一个工具2.1 从一次用户提问看完整调用链很多人第一次接触 MCP 时容易把它当成一个具体的库或框架。实际上 MCP 是一套基于 JSON-RPC 的协议规范核心要解决的问题是AI 应用客户端如何与外部能力提供方服务端对话。一次典型的 MCP 工具调用流程如下用户在 AI 聊天界面提问“帮我提取这个网页的标题和正文摘要https://example.com/article”。客户端把用户消息发送给模型。模型判断需要调用fetch_page工具并返回一个工具调用请求包含工具名和参数。客户端收到请求后通过 MCP 协议向 MCP Server 发起tools/call请求。MCP Server 执行真实的网页抓取和解析返回结构化结果。客户端把工具结果回传给模型。模型基于工具结果生成最终回复。这个过程看起来简单但协议层面对每一步都有严格定义。2.2 MCP 消息示例初始化、工具发现、工具调用在 MCP 协议中客户端和 Server 之间通过 JSON-RPC 消息通信。下面是最关键的三个阶段。第一个阶段是初始化。客户端发送initialize请求双方确认协议版本和能力范围{ jsonrpc: 2.0, id: 1, method: initialize, params: { protocolVersion: 2025-03-26, capabilities: {}, clientInfo: { name: webmcp-demo-client, version: 1.0.0 } } }第二个阶段是工具发现。客户端调用tools/list获取 Server 支持的工具列表{ jsonrpc: 2.0, id: 2, method: tools/list }Server 返回的工具描述格式如下{ jsonrpc: 2.0, id: 2, result: { tools: [ { name: fetch_page, description: 抓取指定 URL 的网页内容并返回清理后的文本, inputSchema: { type: object, properties: { url: { type: string, description: 需要抓取的网页地址 }, maxLength: { type: integer, description: 返回文本的最大长度默认 5000 } }, required: [url] } } ] } }第三个阶段是工具调用。模型决定调用工具后客户端发送tools/call{ jsonrpc: 2.0, id: 3, method: tools/call, params: { name: fetch_page, arguments: { url: https://example.com/article, maxLength: 3000 } } }Server 执行完真实抓取后返回内容{ jsonrpc: 2.0, id: 3, result: { content: [ { type: text, text: 标题Example Article\n正文This is the main content... } ], isError: false } }从这三个消息可以看出MCP 的设计非常务实模型不感知具体实现Server 只暴露标准接口客户端负责两者之间的调度。2.3 三种常见的 MCP Server 传输方式MCP Server 可以通过不同方式与客户端通信常见的有三种传输方式适用场景特点stdio本地开发、单机调用通过标准输入输出通信适合 CLI 工具Streamable HTTP远程服务、多客户端共享通过 HTTP 端点通信适合部署到服务器WebSocket浏览器端、实时交互适合需要持续连接的场景在黑客松演示环境中本地开发推荐先用 stdio 跑通逻辑部署演示环境时再迁移到 Streamable HTTP。这样能减少初期调试成本又不影响最终展示。注意不要一开始就追求完整的协议实现。先保证一个工具能被客户端调用成功再逐步补齐其他能力开发效率会高很多。3. 环境准备搭建一个 MCP Server 开发环境3.1 选择语言与核心依赖实现 MCP Server 可以使用官方 SDK也可以自己实现 JSON-RPC 通信。对于黑客松项目推荐直接使用官方 SDK把精力放在业务逻辑上。以 TypeScript 为例需要准备以下依赖{ name: webmcp-demo-server, version: 0.1.0, type: module, dependencies: { modelcontextprotocol/sdk: ^1.0.0, cheerio: ^1.0.0, undici: ^6.0.0 }, devDependencies: { typescript: ^5.5.0, tsx: ^4.0.0, types/node: ^20.0.0 }, scripts: { dev: tsx src/index.ts, build: tsc, start: node dist/index.js } }依赖解析modelcontextprotocol/sdk官方 MCP SDK提供 Server、工具注册和传输层封装。cheerio服务端 HTML 解析库使用类似 jQuery 的语法提取网页元素。undici现代 HTTP 客户端用于发起网页请求。如果使用 Python可以改用mcp官方 SDK 和httpx、beautifulsoup4。选型时不需要纠结语言重点是能快速完成迭代。3.2 项目目录结构一个清晰的目录结构可以帮助后续扩展。webmcp-demo-server/ ├── src/ │ ├── index.ts # 入口文件初始化 MCP Server │ ├── tools/ │ │ ├── fetchPage.ts # 网页抓取工具 │ │ └── extractArticle.ts # 正文提取工具 │ ├── utils/ │ │ ├── http.ts # HTTP 请求封装 │ │ └── html.ts # HTML 清理与转换 │ └── types.ts # 类型定义 ├── package.json ├── tsconfig.json └── README.md在黑客松场景下目录不需要太重。但如果计划在赛后才继续迭代或要提交完整源码建议从一开始就保持结构清晰。3.3 环境检查要点开始编码前建议运行以下命令确认环境正常node -v npm -v如果是 Python 环境检查python --version pip --version同时确认网络环境可以访问目标网页。由于网页数据源不同比赛现场网络可能与本地环境不一致抓取逻辑最好设置超时和失败重试避免演示时因为网络波动中断。4. 实现一个 Web 场景 MCP Server网页内容提取与摘要4.1 工具设计输入、输出、边界这个 Demo 要实现两个工具fetch_page抓取网页把 HTML 转换为纯文本。extract_article抓取网页提取标题、正文段落、链接列表。工具设计时就要考虑模型调用时的易用性。输入参数要尽量少并且每个参数都要有清晰的 description。模型依赖 description 决定是否调用工具写得太模糊会导致调用错误。参数设计如下参数名类型必填说明urlstring是目标网页地址必须带协议maxLengthinteger否返回文本最大长度默认 5000includeLinksboolean否是否提取页内链接默认 false4.2 HTTP 请求封装先实现一个带超时和重试的 HTTP 请求工具。网页抓取最容易遇到的问题就是目标站响应慢或者直接超时因此这里要设置合理的超时时间。// src/utils/http.ts import { request } from undici; export interface FetchOptions { timeout?: number; maxRedirects?: number; } export async function fetchHtml(url: string, options: FetchOptions {}): Promisestring { const timeout options.timeout ?? 10000; const maxRedirects options.maxRedirects ?? 5; const response await request(url, { method: GET, headers: { User-Agent: webmcp-demo-server/0.1.0, Accept: text/html,application/xhtmlxml, }, maxRedirections: maxRedirects, headersTimeout: timeout, bodyTimeout: timeout, }); if (response.statusCode 400) { throw new Error(HTTP ${response.statusCode}: ${url}); } const contentType response.headers[content-type] ?? ; if (!contentType.includes(text/html) !contentType.includes(application/xhtmlxml)) { // 有些网站返回 JSON 或图片这里只处理 HTML } return await response.body.text(); }关键点设置User-Agent可以降低被目标站拒绝的概率但不要伪装成浏览器保持诚实无害的标识即可。maxRedirections控制重定向次数防止死循环。超时分为headersTimeout和bodyTimeout比单一超时更精细。4.3 HTML 清理与文本转换抓取到的 HTML 往往包含大量脚本、样式、导航链接。直接返回给模型会浪费 token也不利于理解。所以要做两层处理先去除无用节点再转换为纯文本。// src/utils/html.ts import * as cheerio from cheerio; export function htmlToText(html: string, maxLength: number): string { const $ cheerio.load(html); // 移除脚本、样式、导航、广告等噪声节点 $(script, style, noscript, iframe, nav, footer, aside).remove(); // 提取主要区域的文本 const bodyText $(body).text(); // 合并连续空白 const cleaned bodyText.replace(/\s/g, ).trim(); return cleaned.length maxLength ? cleaned.slice(0, maxLength) ... : cleaned; }这段代码的重点是remove方法。网页中信息密度最低的节点就是 script 和 style先把它们移除后续文本质量会好很多。4.4 正文提取工具实现extract_article工具比fetch_page更进一步它返回结构化数据标题、内容、链接。// src/tools/extractArticle.ts import * as cheerio from cheerio; import { fetchHtml } from ../utils/http.js; import { htmlToText } from ../utils/html.js; export interface ExtractArticleParams { url: string; maxLength?: number; includeLinks?: boolean; } export async function extractArticle(params: ExtractArticleParams) { const maxLength params.maxLength ?? 5000; const includeLinks params.includeLinks ?? false; const html await fetchHtml(params.url); const $ cheerio.load(html); const title $(title).text().trim() || $(h1).first().text().trim() || ; const content htmlToText(html, maxLength); let links: string[] []; if (includeLinks) { links $(a[href]) .map((_, el) $(el).attr(href)) .get() .slice(0, 20); } return { title, content, links, url: params.url, }; }这里有意使用title标签优先、h1标签兜底的策略。很多网页 h1 是图片或装饰文案title 通常更可靠。4.5 注册工具到 MCP Server接下来把工具注册到 MCP Server。SDK 版本不同注册方式略有差异但核心思路一致给 Server 添加工具定义和处理器。// src/index.ts import { McpServer } from modelcontextprotocol/sdk/server/mcp.js; import { StdioServerTransport } from modelcontextprotocol/sdk/server/stdio.js; import { fetchPage } from ./tools/fetchPage.js; import { extractArticle } from ./tools/extractArticle.js; const server new McpServer({ name: webmcp-demo-server, version: 0.1.0, }); server.registerTool( fetch_page, { description: 抓取指定 URL 的网页内容并返回清理后的纯文本, inputSchema: { type: object, properties: { url: { type: string, description: 需要抓取的网页地址 }, maxLength: { type: integer, description: 返回文本最长长度默认 5000 }, }, required: [url], }, }, async (args: any) { try { const result await fetchPage(args); return { content: [{ type: text, text: JSON.stringify(result) }], }; } catch (error: any) { return { content: [{ type: text, text: 抓取失败${error.message} }], isError: true, }; } } ); server.registerTool( extract_article, { description: 抓取网页并提取标题、正文和链接适合文章类页面, inputSchema: { type: object, properties: { url: { type: string, description: 文章页面地址 }, maxLength: { type: integer, description: 正文最长长度默认 5000 }, includeLinks: { type: boolean, description: 是否提取页内链接默认 false }, }, required: [url], }, }, async (args: any) { try { const result await extractArticle(args); return { content: [{ type: text, text: JSON.stringify(result) }], }; } catch (error: any) { return { content: [{ type: text, text: 提取失败${error.message} }], isError: true, }; } } ); const transport new StdioServerTransport(); await server.connect(transport);这里要注意工具返回结构。MCP 的content数组可以是多个文本块或图片块。黑客松项目中最简单可靠的做法就是返回 JSON 字符串。这样模型能拿到结构化信息同时避免复杂的资源类型。4.6 运行 Server 并验证工具列表启动 Servernpm run dev启动后 MCP SDK 会在 stdio 上监听消息。此时没有客户端连接所以不会有输出这是正常的。可以用一个简单的 MCP 客户端或调试工具来验证工具列表是否注册成功。如果使用mcp-remote或其他 MCP 客户端可以参考官方调试方式。在本地验证阶段一个更直接的方法是写一个临时 Node 脚本直接用 SDK 的Client连接 Server// scripts/list-tools.ts import { Client } from modelcontextprotocol/sdk/client/index.js; import { StdioClientTransport } from modelcontextprotocol/sdk/client/stdio.js; const transport new StdioClientTransport({ command: npm, args: [run, dev], }); const client new Client({ name: test-client, version: 1.0.0 }); await client.connect(transport); const tools await client.listTools(); console.log(JSON.stringify(tools, null, 2)); await client.close();运行npx tsx scripts/list-tools.ts预期输出中应该能看到fetch_page和extract_article两个工具定义。5. 接入 OpenAI让模型真正调用 Web 工具5.1 OpenAI API 对 MCP 的支持方式OpenAI 在 2025 年开始支持 MCP 协议但不同版本的 API 和 SDK 接入方式有差异。如果使用较新的 Responses API 或支持 MCP 的 SDK可以直接注册 MCP Server。如果使用传统 Chat Completions API则可以通过 tool calling 机制手动实现类似效果。考虑到黑客松现场的兼容性这里采用一种稳妥方案不依赖 SDK 的 MCP 自动发现而是手动把工具列表转换成 OpenAI 的tools参数由模型决定是否调用。当模型返回 tool call 时再把工具名和参数转发给 MCP Server拿到结果后回传给模型。这种方式对 MCP 协议没有任何侵入同时保证了最终用户看到的效果与原生 MCP 一致。5.2 工具描述转换OpenAI 的 function calling 工具格式与 MCP 的 inputSchema 非常接近可以直接做一个映射。假设我们只有一个extract_article工具转换后的 OpenAI tools 定义如下{ type: function, function: { name: extract_article, description: 抓取网页并提取标题、正文和链接适合文章类页面, parameters: { type: object, properties: { url: { type: string, description: 文章页面地址 }, maxLength: { type: integer, description: 正文最长长度默认 5000 }, includeLinks: { type: boolean, description: 是否提取页内链接默认 false } }, required: [url] } } }这里不需要做复杂转换因为 MCP 的inputSchema本身就是 JSON Schema和 OpenAI 的parameters结构基本一致。5.3 完整调用闭环下面代码演示了如何把 OpenAI API 和 MCP Server 连接起来。import OpenAI from openai; import { Client } from modelcontextprotocol/sdk/client/index.js; import { StdioClientTransport } from modelcontextprotocol/sdk/client/stdio.js; const openai new OpenAI({ apiKey: process.env.OPENAI_API_KEY, }); const mcpTransport new StdioClientTransport({ command: npm, args: [run, dev], }); const mcpClient new Client({ name: openai-webmcp-bridge, version: 1.0.0 }); await mcpClient.connect(mcpTransport); const mcpTools await mcpClient.listTools(); const openaiTools mcpTools.tools.map((tool) ({ type: function as const, function: { name: tool.name, description: tool.description, parameters: tool.inputSchema, }, })); const userMessage 提取 https://example.com 的标题和正文摘要; const messages: OpenAI.Chat.ChatCompletionMessageParam[] [ { role: user, content: userMessage }, ]; const response await openai.chat.completions.create({ model: gpt-4o-mini, messages, tools: openaiTools, }); const assistantMessage response.choices[0].message; if (assistantMessage.tool_calls assistantMessage.tool_calls.length 0) { const toolCall assistantMessage.tool_calls[0]; const toolName toolCall.function.name; const args JSON.parse(toolCall.function.arguments); const mcpResult await mcpClient.callTool({ name: toolName, arguments: args, }); messages.push(assistantMessage); messages.push({ role: tool, tool_call_id: toolCall.id, content: JSON.stringify(mcpResult.content), }); const finalResponse await openai.chat.completions.create({ model: gpt-4o-mini, messages, }); console.log(finalResponse.choices[0].message.content); } await mcpClient.close();这段代码的核心逻辑从 MCP Server 拉取工具列表。把工具列表映射为 OpenAI 可识别的 tools 参数。发送用户消息模型返回 tool call。通过 MCP Client 调用真实工具。把工具结果作为tool角色消息回传给模型。模型生成最终回答。如果你使用的是较新的 Responses API代码结构会稍有不同但整体思路一样模型无法直接访问外部网页必须通过工具调用间接获取数据。注意OPENAI_API_KEY不要写死在代码里也不要在演示录屏中暴露。使用环境变量加载即可。比赛提交源码时要注意确认 API Key 是否被误提交到 Git 仓库。5.4 没有 OpenAI API Key 时如何验证如果暂时没有 OpenAI API Key或不方便在开发环境使用仍然可以验证 MCP Server 是否工作正常使用 MCP 官方调试客户端直接查看tools/list和tools/call的返回结果。写一个本地脚本手动调用callTool方法传入示例参数确认工具逻辑正确。使用支持 MCP 的开源客户端工具进行联调。只有接入 OpenAI 是为了验证“模型是否能在无人干预的情况下调用工具”。如果这一步暂时做不了可以先保证 MCP Server 自身质量等环境允许时再补闭环演示。6. 运行验证与结果分析6.1 验证步骤建议一个完整的黑客松项目至少要有三个层次的验证验证层次验证内容验证方式工具层工具能否正确抓取并解析网页直接调用callTool检查返回 JSON协议层MCP Server 与客户端通信是否正常使用 MCP Client 连接查看工具列表模型层模型能否正确决定调用并生成最终回答通过 OpenAI 接入代码完成端到端对话6.2 预期结果与异常结果直接调用extract_article传入https://example.com正常返回结果类似{ title: Example Domain, content: Example Domain This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission., links: [], url: https://example.com }如果目标网页抓取失败可能返回{ content: [ { type: text, text: 提取失败HTTP 404: https://example.com/not-exist } ], isError: true }在模型层验证时建议提前准备几个测试 URL包括一个正常文章页验证提取效果。一个会跳转的 URL验证重定向处理。一个超时或失败的 URL验证错误信息是否清晰。6.3 演示脚本要提前排练黑客松现场演示时间有限不要依赖现场输入 URL 和实时调试。建议提前准备一份演示脚本包含预置的用户提问。每个提问预期展示的效果。如果工具调用失败如何自然过渡到下一步。展示 MCP Server 源码中的关键逻辑。一个稳定的演示路径是先展示工具层调用结果再展示模型层对话效果最后展示源码片段和架构图。这样即使现场网络不好也能通过工具层截图和源码展示说明项目价值。7. 常见问题排查链路7.1 MCP Server 启动后没有输出现象运行npm run dev后控制台没有任何日志。可能原因stdio 模式下Server 只有收到客户端请求才会输出没有日志是正常的。Server 启动时 crash错误被吞掉。检查方式先直接用 Node 运行编译后的文件看是否有报错。用测试客户端连接如果连接失败会看到错误信息。解决方案在入口文件开头加一行日志确认进程启动例如console.error(server started)。注意 stdio 模式下console.log会污染协议通道调试日志建议用console.error输出到 stderr。7.2 模型没有返回 tool call现象接入 OpenAI 后模型直接回答“我无法访问网页”没有调用工具。可能原因工具描述不清晰模型不确定该调用哪个工具。tools参数没有正确传入。模型版本不支持 function calling。检查方式打印发送给 OpenAI 的完整请求体确认 tools 参数非空。使用一个明确要求调用工具的用户提问例如“请用 extract_article 工具提取一下 https://example.com 的内容”。解决方案在用户提示词中明确要求使用工具降低模型调用门槛。确认 API 请求中tools字段格式正确。7.3 工具调用成功但返回结果被模型忽略现象MCP Server 正常返回内容但模型最终回答与工具结果无关。可能原因tool角色的消息结构不正确。tool_call_id与模型返回的 id 不匹配。把工具结果放到了错误的 messages 顺序中。检查方式打印 messages 数组确认 role、tool_call_id、content 三者的对应关系。参考 OpenAI 官方 tool calling 示例逐项比对。解决方案正确实现assistantMessage - tool result - final response的顺序。不要把工具结果直接追加为普通 user 消息。7.4 网页抓取超时或返回 403现象本地测试正常但部署后抓取某些网站失败。可能原因目标站对非浏览器请求有限制。网络环境与本地不一致。没有设置超时导致请求挂起。检查方式先用 curl 测试目标 URL确认是否可访问。查看 MCP Server 日志中的超时时间和状态码。解决方案增加超时和重试机制。合理设置 User-Agent。对失败请求返回可读的错误信息。注意不要为了抓取网页而绕过网站的反爬机制或访问权限限制。黑客松项目应使用公开可访问的数据源并遵守目标网站的 robots 协议和使用条款。8. 参赛检查清单与扩展方向8.1 提交前检查清单黑客松项目的提交物通常不只是代码还包括 Readme、演示视频和在线体验地址。建议在提交前逐项确认检查项具体要求是否完成MCP Server 可运行提供明确的启动命令工具逻辑完整每个工具都有输入验证和异常处理OpenAI 接入可用演示环境能跑通模型调用工具的闭环演示视频录制 3 到 5 分钟包含关键效果README 清晰包含项目背景、启动方式、目录结构、演示流程环境变量处理API Key 等敏感信息不要提交到仓库数据源合规使用公开数据源遵守使用条款错误处理展示失败场景时项目是否给出友好提示8.2 可以继续扩展的 Web 场景如果这个 Demo 已经跑通可以考虑在黑客松中扩展以下方向Web 搜索工具接入公开搜索 API模型先搜索再回答。RSS 聚合工具把多个订阅源聚合后返回最近文章。表单填写工具结合浏览器自动化库让模型完成表单提交。SEO 分析工具输入 URL返回标题长度、关键词密度、链接数量。内容比较工具抓取多个页面输出对比结果。扩展时优先级建议为先做用户需求真实的场景再做技术上有挑战的场景。黑客松评审更愿意看到一个能在 5 分钟内讲清楚、真实解决网页信息获取问题的作品而不是一个堆了一堆工具但每个都不稳定的项目。8.3 学习路径建议如果对 MCP 还不太熟建议按以下顺序学习先读 MCP 官方规格说明中的工具调用部分理解 JSON-RPC 消息格式。用官方 SDK 实现一个只返回固定数据的 Hello World Server。把 Server 接入 OpenAI完成模型到工具的调用闭环。再加入真实的网页抓取逻辑。再考虑部署到远程服务使用 Streamable HTTP 传输。这套路径的核心是先跑通协议再叠加业务逻辑。能在黑客松结束前掌握前四步就足以完成一个高质量参赛作品。MCP 生态仍处于快速演进阶段Web 场景的 MCP 工具标准化程度还不高现在动手实践正好可以踩在趋势的前面。
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
