FastJsMcp：几行代码开发一个mcp工具

Mcp不会是一场自嗨式的运动，Mcp 协议的出现拓展了llm的能力，Mcp以统一的接口规范协议，延展了llm的能力，如果llm是大脑，那基于mcp协议开发的工具就是四肢，就是感官器官，llm使用这些Mcp tool去获取更多的信息来作为上下文从而llm的能力被进一步发掘。换句话说，既然Mcp都这么多了，那再多一个你实现的Mcp的又咋样呢。

zaizaizhao

399人浏览 · 2025-10-10 22:46:50

zaizaizhao · 2025-10-10 22:46:50 发布

在AI时代，前端开发者如何使用自身技术栈快速构建MCP？FastJsMcp 为你提供了答案！

引言

如何利用现有的JavaScript/TypeScript技能快速进入Ai应用开发领域？一说到Ai开发、agent构建，大家都会觉得python才是最佳的开发语言。但是目前主流的ai开发库如langgraph、mcp sdk都提供了Typescript版本，我们可以很快的开发出Ts版本的Ai应用。

如何利用现有的JavaScript/TypeScript技能快速进入MCP开发领域？

FastJsMcp就是为解决这个问题而生的，受启发于Python版本的Fastmcp库。它是一个专为前端开发者设计的 Model Context Protocol (MCP) 服务器实现，让你用熟悉的装饰器语法，轻松构建MCP服务。

🎯 什么是 FastJsMcp？

FastJsMcp 是一个基于 TypeScript 的 MCP 服务器框架，它让开发者能够：

用两个装饰器创建完整的AI服务：@fastMcp 和 @tool
无缝集成现有技术栈：完全基于 JavaScript/TypeScript
快速原型开发：从想法到实现，只需几分钟
类型安全保障：完整的 TypeScript 支持和智能提示

🚀 为什么选择 FastJsMcp？

1. 上手超快

FastJsMcp封装了所有mcp的实现细节，只需要通过两个装饰器，就可以转化普通类为mcp server

@fastMcp({
  name: 'calculator-server',
  version: '1.0.0',
  transport: {
    type: TransportType.Streamable,
    port: 3323,
    host: 'localhost',
    endpoint: '/mcp',
  },
})
export class CalculatorServer {
  @tool({
    name: 'add',
    description: 'Add two numbers',
    inputSchema: Schema.object({
      a: Schema.number().describe("第一个数字a"),
      b: Schema.number().describe("第二个数字b"),
    }),
  })
  async add(args: { a: number; b: number }) {
    const result = args.a + args.b;
    return {
      content: [{
        type: 'text' as const,
        text: `${args.a} + ${args.b} = ${result}`,
      }],
    };
  }
}

fastjsmcp ./caulculate.ts

就这么简单！两个装饰器增强原有类和函数，一段命令，一个完整的Mcp server就创建好了。

FastJsMcp提供了完整的命令行功能

cmd ~ % fastjsmcp --help
Usage: fastjsmcp [options] [command] [file]

FastMCP - A fast and easy-to-use Model Context Protocol server

Arguments:
  file                        Server file path (e.g., ./calculator.js or ./calculator.ts)

Options:
  -V, --version               output the version number
  -s, --server <type>         Server type to run (when not using file path) (default:
                              "calculator")
  -n, --name <name>           Server name
  --server-version <version>  Server version (default: "1.0.0")
  -t, --transport <type>      Transport type (default: "stdio")
  -p, --port <port>           Port for HTTP/WebSocket transport (default: "3000")
  -h, --host <host>           Host for HTTP/WebSocket transport (default: "localhost")
  -l, --log-level <level>     Log level (default: "info")
  --log-format <format>       Log format (simple|json) (default: "simple")
  --base-path <path>          Base path for filesystem server (default:
                              "/Users/zhucaiyunxiaodi")
  --help                      display help for command

Commands:
  run [options] [file]        Run a FastMCP server
  list                        List available server examples
  init [options] <name>       Initialize a new FastMCP server project
  inspect [options] <file>    Launch MCP Inspector to test and debug your server

