DEV Community

Dinesh
Dinesh

Posted on

Hosting an MCP server on Vercel for FREE

#mcp #vercel #express #automation

So recently for an internship assignment, I had to create and deploy an mcp server. It was my first time working with MCP servers so deploying it was kind of a hassle and I couldn't find any blogs or documentation on how to deploy it quickly.

Long story short, I deployed it using Vercel for free and in this blog post I'm going to guide you through it. I assume you've already created a remote mcp server using StreamableHTTPServerTransportand it runs on your localhost. If not, no worries. Follow this example to switch your transport from stdio to httpStreamable

Github Example - Simple Server

Setting up for the Vercel deployment

  • Inside your tsconfig.json, inside "compilerOptions" 
// File Layout
    "rootDir": "./src",
    "outDir": "./dist",
Enter fullscreen mode Exit fullscreen mode

(this assumes your server is inside the 'src' directory)
Example -
Example Directory Layout

  • Inside your package.json, include the build script 
"scripts": {
    "build": "tsc", // make sure this build script is present
    "start": "node dist/server.js",
    "dev": "nodemon --watch 'src/**/*.ts' --exec ts-node src/server.ts"
  },
Enter fullscreen mode Exit fullscreen mode
  • Inside the server.ts Where you've created the mcp express app, you have to add the allowedHosts property and add your hostnames inside. 
const app = createMcpExpressApp({
    allowedHosts:["your-vercel-deployed-link.vercel.app.","localhost"]
})
Enter fullscreen mode Exit fullscreen mode

Eg-

const app = createMcpExpressApp({
    allowedHosts:["facebook-ads-mcp-server-six.vercel.app","localhost"]
})
Enter fullscreen mode Exit fullscreen mode

Now in order to retrieve the vercel url first we need to deploy the app so let's head over to vercel

Vercel Deployment

  1. Import Repository
  2. Select the Application Preset: Express and Deploy
  3. Copy your Project's Domain

Vercel Dashboard

  1. Add it to your allowedHosts array in server.ts : 
const app = createMcpExpressApp({
    allowedHosts:["facebook-ads-mcp-server-six.vercel.app","localhost"]
})
Enter fullscreen mode Exit fullscreen mode


( Include localhost for local dev purposes )

Now push the changes to your github repository (the one connected with your vercel project)

Final Test

Now use McpInspector to test whether your server

Note : When testing, remember that our server is exposing the server at the /mcpendpoint. So when you enter the url in Mcp Inspector, make sure to include /mcp in the end and don't enter the port number since all the traffic coming to the vercel servers is configured to be redirected to their server's 443port, so we need not specify any port number, even if a port number's specified in our express application code.

eg-

https://facebook-ads-mcp-server-six.vercel.app/mcp

Top comments (0)