SvelteKit & Vercel MCP Starter

SvelteKit 与 Vercel MCP 入门项目

欢迎使用这个示例项目，了解如何使用 SvelteKit 设置并部署运行在 Vercel 上的模型上下文协议（MCP）服务和客户端。

这个入门项目旨在为 SvelteKit 爱好者提供一个清晰、精简的基础示例，帮助他们将强大的 AI 工具调用能力集成到应用中。

✨ 为什么选择这个项目？

这个项目源自我对探索 SvelteKit 中的 MCP 集成的兴趣。Vercel 最近发布了 @vercel/mcp-adapter，大幅降低了入门门槛，让这项探索变得容易得多——非常感谢 Vercel 团队！

这项实现的一大亮点是展示了 MCP 可以成功集成到 SvelteKit 中，尽管早期的大部分文档和示例都倾向于使用 Next.js。适配到 SvelteKit 所需的改动很少，体现了底层技术的灵活性。

虽然这个示例为了方便使用了 Vercel 的适配器和部署平台，但需要注意的是，核心概念依赖于标准 Web 技术（HTTP、服务器发送事件）。这意味着稍作调整后，在其他支持 Node.js 环境的托管平台上也应该能实现类似的配置。

这个入门项目旨在提供一个不会令人生畏的精简示例，帮助你快速上手。

🌟 功能

• @vercel/mcp-adapter：利用 Vercel 的软件包简化 MCP 服务的创建。
• MCP 服务示例：演示如何在 SvelteKit 路由中创建基本的 MCP 工具。
• MCP 客户端示例：展示如何使用 AI SDK 调用 MCP 服务。

注意：客户端和服务不必位于同一个项目中。

🛠️ 快速开始

按照以下步骤在本地计算机上运行项目。

先决条件

1. Node.js 和 pnpm：确保已安装 Node.js（建议使用 v18 或更高版本）和 pnpm。
2. API 密钥：
   • 你需要一个 Anthropic API 密钥（如果调整客户端，也可以使用其他大模型提供商的密钥）。
   • @vercel/mcp-adapter 在使用管理状态的某些传输方式（例如 SSE）时需要 Redis URL。Upstash 等服务提供免费套餐。从 @vercel/[email protected] 起，使用 streamableHTTP 时不再需要 Redis URL。
   • 将 .env.example 文件复制为 .env，并填入密钥：

     cp .env.example .env
     

安装

克隆代码仓库并安装依赖：

pnpm install

本地运行

启动开发服务器：

pnpm run dev

现在，你的应用应该已运行在 http://localhost:5173（或下一个可用端口）上。

📝 重要注意事项与限制

• Edge Functions：在创建此示例时，将 MCP 服务部署到 Vercel Edge Functions 可能会受到当前适配器的限制，或受到 SvelteKit 集成细节的影响。目前建议在 Vercel 上使用标准无服务器函数。
• 传输协议：此示例主要演示 StreamableHTTPClientTransport。@vercel/mcp-adapter 也支持 SSE。
• MCP SDK 版本：MCP TypeScript SDK 是一个持续演进的库。由于较新版本此前曾出现工具参数问题（参见 Issue #467），此示例使用 "@modelcontextprotocol/sdk": "1.10.2"。请务必检查最新的稳定版本，并按需调整。

🤝 贡献与未来

本项目旨在作为一个精简的起点。它还有多种改进或扩展方式：

• 灵活的传输路由：实现更多动态路由，以便在 SvelteKit 结构中轻松切换或支持多种 MCP 传输方式（例如，同时支持 SSE 和 HTTP）。
• 更多工具示例：添加更多样、更复杂的工具示例。
• 错误处理与健壮性：增强客户端和服务端的错误处理能力。

维护状态：创建此仓库是为了分享一个可运行的示例。虽然我会尽力处理可能出现的关键问题，但可能不会长期积极维护或开发它。

非常欢迎大家贡献！ 如果你有改进建议、错误修复或新功能，欢迎提交 issue 或 pull request。

📚 延伸阅读

• Vercel MCP 服务支持更新日志：阅读 Vercel 官方公告
• SvelteKit 文档：SvelteKit 文档
• MCP TypeScript SDK：GitHub 仓库
• @vercel/mcp-adapter：GitHub Vercel 单体仓库

---

祝编码愉快！希望这个入门项目能帮助你构建出色的 AI 驱动型 SvelteKit 应用！