DVF巴黎--MCP应用程序
一个交互式MCP应用程序，直接在克劳德内部显示巴黎各区的房地产价格。
与 MCP应用软件开发工具包 (@modelcontextprotocol/ext-apps).
它做什么
向Claude询问巴黎房地产价格，并获得一个互动小部件：
- 全屏幕模式 （v0.8）：带地图（60%）和信息面板（40%）的拆分布局，交互式搜索
- 交互式地图 （传单+开放街道地图）突出显示该区
- 合唱部分 （v0.6）：地籍剖面按中位数价格着色，可点击查看详情
- 价格统计：平均价格/m²、中位数价格/m²和销售量
- 公寓/房屋切换
- 比较模式：用柱状图并排比较两个区
- 地址搜索 （v0.5）：按地址搜索并获取地籍部分的统计数据
- UI驱动搜索 （v0.8）：直接从小部件搜索地址和浏览地区
数据来源： DVF（函数值请求） 来自data.gov.fr。
建筑
Claude MCP Server UI (iframe)
│ │ │
│── "prix Paris 11" ──────>│ │
│ │── get-dvf-stats ───────>│
│ │ structuredContent │── Map + Stats
│ │ │
│── "compare 6e vs 11e" ──>│ │
│ │── compare-dvf-stats ───>│
│ │ mode: "compare" │── Map + Bar chart
│ │ │
│── "prix rue Roquette" ──>│ │
│ │── search-dvf-address ──>│
│ │ mode: "address" │── Map + Marker + Compare- 克劳德打电话来
get-dvf-stats,compare-dvf-stats或search-dvf-address - 该工具返回数据+引用
ui://dvf/mcp-app.html - Claude获取资源并将其显示在沙盒iframe中
- UI通过以下方式接收数据
app.ontoolresult
MCP工具
| 工具 | 输入 | 输出 |
|---|---|---|
get-dvf-stats | arrondissement （1-20） | 一个区的价格统计 |
compare-dvf-stats | arrondissement_1, arrondissement_2 （1-20） | 与柱状图并排比较 |
search-dvf-address | adresse （string） | 地籍断面统计+与区比较 |
堆栈
| 组件 | 技术 |
|---|---|
| MCP应用软件开发工具包 | @modelcontextprotocol/ext-apps |
| MCP服务器 | @modelcontextprotocol/sdk |
| 构建 | Vite+TypeScript |
| UI | 香草JS |
| 地图 | 传单+OpenStreetMap（不需要API密钥） |
| 图表 | 纯SVG（无依赖关系） |
| 传输 | stdio（克劳德桌面）或流式HTTP |
外部API
| API | 用法 |
|---|---|
| MCP数据.gouv | 实时DVF统计数据 |
| 地理平台API | 地址地理编码 |
| 地籍.数据.gouv.fr | 地籍剖面几何形状（GeoJSON） |
设置
npm install
npm run buildClaude桌面配置
添加 ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"dvf-paris": {
"command": "bash",
"args": ["-c", "cd /path/to/dvf-mcp-app && npx tsx main.ts --stdio"]
}
}
}然后重新启动Claude Desktop。
发展
# Watch mode (UI hot reload + server)
npm run dev
# Build only
npm run build
# Run server (Streamable HTTP on port 3001)
npm run serve项目结构
dvf-mcp-app/
├── server.ts # MCP Server + Tools + Resource
├── main.ts # Entry point (stdio + HTTP)
├── mcp-app.html # UI shell (HTML)
├── src/
│ ├── mcp-app.ts # UI logic (map, chart, host communication)
│ ├── mcp-app.css # Widget styles
│ ├── api/ # External API clients
│ │ ├── cadastre.ts # Cadastre GeoJSON client
│ │ ├── data-gouv.ts # MCP data.gouv client
│ │ └── geoplateforme.ts # Geocoding client
│ └── data/
│ ├── dvf-paris.json # Pre-computed stats (fallback)
│ └── arrondissements.geojson.json # GeoJSON boundaries
├── package.json
├── tsconfig.json
└── vite.config.ts路线图
- \[x\] v0.1 --基本统计小部件
- \[x\] v0.2 --带传单的交互式地图
- \[x\] v0.3 --比较模式（2个区）
- \[x\] v0.4 -通过data.gouv.fr API实时数据（带JSON回退）
- \[x\] v0.5 --使用地籍部分统计数据进行地址搜索
- \[x\] v0.6 --Choropleth地籍剖面图（可点击，按价格颜色编码）
- \[ \] v0.7 --最近交易的链接（可选）
- \[x\] v0.8 --全屏模式，带交互式搜索（拆分布局，callServerTool）
许可证
麻省理工学院