AI导哈

计算器模块模板

NitroStack v3.0的入门模板，提供计算器模块示例，包含工具、资源、提示和UI组件，适合学习基础功能。

  • by abhishekpanditofficial
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 abhishekpanditofficial/calculator-mcp

使用说明

NitroStack入门模板

简单的入门模板 -通过简洁的计算器示例学习NitroStack v3.0基础知识。

🎯 里面是什么

此模板演示了NitroStack v3.0的核心功能：

  • 一个模块 -具有所有功能的计算器模块
  • 一个工具 - calculate -执行算术运算
  • 一种资源 - calculator://operations -操作列表
  • 一个提示 - calculator_help -获取使用帮助
  • 两个小部件 -结果和操作列表的漂亮UI
  • 无身份验证 -专注于学习基础知识
  • 无数据库 -纯计算示例

🚀 快速开始

先决条件

# Install NitroStack CLI globally
npm install -g nitrostack

# Or use npx
npx nitrostack --version

设置您的项目

nitrostack init my-calculator --template typescript-starter
cd my-calculator

就是这样！CLI会自动执行以下操作：

  • ✅ 安装所有依赖项
  • ✅ 安装小部件依赖项
  • ✅ 构建小部件
  • ✅ 设置项目结构

运行项目

npm run dev

这将开始：

  • MCP服务器 （双传输：端口3002上的STDIO+HTTP）-代码更改时热重新加载
  • 工作室 上http://localhost:3000-视觉测试环境
  • 小部件开发服务器 上http://localhost:3001-热模块更换

💡 双重运输：您的服务器通过STDIO（用于直接连接）和HTTP（用于端口3002上的远程访问）公开工具。在Studio中切换传输→ 设置。

这 nitrostack dev 命令会自动处理一切：

  • ✅ 自动检测小部件目录
  • ✅ 安装依赖项（如果需要）
  • ✅ 构建小部件（首次运行时）
  • ✅ 同时启动所有服务
  • ✅ TypeScript和小部件的热重新加载

📁 项目结构

src/
├── modules/
│   └── calculator/
│       ├── calculator.module.ts       # @Module definition
│       ├── calculator.tools.ts        # @Tool with examples
│       ├── calculator.resources.ts    # @Resource
│       └── calculator.prompts.ts      # @Prompt
├── widgets/                           # Next.js UI widgets
│   └── app/
│       ├── calculator-result/         # Tool result widget
│       └── calculator-operations/     # Resource widget
├── app.module.ts                      # Root @McpApp module
└── index.ts                           # Application bootstrap

🛠️ 可用特征

健康检查： system

监控服务器运行状况和资源：

  • 运行时间：服务器运行时间
  • 内存使用：堆内存消耗
  • 进程信息：PID和Node.js版本
  • 状态: up, degraded，或 down

在Studio的“运行状况检查”选项卡中检查运行状况！

工具： calculate

执行基本算术运算：

@Tool({
  name: 'calculate',
  description: 'Perform basic arithmetic calculations',
  inputSchema: z.object({
    operation: z.enum(['add', 'subtract', 'multiply', 'divide']),
    a: z.number(),
    b: z.number()
  }),
  examples: {
    request: { operation: 'add', a: 5, b: 3 },
    response: { result: 8, expression: '5 + 3 = 8' }
  }
})

用途：

User: "Calculate 5 + 3"
AI: [Calls calculate tool]
Result: Beautiful widget showing "5 + 3 = 8"

资源： calculator://operations

列出所有可用的操作及其示例。

提示： calculator_help

获取有关如何使用计算器的帮助。

🎨 小部件

计算器结果小部件

  • 渐变背景
  • 操作图标
  • 数字细分
  • 精美的动画

计算器操作小部件

  • 所有操作的网格
  • 按类型进行颜色编码
  • 每个操作的示例

💡 学习路径

