Skip to content
Docs

How to create a contentful asset on Vercel

This is my wonderful

Ismael Rumzan

Copy link to headingHow to Add an MCP Server to an Express API

Make your Express API accessible to AI assistants through the Model Context Protocol.

CleanShot Dec 1 from Vercel Community.jpg

Copy link to headingIntroduction

Your Express API holds valuable data. AI assistants like Claude or Cursor can't access it directly. The Model Context Protocol (MCP) solves this problem by exposing your API as tools that AI models can discover and use.

This guide shows you how to add MCP to Express without rewriting your code. MCP tools will call your existing endpoints internally. Your API structure stays the same. The setup deploys to Vercel as serverless functions.

Testing dividers

Copy link to headingHello world

Copy link to headingWhat You'll Build

You will:

  • Create an Express API using Vercel's CLI
  • Add a weather endpoint
  • Build an MCP server with four specialized tools
  • Test with the MCP Inspector
  • Connect to Cursor IDE

Topics covered:

  • Initialize Express with vc init
  • Build REST endpoints
  • Add MCP with mcp-handler
  • Convert Express req/res to Web API format
  • Test MCP tools
  • Deploy to Vercel

Copy link to heading1. Initialize an Express Project

Create a new Express project with Vercel's CLI:

vc init express express-mcp-weather

Copy link to heading2. Build the Weather API Endpoint

Replace src/index.ts with a weather endpoint:

run.ts
import express from 'express';


const app = express();
const PORT = process.env.PORT || 3001;


app.use(express.json());


// Weather API endpoint
app.get('/api/weather/:city', async (req, res) => {
  try {
    const city = req.params.city;
    const units = req.query.units as string | undefined;
    const normalizedUnits = units === 'imperial' ? 'imperial' : 'metric';


    // Step 1: Geocode city to get coordinates
    const geoParams = new URLSearchParams({
      name: city,
      count: '1',
      language: 'en',
      format: 'json'
    });


    const geoResponse = await fetch(
      `https://geocoding-api.open-meteo.com/v1/search?${geoParams}`
    );


    if (!geoResponse.ok) {
      return res.status(geoResponse.status).json({
        error: 'Failed to fetch geocoding data'
      });
    }


    const geoData = await geoResponse.json();


    if (!geoData.results || geoData.results.length === 0) {
      return res.status(404).json({
        error: `City '${city}' not found`
      });
    }


    const location = geoData.results[0];
    const { name, country, latitude, longitude } = location;


    // Step 2: Fetch current weather data
    const weatherParams: Record<string, string> = {
      latitude: latitude.toString(),
      longitude: longitude.toString(),
      current: 'temperature_2m,relative_humidity_2m,apparent_temperature,wind_speed_10m',
      timezone: 'auto'
    };


    if (units === 'imperial') {
      weatherParams.temperature_unit = 'fahrenheit';
      weatherParams.wind_speed_unit = 'mph';
    }


    const weatherUrlParams = new URLSearchParams(weatherParams);
    const weatherResponse = await fetch(
      `https://api.open-meteo.com/v1/forecast?${weatherUrlParams}`
    );


    if (!weatherResponse.ok) {
      return res.status(weatherResponse.status).json({
        error: 'Failed to fetch weather data'
      });
    }


    const weatherData = await weatherResponse.json();


    res.json({
      city: name,
      country,
      latitude,
      longitude,
      units: normalizedUnits,
      current: weatherData.current
    });


  } catch (error) {
    console.error('Weather API error:', error);
    res.status(500).json({
      error: 'Failed to fetch weather data',
      message: error instanceof Error ? error.message : 'Unknown error'
    });
  }
});


export default app;

Copy link to headingAPI Reference

📊 Table:

  • Parameter | Description | Next.js | Other Frameworks
  • request | An instance of the Request object | NextRequest | Request
  • context | Deprecated, use @vercel/functions instead | N/A | waitUntil
export function GET(request: Request) {
  return new Response('Hello from Vercel!');
}
export function GET(request: Request) {
  return new Response('Hello from Vercel!');
}

Copy link to headingConclusion

You added MCP capabilities to Express. Your server has two interfaces: a REST API and an MCP server for AI assistants. Both share the same business logic.

Key patterns:

  • MCP tools wrap existing endpoints
  • Adapters bridge Express and Web APIs
  • Zod schemas provide validation and documentation
  • MCP error format helps AI assistants recover
  • MCP Inspector speeds development

Copy link to headingNext steps

  • Add tools for more endpoints
  • Implement OAuth authentication
  • Create tools that combine API calls
  • Explore the MCP specification

Copy link to headingResources

Related documentation

More Vercel Functions guides

Ready to deploy?

Start deployingTalk to an expert