# Run an MCP Server on Vercel

## Usage

Update `api/server.js` with your tools, prompts, and resources following the [MCP TypeScript SDK documentation](https://github.com/modelcontextprotocol/typescript-sdk/tree/main?tab=readme-ov-file#server).

[There is also a Next.js version of this template](https://vercel.com/templates/next.js/model-context-protocol-mcp-with-next-js)

## MCP Client Integration

When adding this server to an MCP client application, use your deployment URL followed by `/mcp` (Streamable HTTP). The SSE transport is available at `/sse`:

```
https://your-deployment-url.vercel.app/mcp
```

## MCP Apps UI hook

This template registers an MCP Apps UI resource at `ui://hello_app_panel` and links it to the `hello_world` tool via `_meta.ui.resourceUri`. MCP hosts that support MCP Apps will render the panel inline and forward tool calls initiated from the UI.

## Example Tools

The template includes one example tool to get you started:

- **`hello_world`** - Returns a hello message with an allowlisted `style` input.

## Notes for running on Vercel

- Make sure you have [Fluid compute](https://vercel.com/docs/functions/fluid-compute) enabled for efficient execution
- After enabling Fluid compute, open `vercel.json` and adjust max duration to 800 if you using a Vercel Pro or Enterprise account
- [Deploy the MCP template](https://vercel.com/templates/other/model-context-protocol-mcp-with-vercel-functions)

## Local dev

- Run `vercel dev` for local development
- Alternatively, integrate the system into the server framework of your choice.

## Testing & validation

You can list tools via the included clients:

```sh
node scripts/test-streamable-http-client.mjs http://localhost:3000
```

Or for SSE transport:

```sh
node scripts/test-client.mjs http://localhost:3000
```

To manually call the tool via Streamable HTTP, use a simple JSON-RPC request (replace the origin as needed):

```sh
curl -sS http://localhost:3000/mcp \\
  -H 'content-type: application/json' \\
  -d '{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"tools/call\",\"params\":{\"name\":\"hello_world\",\"arguments\":{\"style\":\"friendly\"}}}'
```

## Sample Client

`scripts/test-client.mjs` contains a sample client to try invocations.

```sh
node scripts/test-client.mjs https://mcp-on-vercel.vercel.app
```