使用说明
🌍 地理MCP
Next.js 15 的支持Model Context Protocol (MCP) 服务器实施
📋 目次
概要
Geo MCP 单击功能区上Model Context Protocol (MCP)已实施Next.js 基本服务器。将来的Supabase/PostgreSQL + PostGIS 中描述的场景,使用以下步骤创建明细表,以便在概念设计中分析体量的体积。
主要特征
- 🚀 Next.js 15应用路由器 -最新React Server Components 利用率
- 📝 TypeScript 完全対応 -型安全开发环境
- 🔌 MCP 标准実装 -
@modelcontextprotocol/sdk使用 - ☁️ Vercel 部署就绪 -在无服务器环境中运行
- 🔐 模具安全验证 - Zod 模式输入验证
- 🎨 现代的UI - Tailwind CSS v3 ー设计
示威
- 本番环境: https://geo-mcp.vercel.app
- MCP 端点: https://geo-mcp.vercel.app/api/mcp
使用基准工具确认动作
npx mcp-benchmark-tool list -s https://geo-mcp.vercel.app/api/mcp -v
机能
已实施
- ✅ JSON-RPC 2.0 协议完全支持
- ✅ InMemoryTransport 无状态通信
- ✅ 三个示例工具(greet,echo,get-current-time)
- ✅ Zod 模式输入验证
- ✅ 自动JSON Schema 生成
- ✅ CORS 対応
- ✅ 错误处理
- ✅ TypeScript 模具检查
計画中
- 🔜 Supabase/PostgreSQL統合
- 🔜 PostGIS 地理空间ー管理
- 🔜 MapFan API 统合
- 🔜 管理画面的安装
- 🔜 Supabase Auth 统合
- 🔜 会话持久化(Vercel KV/Redis)
技术栈
前端框架
- Next.js 15.5.6 - React 框架结构
- 反应 19.0.0 - UI 库
- TypeScript 5.7.2 - 型安全性
- 顺风 CSS 3.4.17-造型
后端MCP
- @模型上下文协议/sdk 1.0.4 - MCP 実装
- 萨德 3.23.8-架构验证
- zod到json模式 3.24.6-模式转换
基础架构
- 维塞尔 -托管部署
- 无服务器功能 - API 実行环境
安装,安装
前提条件
- Node.js 18 以上
- npm 或yarn
安装
# リポジトリのクローン
git clone https://github.com/yourusername/geo-mcp.git
cd geo-mcp
# 依存関係のインストール
npm install
# 環境変数の設定(オプション)
cp .env.local.example .env.local
# .env.localを編集して必要な環境変数を設定
# 開発サーバーの起動
npm run dev
服务器是 http://localhost:3000 中所述修改相应参数的值。
使用方法
1.通过浏览器访问
http://localhost:3000
显示服务器状态、可用工具和连接方式。
2. Claude Desktop 连接到
claude_desktop_config.json 添加:
{
"mcpServers": {
"geo-mcp": {
"command": "/path/to/uvx",
"args": [
"mcp-proxy",
"http://localhost:3000/api/mcp",
"--transport=streamablehttp"
]
}
}
}
或使用生产环境:
{
"mcpServers": {
"geo-mcp": {
"command": "/path/to/uvx",
"args": [
"mcp-proxy",
"https://geo-mcp.vercel.app/api/mcp",
"--transport=streamablehttp"
]
}
}
}
3.通过程序连接
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
const transport = new StreamableHTTPClientTransport(
new URL("http://localhost:3000/api/mcp")
);
const client = new Client(
{
name: "my-client",
version: "1.0.0",
},
{
capabilities: {},
}
);
await client.connect(transport);
// ツール一覧を取得
const tools = await client.listTools();
console.log(tools);
API 仕様
端点
POST /api/mcp
MCP 处理请求。
请求:
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/list",
"params": {}
}
响应:
{
"jsonrpc": "2.0",
"id": 1,
"result": {
"tools": [
{
"name": "greet",
"description": "指定された名前で挨拶を返します",
"inputSchema": { ... }
}
]
}
}
OPTIONS /api/mcp
CORS 处理印前检查请求。
错误响应
{
"jsonrpc": "2.0",
"error": {
"code": -32603,
"message": "Internal error"
},
"id": 1
}
可用工具
1.问候
以指定的名称返回多语言问候。
参数:
name(string, required): 问候对方的名字language(string, optional): 语言代码(ja,en,es,fr)。默认值:ja
使用例:
{
"name": "greet",
"arguments": {
"name": "太郎",
"language": "ja"
}
}
结果:
{
"content": [
{
"type": "text",
"text": "こんにちは、太郎さん!"
}
]
}
2.回声
回显消息。
参数:
message(string, required): 回显消息repeat(number, optional): 重复次数(1-10)。默认值:1
使用例:
{
"name": "echo",
"arguments": {
"message": "Hello",
"repeat": 3
}
}
结果:
{
"content": [
{
"type": "text",
"text": "Hello\nHello\nHello"
}
]
}
3.获取当前时间
用日本时间返回现在的日期和时间。
参数: 无
使用例:
{
"name": "get-current-time",
"arguments": {}
}
结果:
{
"content": [
{
"type": "text",
"text": "現在時刻: 2024年12月1日日曜日 12時34分56秒 日本標準時"
}
]
}
开発
开发指令
# 開発サーバー起動(ホットリロード有効)
npm run dev
# 型チェック
npm run type-check
# プロダクションビルド
npm run build
# プロダクションサーバー起動
npm run start
项目结构
geo-mcp/
├── app/
│ ├── api/
│ │ └── mcp/
│ │ └── route.ts # MCPエンドポイント
│ ├── globals.css # グローバルスタイル
│ ├── layout.tsx # ルートレイアウト
│ └── page.tsx # トップページ
├── lib/
│ ├── mcp/
│ │ ├── server.ts # MCPサーバー設定
│ │ ├── types.ts # 型定義
│ │ ├── event-store.ts # イベントストア
│ │ └── tools/
│ │ └── example-tool.ts # サンプルツール
│ └── session-store.ts # セッション管理
├── package.json
├── tsconfig.json
├── next.config.js
├── tailwind.config.js
└── postcss.config.js
如何添加新工具
- 创建工具处理程序 (
lib/mcp/tools/your-tool.ts):
import { z } from "zod";
import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
export const yourToolInputSchema = z.object({
param1: z.string().describe("パラメータの説明"),
});
export async function yourToolHandler({
param1,
}: z.infer<typeof yourToolInputSchema>): Promise<CallToolResult> {
return {
content: [
{
type: "text",
text: `結果: ${param1}`,
},
],
};
}
- 注册服务器 (
lib/mcp/server.ts):
import { yourToolHandler, yourToolInputSchema } from './tools/your-tool';
// tools/listハンドラー内に追加
{
name: 'your-tool',
description: 'ツールの説明',
inputSchema: zodToJsonSchema(yourToolInputSchema),
}
// tools/callハンドラー内に追加
case 'your-tool': {
const parsed = yourToolInputSchema.parse(args);
return await yourToolHandler(parsed);
}
部署
Vercel 部署到
方法 1: Vercel CLI
# Vercel CLIのインストール
npm i -g vercel
# デプロイ
vercel
# 本番環境へのデプロイ
vercel --prod
方法2:GitHub 集成
- GitHub 打开存储库Vercel 连接
- 自动开始部署
- 每个推送都会自动部署
设置环境变量
Vercel 在仪表板上设置以下环境变量:
MCP_SERVER_NAME=geo-mcp
MCP_SERVER_VERSION=1.0.0
未来计划:
SUPABASE_URL=your-supabase-url
SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
DATABASE_URL=postgresql://...
今后的发展
Phase 1: 地理空间数据基础(1-2周)
- [ ] Supabase 项目设置
- [ ] PostgreSQL + PostGIS 扩张の有效化
- []数据库架构设计
- []基本地理空间工具实现
search-nearby: 周辺検索get-location: 地点情報取得calculate-distance:距离计算
Phase 2: MapFan API 统合(1-2周间)
- [ ] MapFan API 客户端实现
- []6个工具的移植
- []错误处理强化
- []高速缓存实现
Phase 3: 会话管理改进(1周)
- [ ] Vercel KV 或Redis 部署
- []会话持久化
- []事件存储改善
Phase 4: 管理画面(2-3周间)
- [ ] Supabase Auth 统合
- []数据管理UI
- [ ]地图可视化
- “”操控板
故障排除
Q Module not found: Can't resolve './tools/example-tool.js'
A. TypeScript 对于文件导入,如果是相对路径,则导入时不需要扩展名。
// ❌ 間違い
import { greetHandler } from "./tools/example-tool.js";
// ✅ 正しい
import { greetHandler } from "./tools/example-tool";
Q module.exports is not defined in ES module scope
A. package.json的"type": "module"的规格化距离的幂函数export default中所述修改相应参数的值。
// ❌ 間違い
module.exports = nextConfig;
// ✅ 正しい
export default nextConfig;
Q: Claude Desktop 无法连接
A. mcp-proxy来修改标记元素的显示属性Streamable HTTP 通过传输连接:
{
"mcpServers": {
"geo-mcp": {
"command": "/path/to/uvx",
"args": [
"mcp-proxy",
"http://localhost:3000/api/mcp",
"--transport=streamablehttp"
]
}
}
}
Q: Vercel 部署后无法正常工作
A. 请检查环境变量是否设置正确。Vercel 在动态输入提示中单击Settings > Environment Variables 中所述修改相应参数的值。
貢献
欢迎贡献!请按以下步骤操作:
- 分叉此存储库
- 创建特征分支(
git checkout -b feature/amazing-feature) - 提交更改(
git commit -m 'Add some amazing feature') - 推到分支(
git push origin feature/amazing-feature) - 创建拉式请求
开发指南
- TypeScript 正确使用的类型
- 明确提交消息
- 将测试添加到新功能
- 更新文档
许可证
MIT License - 了解更多信息 许可证 请参见文件。
参考链接
支持
如果有问题或问题GitHub问题 进行动态观察时的轴心点。
开発者:您的名字
最终更新: 2024 年 12 月