首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >MCP TypeScript SDK 初体验:挑战快速搭建一个 AI 应用!

MCP TypeScript SDK 初体验:挑战快速搭建一个 AI 应用!

作者头像
萌萌哒草头将军
发布于 2025-04-11 08:25:51
发布于 2025-04-11 08:25:51
1.1K015
代码可运行
举报
文章被收录于专栏:前端框架前端框架
运行总次数:15
代码可运行

前言

这篇文章记录一下我用 MCP TypeScript SDK 实现一个自包含的 AI 聊天应用的过程:内部包含 MCP 服务器提供上下文,客户端拿上下文再去调 LLM 接口拿回答!

正文

MCP 是什么?

简单说,MCP 是一个给 AI 应用提供上下文的标准协议。你可以把它理解成一个服务标准,它规定了“资源”和“工具”的接口规范,然后通过客户端连接这些接口,就可以组合出丰富的上下文数据。比如说资源可以是“当前时间”、“用户历史记录”,工具可以是“数据库搜索”、“调用外部 API”。

它采用的是客户端-服务器架构,Server 暴露上下文能力,Client 拉取这些上下文,再拿去调语言模型生成回答,而 Transport 负责 ServerClient 的通信部分!

MCP 基本架构
MCP 基本架构

MCP 基本架构

其中图片中的 Transport 层还分为:

  • StdioServerTransport:用于 CLI 工具对接 stdin/stdout
  • SSEServerTransport:用于HTTP通信
  • StdioClientTransport:客户端以子进程方式拉起服务端,这个不常用

另外,Server 层分为:

  • Server 基本类:原始的类,适合自己定制功能!
  • McpServer基于Server 封装好了可以快速使用的方法!

注意:基本类和封装类的接口有很大不同,具体请参看 README 文件!

安装依赖

用的是官方的 TypeScript SDK

仓库:https://github.com/modelcontextprotocol/typescript-sdk

官网:https://modelcontextprotocol.io

代码语言:javascript
代码运行次数:1
运行
AI代码解释
复制
npm install @modelcontextprotocol/sdk axios

DeepSeek 没有官方 SDK,用的是 HTTP API,所以需要 axios

记得把 API Key 放到 .env 或直接配置成环境变量,我用的 DEEPSEEK_API_KEY

实现一个 McpServer

我们先实现一个本地 McpServer,实现两个东西:

  • 当前时间(资源)
  • 本地“知识库”搜索(工具)

代码如下:

代码语言:javascript
代码运行次数:11
运行
AI代码解释
复制
import {
  McpServer,
  ResourceTemplate,
} from"@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from"@modelcontextprotocol/sdk/server/stdio.js";
import { z } from"zod";

const facts = [
"公理1: 生存是文明的第一需要.",
"公理2: 文明不断增长和扩张,但宇宙中的物质总量保持不变.",
].map((f) => f.toLowerCase());

const server = new McpServer({
  name: "mcp-cli-server",
  version: "1.0.0",
});

// 使用 Zod 定义工具的输入模式
server.tool(
"search_local_database",
  z.object({ query: z.string() }),
async ({ query }) => {
    console.log("Tool called with query:", query);
    const queryTerms = query.toLowerCase().split(/\s+/);
    const results = facts.filter((fact) =>
      queryTerms.some((term) => fact.includes(term))
    );
    return {
      content: [
        {
          type: "text",
          text: results.length === 0 ? "未找到相关公理" : results.join("\n"),
        },
      ],
    };
  }
);

// 定义资源
server.resource(
"current_time",
new ResourceTemplate("time://current", { list: undefined }),
async (uri) => ({
    contents: [{ uri: uri.href, text: newDate().toLocaleString() }],
  })
);

await server.connect(new StdioServerTransport());
console.log("Server is running...");

这样一来,我们的服务端就能通过 MCP 协议对外暴露两个上下文能力了。

配置 MCP Client