此模板非常适合学习：

  1. 模块组织 -如何构建功能模块
  2. 工具 -如何创建一个工具 @Tool 装饰器
  3. 资源 -如何通过以下方式公开数据 @Resource
  4. 提示 -如何创建对话模板
  5. 小部件 -如何构建UI组件
  6. 示例 -如何包含请求/响应示例
  7. 验证 -如何使用Zod模式

🔧 命令

# Development
npm run dev              # Start dev server with Studio (auto-builds everything)
npm run build            # Build TypeScript and widgets for production
npm start                # Run production server

# Widget Management
npm run widget <command> # Run npm command in widgets directory
npm run widget add <pkg> # Add a widget dependency (e.g., @mui/material)

注： NitroStack CLI自动处理构建、安装依赖关系和热重新加载。您不再需要为小部件使用单独的命令了！

📝 交互示例

基本计算

User: "What's 12 times 8?"
AI: Calls calculate(operation="multiply", a=12, b=8)
Result: Widget showing "12 × 8 = 96"

获取帮助

User: "How do I use the calculator?"
AI: Uses calculator_help prompt
Result: Complete usage instructions

清单的操作

User: "What operations are available?"
AI: Fetches calculator://operations resource
Result: Widget showing all 4 operations with examples

🎓 代码走读

1.工具定义

@Tool({
  name: 'calculate',
  description: 'Perform basic arithmetic calculations',
  inputSchema: z.object({...}),
  examples: {...}
})
@Widget('calculator-result')  // Link UI widget
async calculate(input: any, ctx: ExecutionContext) {
  // Your logic here
  return { result, expression };
}

要点：

  • @Tool 装饰器定义工具
  • inputSchema 使用Zod验证输入
  • examples 帮助AI了解使用情况
  • @Widget 链接UI组件
  • ExecutionContext 提供记录器、元数据

2.资源定义

@Resource({
  uri: 'calculator://operations',
  name: 'Calculator Operations',
  mimeType: 'application/json',
  examples: {...}
})
@Widget('calculator-operations')
async getOperations(uri: string, ctx: ExecutionContext) {
  return { contents: [{...}] };
}

3.快速定义

@Prompt({
  name: 'calculator_help',
  arguments: [...]
})
async getHelp(args: any, ctx: ExecutionContext) {
  return { messages: [...] };
}

4.模块定义

@Module({
  name: 'calculator',
  controllers: [CalculatorTools, CalculatorResources, CalculatorPrompts]
})
export class CalculatorModule {}

5.根模块

@McpApp({
  server: { name: 'calculator-server', version: '1.0.0' }
})
@Module({
  imports: [ConfigModule.forRoot(), CalculatorModule]
})
export class AppModule {}

🚀 扩展此模板

添加更多操作

编辑 calculator.tools.ts 并向enum和switch语句添加新操作。

添加历史记录功能

  1. 创建存储计算的服务
  2. 添加一个 get_history 工具
  3. 创建历史小部件

添加更多模块

nitrostack generate module converter

📚 后续步骤

一旦你理解了这个模板：

  1. 试试 电子商务模板 -带有身份验证的高级功能
  2. 阅读 服务器概念 -深入了解模块
  3. 阅读 工具指南 -高级工具模式
  4. 阅读 小工具指南 -构建更好的用户界面

💡 提示

  • 保持简单 -此模板显示了所需的最小值
  • 学习代码 -每个文件都有清晰的示例
  • 在工作室测试 -使用聊天功能测试您的工具
  • 查看示例 -The examples 字段帮助AI理解您的工具

🎉 建造什么

以此为起点：

  • 单位转换器 -温度、货币等。
  • 文本工具 -字符串操作、格式化
  • 数据处理器 -JSON、CSV、XML解析
  • 简单的API -天气、笑话、事实
  • 公用事业 -日期/时间，UUID生成

快乐学习！ 📖

从简单开始，学习模式，然后构建一些令人惊叹的东西！

相关 MCP