2. 前端友好的开发体验

熟悉的语法：得益于TypeScript 装饰器功能，就像 Angular 或 NestJS借助装饰器实现依赖注入、单例
强大的 CLI 工具：fastjsmcp 命令行工具
直接运行 TypeScript：无需预编译，直接运行 .ts 文件

🛠️ 实战案例：开发一个kiro编程规范的mcp

通过一个实际案例来看看 FastJsMcp 的使用。假设你想在trae或者vscode中使用类似kiro编程规范去开发一个项目：

首先，我们先去网上找到kiro编辑器的提示词，如下，截取了一部分

 Goal

You are an agent that specializes in working with Specs. Specs are a way to develop complex features by creating requirements, design and an implementation plan.
Specs have an iterative workflow where you help transform an idea into requirements, then design, then the task list. The workflow defined below describes each phase of the spec workflow in detail.

## Workflow to execute

Here is the workflow you need to follow:

<workflow-definition>

## Feature Spec Creation Workflow

## Overview

You are helping guide the user through the process of transforming a task for a feature into a detailed design document with an implementation plan and todo list. It follows the spec driven development methodology to systematically refine the feature task, conduct necessary research, create a comprehensive design, and develop an actionable implementation plan. The process is designed to be iterative, allowing movement between requirements clarification and research as needed.

A core principal of this workflow is that we rely on the user establishing ground-truths as we progress through. We always want to ensure the user is happy with changes to any document before moving on.

有了提示词后，就可以确定目标，Ai客户端需要调用tool、或者prompts去获取kiro规范，那就先写个函数，读取文件再返回这段再说

  async generateProjectSpecTool(args: { content: string }) {
    try {
      // 构建 spec.md 文件的路径
      const currentDir = path.dirname(fileURLToPath(import.meta.url));
      const specFilePath = path.join(currentDir, './prompts', 'spec.md');

      // 同步读取文件内容
      const specContent = await fs.promises.readFile(specFilePath, 'utf-8');
      // 在规范内容前添加项目名称信息
      const projectName = args.content;
      const fullContent = `项目名称: ${projectName}\n\n${specContent}`;
      console.log(fullContent);
      return {
        content: [
          {
            type: 'text',
            text: fullContent,
          },
        ],
      };
    } catch (error) {
      // 错误处理
      console.error('读取 spec.md 文件时发生错误:', error);
      return {
        content: [
          {
            type: 'text',
            text: '无法加载项目规范文档',
          },
        ],
      };
    }
  }

现在，一个普通的函数就写好了，如何变成高大上的mcp tool呢？只需要两个装饰器**@fastmcp和@tool**

  @fastMcp({
    name: 'kiroSpectKit',
    version: '1.0.0',
    transport: {
      type: TransportType.Streamable,
      port: 4006,
      host: 'localhost',
      endpoint: '/mcp',
    },
  })
  export class KiroSpectKit {

    @tool({
      name: 'generate_project_spec_tool',
      description: '生成项目规范',
      inputSchema: Schema.object({
        content: Schema.string().describe('项目名字'),
      }),
    })
    async generateProjectSpecTool(args: { content: string }) {
      try {
        // 构建 spec.md 文件的路径
        const currentDir = path.dirname(fileURLToPath(import.meta.url));
        const specFilePath = path.join(currentDir, './prompts', 'spec.md');

        // 同步读取文件内容
        const specContent = await fs.promises.readFile(specFilePath, 'utf-8');
        // 在规范内容前添加项目名称信息
        const projectName = args.content;
        const fullContent = `项目名称: ${projectName}\n\n${specContent}`;
        console.log(fullContent);
        return {
          content: [
            {
              type: 'text',
              text: fullContent,
            },
          ],
        };
      } catch (error) {
        // 错误处理
        console.error('读取 spec.md 文件时发生错误:', error);
        return {
          content: [
            {
              type: 'text',
              text: '无法加载项目规范文档',
            },
          ],
        };
      }
    }
  }

运行这个服务只需要一行命令：****