MCP 的客户端用来连接服务器并获取资源或调用工具:

代码语言:javascript
代码运行次数:2
运行
AI代码解释
复制
// src/client.js;
import { Client } from"@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from"@modelcontextprotocol/sdk/client/stdio.js";

exportasyncfunction createClient() {
const client = new Client({
    name: "Demo",
    version: "1.0.0",
  });

const transport = new StdioClientTransport({
    command: "node",
    args: ["src/server.js"],
  });

try {
    await client.connect(transport);
    console.log("Client connected successfully");
  } catch (err) {
    console.error("Client connection failed:", err);
    throw err;
  }

// 可选:添加客户端方法调用后的调试
return client;
}

连上之后,我们就可以开始调用服务端的资源和工具了。

获取上下文

我们设定一个简单的逻辑:每次用户提问,客户端都会获取当前时间;如果问题里包含 公理,那就调用搜索工具查一下本地知识库:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
async function getContext(client, question) {
let currentTime = "";
let additionalContext = "";

try {
    const resources = await client.readResource(
      { uri: "time://current" },
      { timeout: 15000 }
    ); // 增加超时时间
    console.log("Resources response:", resources);
    currentTime = resources.contents[0]?.text ||
      newDate().toLocaleString(); // 注意:resources 直接包含 contents
  } catch (err) {
    console.error("Resource read error:", err);
    currentTime = newDate().toLocaleString();
  }

if (question.toLowerCase().includes("公理")) {
    console.log("Searching for axioms...", question);
    try {
      const result = await client.getPrompt({
        name: "search_local_database",
        arguments: { query: question },
      });
      console.log("Tool result:", result);
      additionalContext = result?.[0]?.text || "No results found.";
    } catch (err) {
      console.error("Tool call error:", err);
      additionalContext = "Error searching database.";
    }
  }

return { currentTime, additionalContext };
}
集成 DeepSeek,开始问答

DeepSeek 使用的是标准 OpenAI 接口风格,HTTP POST 请求即可。这里我们用 axios 调用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import axios from"axios";

asyncfunction askLLM(prompt) {
try {
    console.log("Calling LLM with prompt:", prompt);
    const res = await axios.post(
      "https://api.deepseek.com/chat/completions",
      {
        model: "deepseek-chat",
        messages: [{ role: "user", content: prompt }],
        max_tokens: 2048,
        stream: false,
        temperature: 0.7,
      },
      {
        headers: {
          Authorization: `Bearer ${process.env.DEEPSEEK_API_KEY}`,
          "Content-Type": "application/json",
        },
        timeout: 1000000,
      }
    );
    console.log("LLM response:", res.data);
    return res.data.choices[0].message.content;
  } catch (err) {
    console.error("LLM error:", err);
    return"Error calling LLM.";
  }
}

完整的代码,包含用命令行做一个简单的交互界面:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// src/index.js
import readline from"readline";
import axios from"axios";

asyncfunction askLLM(prompt) {
try {
    console.log("Calling LLM with prompt:", prompt);
    const res = await axios.post(
      "https://api.deepseek.com/chat/completions",
      {
        model: "deepseek-chat",
        messages: [{ role: "user", content: prompt }],
        max_tokens: 2048,
        stream: false,
        temperature: 0.7,
      },
      {
        headers: {
          Authorization: `Bearer ${process.env.DEEPSEEK_API_KEY}`,
          "Content-Type": "application/json",
        },
        timeout: 1000000,
      }
    );
    console.log("LLM response:", res.data);
    return res.data.choices[0].message.content;
  } catch (err) {
    console.error("LLM error:", err);
    return"Error calling LLM.";
  }
}

