Mastra MCP Server Workshop

此仓库包含了Mastra MCP Server研讨会的完成代码。它被设计为一个单仓库，其中MCP服务器和前端应用程序被分离到不同的包中。它展示了如何构建一个本地MCP服务器来管理markdown笔记，创建自定义工具和提示，并构建一个带有AI代理的响应式Next.js前端以与笔记进行交互。

开始使用

1. 安装依赖项：

   pnpm install
   

2. 运行MCP服务器：

   pnpm dev:mcp
   

   此命令启动Mastra MCP服务器进程。

3. 运行Mastra代理：

   pnpm dev:agent
   

   此命令启动带有代理的Mastra服务器。 注意：这些命令不一起运行的原因是，在实际情况下，MCP服务器已经发布或托管，代理需要在MCP服务器启动后访问它。将MCP服务器分开是一个好习惯。

4. 运行前端：

   pnpm dev:web
   

   此命令启动前端应用程序。

5. 在浏览器中打开http://localhost:3000。

项目结构

此项目是一个pnpm单仓库。主要包包括：

• packages/mcp-server：管理并暴露笔记的MCP服务器。
• packages/web：包含Mastra代理的Next.js前端应用。
• packages/notes：包含你的本地markdown笔记的目录。

MCP服务器 (packages/mcp-server)

• src/server.ts：MCP服务器的入口点，定义了MCPServer实例，包括资源和提示处理器。
• src/resources.ts：实现了从packages/notes/目录读取笔记的资源处理器（listResources，getResourceContent）。
• src/tools.ts：实现了writeNote工具，允许代理创建和编辑笔记。
• src/prompts.ts：实现了驱动斜杠命令菜单的提示处理器（listPrompts，getPromptMessages）。

Web前端 (packages/web)

• src/app/：Next.js应用程序。
  • notes/page.tsx：主UI，包括笔记列表、笔记显示和代理面板。
• src/app/api/：前端的API端点。
  • notes/：从文件系统列出和读取笔记的API。
  • copilotkit/：处理代理的后端请求。
  • prompts/：获取斜杠命令菜单可用提示列表和内容的API。
  • events/：用于向前端推送实时更新的服务器发送事件（SSE）端点。
• src/components/：可重用的React组件。
  • agent.tsx：包含CopilotChat组件及其配置。
  • CustomChatInput.tsx：聊天界面中的自定义输入组件，实现斜杠命令菜单。
  • PromptMenu.tsx：斜杠命令提示列表的UI。
  • note-display.tsx：渲染所选笔记内容的组件。
  • note-list.tsx：显示可用笔记列表的组件。
• src/lib/：实用函数和钩子。
  • events.ts：包含用于处理MCP监听器事件的eventEmitter。
  • utils.ts：通用实用函数。

主要功能

• 本地笔记管理：一个MCP服务器，将本地目录（packages/notes/）中的markdown文件作为资源暴露出来。
• 自定义代理工具：代理配备了writeNote工具，可以直接在文件系统上创建和修改笔记。
• 动态提示：聊天界面中的斜杠命令菜单，允许用户触发预定义的提示，如总结笔记或头脑风暴想法。
• 响应式UI：前端使用Next.js和React构建，提供浏览和编辑笔记的无缝用户体验。
• 实时MCP更新：当代理修改MCP资源时，UI会自动更新。MCP服务器向客户端发送消息。前端设置MCP监听器处理器，将事件传递给前端。

如何使用它

1. 使用pnpm dev启动应用程序。
2. 在浏览器中打开http://localhost:3000。
3. 与右侧面板中的代理互动。
   • 创建笔记：尝试询问代理：“创建一个名为'My First Note'的笔记，内容为'Hello, world!'”。你应该会在左侧的列表中看到该笔记。
   • 编辑笔记：点击新笔记，然后询问代理：“在此笔记中添加一个名为'Next Steps'的部分”。内容将实时更新。
   • 使用提示：在代理聊天中键入/以打开提示菜单。选择一个提示，如brainstorm_ideas。代理将执行该提示，如果需要的话，使用当前笔记作为上下文。