AI导哈

电动汽车充电站查找器

一个使用Open Charge Map MCP的交互式演示Web应用，通过地图、坐标或自然语言命令查找并展示电动汽车充电站。

  • by andreibesleaga
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 andreibesleaga/ocm-demo

使用说明

OCM MCP Demo - Electric Vehicles Charger Stations Finder

[!WARNING] Proof-of-concept / demo — not intended for production use.

A simple web app demonstrating the OCM (Open Charge Map) MCP (Model Context Protocol) SDK, using the npm package of https://github.com/andreibesleaga/ocm-sdk mcp-server.

Live demo: https://ocm-demo.up.railway.app/

This app spawns the ocm-mcp server locally (npx ocm-mcp) over stdio. A separately hosted instance of the same MCP server is also available at https://ocm-mcp.stlmcp.com for connecting external AI tools — it is an optional external endpoint, not required by this demo.

API Reference: https://andreibesleaga.github.io/ocm-api-reference/api.html

Features

  • Interactive map showing EV charging stations
  • AI-style command interface using MCP
  • Real-time data from Open Charge Map API
  • Click-to-select map coordinates

Project Structure

ocm-demo/
├── index.js              # Main Express application
├── mcp-server.js         # MCP client implementation (legacy name)
├── mcp-client.js         # Clearer alias re-exporting the MCP client
├── examples/
│   └── standalone.js     # Use the MCP client without the web server
├── docs/
│   └── mcp-contract.md   # HTTP + MCP request/response contract
├── public/
│   ├── index.html        # Web interface
│   └── app.js            # Client-side JavaScript
├── package.json
└── README.md

Note: mcp-server.js actually implements an MCP client. mcp-client.js is a thin alias with the clearer name; existing imports of mcp-server.js keep working.

Setup

  1. Install dependencies:
npm install
  1. Set environment variable (optional):
export OCM_API_KEY=your_ocm_api_key
  1. Run the application:
npm start
  1. Open http://localhost:3000

Usage

Web Interface Commands

Enter commands like:

  • "Find charging stations in US" or "charging US"
  • "Find charging stations in London, GB" or "stations near London, GB"
  • "charging stations Paris, FR" or "stations Paris"
  • "Search coordinates 51.5074, -0.1278" (from map clicks)
  • "List tools" or "tools" (show available MCP tools)

Map Interaction

  • Click anywhere on the map to select coordinates
  • Click "Search Here" to find stations within 25km of selected point
  • Auto-populated coordinates in command field

The app accepts flexible command formats - just mention "charging", "stations", "poi", or "coordinates" with a location.

Running MCP Server Separately

For Claude Desktop or Other AI Tools

The MCP server can be run independently and connected to Claude Desktop or other MCP-compatible AI tools.

Option 1: Direct NPX Command

npm run mcp-server
# or
npx ocm-mcp

Option 2: Claude Desktop Integration

Add to your Claude Desktop config file (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

{
  "mcpServers": {
    "ocm": {
      "command": "npx",
      "args": ["ocm-mcp"],
      "env": {
        "OCM_API_KEY": "your_api_key_here"
      }
    }
  }
}

Option 3: Using the MCP Client Module

import MCPClient from './mcp-server.js';

const client = new MCPClient();

// List available tools
const tools = await client.listTools();
console.log('Available tools:', tools);

// Search for charging stations
const stations = await client.callTool('list_poi', {
  latitude: 51.5074,
  longitude: -0.1278,
  distance: 25,
  maxresults: 50
});

Available MCP Tools

The OCM MCP server provides these tools:

  • list_poi - Search for charging stations by location
  • retrieve_referencedata - Get reference data (countries, operators, etc.)
  • authenticate_profile - Authenticate user profile
  • submit_comment - Submit comments about charging stations
  • create_mediaitem - Create media items
  • retrieve_openapi - Get OpenAPI specification

Example Claude Prompts

Once connected to Claude Desktop:

  • "Find EV charging stations in London"
  • "Show me fast charging stations within 50km of Paris"
  • "List charging stations in California with Tesla connectors"
  • "What charging options are available near coordinates 40.7128, -74.0060?"

Environment Variables

  • OCM_API_KEY - Optional Open Charge Map API key for higher rate limits
  • PORT - Server port (default: 3000)
  • RATE_LIMIT_WINDOW_MS - Rate-limit window in ms (default: 60000)
  • RATE_LIMIT_MAX_REQUESTS - Max requests per window per IP (default: 120)
  • NODE_ENV - Set to production to return generic error messages (no internals)

API Endpoints

  • POST /api/mcp - Send MCP commands to the server (see docs/mcp-contract.md)
  • GET /healthz - Liveness probe, returns { "ok": true }
  • GET / - Serve the web interface

Tests

npm test

Runs the Vitest suite in tests/: /healthz, the command parser, the empty-command guard, and the sanitized-error path (MCP layer mocked).

Manual review checklist

  • config: .env (OCM_API_KEY optional), env vars above
  • run: npm install then npm start, open http://localhost:3000
  • examples: node examples/standalone.js; web commands under "Example queries" above
  • result: charging-station list rendered on the map; List tools shows 6 MCP tools
  • path: server index.js, MCP client mcp-client.js/mcp-server.js, UI public/

相关 MCP