Map-Based Travel Planner

A full-stack travel planner with:

• MCP server tools for place search, routing, reverse geocoding, AI trip planning, and calendar export.
• React + Tailwind frontend with interactive Leaflet map, itinerary UI, and direct Anthropic planning calls.

1) Setup

From the project root:

cd mcp-server && npm install
cd ../frontend && npm install

2) Run MCP Server

From project root:

node mcp-server/index.js

The MCP server uses stdio transport and exposes:

• search_places
• get_route
• get_place_details
• plan_trip
• save_to_calendar

3) Run Frontend

cd frontend && npm run dev

App defaults:

• OpenStreetMap tiles for map rendering.
• Nominatim for city search.
• Itinerary generation from browser using xAI Grok, OpenAI, or Anthropic keys.

4) Register MCP Server with Claude Desktop

Add this to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "travel-planner": {
      "command": "node",
      "args": ["/Users/viplavsoni/Documents/travel-planner/mcp-server/index.js"]
    }
  }
}

You can also copy from claude_desktop_config.json in this repository.

5) Environment Variables

Required

• ANTHROPIC_API_KEY for MCP server (mcp-server)
• One of these for frontend (frontend):
  • VITE_XAI_API_KEY
  • VITE_OPENAI_API_KEY
  • VITE_ANTHROPIC_API_KEY

Create:

• mcp-server/.env (or export in shell)
• frontend/.env with:

VITE_XAI_API_KEY=your_xai_grok_api_key_here
VITE_OPENAI_API_KEY=your_openai_api_key_here
VITE_ANTHROPIC_API_KEY=your_anthropic_api_key_here

Notes

• This project uses only free mapping services: OpenStreetMap, Nominatim, and OSRM.
• No separate backend API is required for the frontend; it calls Anthropic and map services directly.