fastjsmcp src/index.ts

> fastjsmcp src/index.ts

🚀 Running TypeScript server: /Users/zhucaiyunxiaodi/Downloads/fastjsmcp-kiro-spec/src/index.ts
🔧 Checking runtime availability: tsx
✅ Runtime tsx is available
🚀 FastMCP CLI: Running TypeScript server directly...
📝 Command: tsx /Users/zhucaiyunxiaodi/Downloads/fastjsmcp-kiro-spec/src/index.ts
📁 Working directory: /Users/zhucaiyunxiaodi/Downloads/fastjsmcp-kiro-spec
2025-10-10 21:46:17 [FastMCP] INFO: Streamable transport configured for localhost:4006
2025-10-10 21:46:17 [FastMCP] INFO: FastMCP server "kiroSpectKit" started with streamable transport
FastMCP server "kiroSpectKit" started successfully!
HTTP Streamable Server running on: http://localhost:4006/mcp

Test endpoints:
• Health check: http://localhost:4006/health
• Ping test: http://localhost:4006/ping

此时一个kiro编程规范的mcp就已经以mcp的形式启动了，就这么简单！恭喜你已经创建了你的第一个AI工具。

使用下自己开发的mcp

这里以构建一个记录小猫进食app为例，基于kiro编程规范来做项目的启动规划

vscode连接mcp，此时可以看见四个kiro编程规范的mcp tool

开始任务规划(从规范到设计再到实施文档)

结果

:::info
这里可以看出，生成的文档是和kiro编辑器生成的任务规划高度一致的。

:::

🎨 丰富的功能支持

FastJsMcp 不仅支持工具（Tools），还支持：

资源（Resources）

@resource({
  uri: 'memory://cache',
  name: '缓存数据',
  description: '访问应用缓存'
})
async getCacheData() {
  return {
    contents: [{
      uri: 'memory://cache',
      mimeType: 'application/json',
      text: JSON.stringify(this.cache)
    }]
  };
}

提示（Prompts）

@prompt({
  name: 'code_review',
  description: '生成代码审查提示',
  arguments: [{
    name: 'code',
    description: '要审查的代码',
    required: true
  }]
})
async codeReview(args: { code: string }) {
  return {
    description: '代码审查提示',
    messages: [{
      role: 'user',
      content: {
        type: 'text',
        text: `请审查以下代码并提供反馈：\n\n${args.code}`
      }
    }]
  };
}

🎯 结语

先看张梗图吧

2025年，mcp大行其道，如这张梗图所示，Mcp似乎是开发者的一场狂欢。但是接触Mcp的这几个月，我认为Mcp不会是一场自嗨式的运动，Mcp 协议的出现拓展了llm的能力，Mcp以统一的接口规范协议，延展了llm的能力，如果llm是大脑，那基于mcp协议开发的工具就是四肢，就是感官器官，llm使用这些Mcp tool去获取更多的信息来作为上下文从而llm的能力被进一步发掘。换句话说，既然Mcp都这么多了，那再多一个你实现的Mcp的又咋样呢。（大佬高抬贵手，给俺的项目点个star，时间急，任务赶，有bug直接提我连夜修）

FastJsMcp项目地址：GitHub - FastJsMcp

kiro项目地址：fastjsmcp-kiro-spec
NPM 包：npm install fastjsmcp
文档：查看项目 README 获取详细文档

让我们一起用typescript的方式，拥抱AI的未来！

北京朝阳AI社区

更多推荐

无人机追逃博弈论文读取有感

多智能体追逃博弈算法综述与未来方向本文系统梳理了多智能体追逃博弈的算法框架，分为全局视野和局部视野两大类，并针对无人机局部观测场景提出推荐方案。全局视野算法（如MADDPG、QMIX）依赖完整环境信息，虽在协同控制中表现良好，但难以适应真实场景中的部分观测问题，存在过拟合和泛化性差的缺陷。局部视野算法（如MAPPO、MAAC）更适合无人机追逃场景，通过注意力机制、图神经网络或课程学习实现局部