asyncfunction getContext(client, question) {
let currentTime = "";
let additionalContext = "";

try {
    const resources = await client.readResource(
      { uri: "time://current" },
      { timeout: 15000 }
    ); // 增加超时时间
    console.log("Resources response:", resources);
    currentTime = resources.contents[0]?.text ||
      newDate().toLocaleString(); // 注意:resources 直接包含 contents
  } catch (err) {
    console.error("Resource read error:", err);
    currentTime = newDate().toLocaleString();
  }

if (question.toLowerCase().includes("公理")) {
    console.log("Searching for axioms...", question);
    try {
      const result = await client.getPrompt({
        name: "search_local_database",
        arguments: { query: question },
      });
      console.log("Tool result:", result);
      additionalContext = result?.[0]?.text || "No results found.";
    } catch (err) {
      console.error("Tool call error:", err);
      additionalContext = "Error searching database.";
    }
  }

return { currentTime, additionalContext };
}

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const client = await createClient();

while (true) {
const question = awaitnewPromise((resolve) =>
    rl.question("You: ", resolve)
  );
if (question.toLowerCase() === "exit") {
    console.log("Exiting...");
    rl.close();
    process.exit(0);
  }
const context = await getContext(client, question);
const prompt = `Time: ${context.currentTime}\nContext: ${context.additionalContext}\nQ: ${question}\nA:`;
console.log("Prompt:", prompt);
const answer = await askLLM(prompt);
console.log('Assistant:', answer);
}

接着在终端运行:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 启动服务器
node src/server.js
代码语言:javascript
代码运行次数:1
运行
AI代码解释
复制
# 启动客户端
node src/index.js

运行结果:

未命中关键词,询问大模型
未命中关键词,询问大模型

未命中关键词,询问大模型

命中关键词
命中关键词

命中关键词

但是目前 1.9.0 还有 bug ,我已经反馈了 issue,期待新版本修复这些问题!

https://github.com/modelcontextprotocol/typescript-sdk/issues/291

主要是最新版使用了不通用的 zod 库导致的!

一些注意点

这个项目虽然小,但也踩了些坑,顺便分享几点:

  • MCP SDK 的 server 和 client 都是异步启动的,别忘了加上 await connect()
  • 工具的入参和 schema 必须严格匹配,否则会抛错。

下面是我的目录结构,做个参考吧!

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
mcp-mini/
├── package.json
├── src/
│   ├── client.js
│   ├── server.js
│   └── index.js

最后

总的来说,MCP TypeScript SDK 用起来还是挺顺的,适合做一些轻量、模块化、支持上下文的 AI 应用。这种服务 + 客户端 + LLM 的组合模式挺适合本地测试,也方便后续扩展别的服务。

