buildwithlayer/mcp-http-demo

Basic Streamable-HTTP MCP Server Tutorial

Hey there! This is a basic tutorial for setting up a Streamable-HTTP MCP server. In this tutorial we will cover the following:

• Setting up a basic Streamable-HTTP MCP server
• Adding a basic tool
• Adding an API tool
• (Coming soon) Adding Authentication

Setup

1. Clone the repository
2. Run npm install to install the dependencies
3. Run npm run dev to start the server
4. Open the inspector using DANGEROUSLY_OMIT_AUTH=true npx @modelcontextprotocol/inspector@latest http://localhost:3040

Adding a basic tool

1. Open src/server.ts
2. Add a tool to the server under where the McpServer class is defined

server.tool(
  "add",
  "Use this tool to add two numbers together.",
  {
    a: z.number().describe("The first number to add"),
    b: z.number().describe("The second number to add"),
  },
  async ({ a, b }) => {
    // FILL THIS IN YOURSELF
  }
);

3. Refresh in the inspector and call the tools

Adding an API tool

1. Open src/server.ts
2. We will use this api to test adding an api tool since it has no auth and is free to use Curreny Rates API
3. Lets try and "vibe" code the tool. First copy the context of the github readme and paste it into the inline chat in cursor as such:
4. If that didn't work, you can always use the solution file as a reference. The solution file is in the solutions folder.

Adding Authentication

COMING ONE DAY -- The solution file contains the server with auth

Optional: Trying your server in another client

1. Make an ngrok account here and install the ngrok cli
2. Run your server and in a new terminal run ngrok http 3040. This exposes your server to the internet. Grab the forwarding url
3. Go to this web app.
4. Enter the forwarding url and append /mcp to the end
5. Grab an API key from assembly AI assembly ai and add it to the API key field
6. Play with the App!