今天的分享就到这了,如果文章中有啥错误,欢迎指正!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2025-04-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 萌萌哒草头将军 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
MCP SDK 快速接入 DeepSeek 并添加工具!万万没想到MCP这么简单好用!
重新整理了上篇文章,主要修正了错误的地方,加上了正确的截图和代码!感谢大家的积极指正!
萌萌哒草头将军
2025/04/19
2.1K0
MCP SDK 快速接入 DeepSeek 并添加工具!万万没想到MCP这么简单好用!
MCP协议从原理到开发:一文读懂大模型交互的标准化革命!
本文系统介绍了MCP协议在大模型交互标准化中的创新应用,通过技术解析+实践案例的方式,阐述了MCP协议的架构设计、开发实现原理及实际应用效果。重点探讨了MCP如何解决AI工具调用碎片化问题,并通过企业微信机器人开发实例展示MCP服务端/客户端开发全流程,干货满满点赞收藏!
腾讯云开发者
2025/04/18
4.8K1
MCP协议从原理到开发:一文读懂大模型交互的标准化革命!
零基础构建MCP服务器:TypeScript/Python双语言实战指南
🎵 在编程的交响乐中,我既是指挥家也是演奏者。让我们一起,在技术的音乐厅里,奏响属于程序员的华美乐章。
摘星.
2025/07/31
3310
零基础构建MCP服务器:TypeScript/Python双语言实战指南
深度拆解:MCP如何让大模型扩展成本降低90%?​
掌握MCP架构,你将成为大模型落地的“关键桥梁”。建议从本地工具调用起步,逐步挑战企业级集成场景!如果本次分享对你有所帮助,记得告诉身边有需要的朋友,"我们正在经历的不仅是技术迭代,而是认知革命。当人类智慧与机器智能形成共生关系,文明的火种将在新的维度延续。"在这场波澜壮阔的文明跃迁中,主动拥抱AI时代,就是掌握打开新纪元之门的密钥,让每个人都能在智能化的星辰大海中,找到属于自己的航向。
聚客AI
2025/07/08
2310
深度拆解:MCP如何让大模型扩展成本降低90%?​
在浏览器使用 MCP,纯边缘函数实现 MCP Client & Server
下面是一个在线示例:https://mcp-on-edge.edgeone.site/?from=eo
EdgeOne 小助手
2025/05/09
1.4K0
腾讯云MCP场景教程:从零搭建智能AI助手
在当前AI技术飞速发展的时代,如何让大语言模型(LLM)安全、高效地访问外部资源和服务成为了一个关键挑战。腾讯云推出的MCP(Model Context Protocol)协议及其MCP广场服务,为开发者提供了一个完美的解决方案。本文将全面介绍腾讯云MCP的核心功能,并通过详细示例展示如何基于SSE URL连接服务构建实用的AI应用。
大王叫我来巡山、
2025/08/21
3110
Go 使用 MCP 官方 SDK 轻松构建 MCP 客户端
陈明勇
2025/07/31
2730
工良出品 | 长文讲解 MCP 和案例实战
示例项目地址:https://github.com/whuanle/mcpdemo
痴者工良
2025/04/22
2.2K1
工良出品 | 长文讲解 MCP 和案例实战
AI 发展 && MCP
在2024.11月之前,AI 技术虽然日新月异,但是 AI 应用层的开发并没有多少新的东西,大体还是Prompt、RAG(Retrieval Augmented Generation)、Agent。
寻求出路的程序媛
2025/07/13
2200
AI 发展 && MCP
工良出品 | 长文讲解 MCP 和案例实战
示例项目地址:https://github.com/whuanle/mcpdemo
郑子铭
2025/06/07
7850
工良出品 | 长文讲解 MCP 和案例实战
MCP 和 Function Calling:示例
实现这样一个场景:和大模型聊天,然后让大模型将回答的内容总结后保存到 flomo 笔记中。
郑子铭
2025/05/25
4480
MCP 和 Function Calling:示例
基于CloudBase MCP的电商管理后台快速搭建实战指南
作为一名独立开发者,我曾在2023年尝试运营一个专注手工艺品的电商小程序"墨器工坊"。初期使用传统开发方式,前后端分离架构让我需要同时维护多个技术栈,从后端的Express/Koa到前端的Vue+小程序原生框架,再加上数据库管理、服务器运维等琐碎工作,几乎占用了全部时间。每月需要投入60+小时在技术维护上,而实际业务开发进展缓慢。
大王叫我来巡山、
2025/08/21
2080
MCP零基础学习(7)|实战指南:构建论文分析智能体
在之前的教程中,我们已经介绍了 MCP(Model Context Protocol)的基本概念及其核心组件。在本篇教程中,我们将通过一个实际案例,演示如何运用 MCP 构建一个能够分析学术论文的智能体。这个智能体将具备读取 PDF 文件、提取关键信息的功能,并能回答用户有关论文内容的问题。
霍格沃兹-测试开发学社
2025/08/26
1440
如何把ASP.NET Core WebApi打造成Mcp Server
MCP (Model Context Protocol)即模型上下文协议目前不要太火爆了,关于它是什么相信大家已经很熟悉了。目前主流的AI开发框架和AI工具都支持集成MCP,这也正是它的意义所在。毕竟作为一个标准的协议,当然是更多的生态接入进来才会有意义。使用MCP我们可以把Tools调用标准化,这意味着我们可以忽略语言、框架快速把工具融合到不同的模型中去。现在,如何把现有的业务逻辑快速的接入到模型中,成为模型落地很关键的一步,今天我们就借助微软的Semantic Kernel和Microsoft.Extensions.AI框架,通过简单的示例展示,如何把现有的ASP NET Core WebApi转换成MCP Server。
郑子铭
2025/06/11
2570
如何把ASP.NET Core WebApi打造成Mcp Server
AI Agent 开发新范式 MCP 从入门到多场景全链路实战
在人工智能飞速发展的今天,AI Agent(人工智能代理)正成为连接大模型与现实世界的关键桥梁。然而,传统的Agent开发长期面临一个核心挑战:模型(如ChatGPT、Claude、Gemini)与外部工具、数据源和环境之间缺乏一种标准化、高效的通信方式。
跑步的企鹅2915222729
2025/08/29
3170
机器学习|MCP(Model Context Protocol)实战
MCP(Model Context Protocol,模型上下文协议) ,2024年11月底,由 Anthropic 推出的一种开放标准,旨在统一大型语言模型(LLM)与外部数据源和工具之间的通信协议。 官网的介绍: https://modelcontextprotocol.io/introduction
用户1904552
2025/04/13
1.3K0
机器学习|MCP(Model Context Protocol)实战
大语言模型交互协议 MCP SDK Go-MCP 正式开源!
今天,ThinkInAI 团队(前身为 GoCN 团队)自豪地宣布,基于 Go 语言的大模型交互协议(Model Context Protocol)SDK —— Go-MCP 正式开源!
深度学习与Python
2025/04/10
2.5K0
大语言模型交互协议 MCP SDK Go-MCP 正式开源!
如何让web网站支持MCP服务?50行代码即可让网站支持MCP,让AI助手与Web应用进行交互:WebMCP
想让 AI 助手与您的 Web 应用(前端界面/web网站)实现无缝交互,不再依赖屏幕抓取或视觉解析?只需短短 50 行代码,便可将您的网站升级为 MCP(Model Context Protocol)服务器,AI 便可调用您网站上的“工具”直接执行操作。本篇博客将带你从原理到实战,深度剖析如何使用 WebMCP(又名 MCP-B)在几分钟内让站点 AI 化。
猫头虎
2025/07/21
5530
如何让web网站支持MCP服务?50行代码即可让网站支持MCP,让AI助手与Web应用进行交互:WebMCP
实操干货!MCP Server开发从0到1
最近 Model Context Protocol ( MCP ) 概念大火,刚好它可以用 Node 或 Python 来编写,作为一名 web 前端程序猿,怎么可以错过这个工具的探索。文章是记录本人做 MCP Server 工具开发的时候遇到的一些问题,以及自己的一些关于 AI 的感想。
腾讯云开发者
2025/05/21
1.3K0
实操干货!MCP Server开发从0到1
快速上手:实现你的第一个 MCP Client
在 MCP Server 开发实战:无缝对接 LLM 和 Elasticsearch 一文中,我们详细介绍了如何利用 MCP Python SDK 编写一个 Elasticsearch MCP 服务器,并通过 Claude Desktop 作为 MCP 客户端进行交互。本文将进一步介绍如何使用 MCP Python SDK 编写一个 MCP 客户端,以便更加灵活地与 MCP 服务器进行通信和集成。本文的完整代码可以在 Github 上找到:https://github.com/cr7258/hands-on-lab/tree/main/ai/claude/mcp/client/elasticsearch-mcp-client-example
Se7en258
2025/05/21
1.2K0
快速上手:实现你的第一个 MCP Client
推荐阅读
相关推荐
MCP SDK 快速接入 DeepSeek 并添加工具!万万没想到MCP这么简单好用!
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档