Skip to content

๐Ÿ˜ Jokes MCP Server Sample (Streamable HTTP version) โ€‹

Welcome to the Jokes MCP Server Sample (Streamable HTTP version). In this sample, you will learn how to deploy the MCP Server to Azure or run it locally, and then add it to Microsoft Copilot Studio.

This MCP Server has multiple tools available:

  • get-chuck-joke | Get a random Chuck Norris joke
  • get-chuck-joke-by-category | Get a random Chuck Norris joke by category
  • get-chuck-categories | Get all available categories for Chuck Norris jokes
  • get-dad-joke | Get a random dad joke

โš™๏ธ Prerequisites โ€‹

๐Ÿš€ Minimal path to awesome โ€‹

  1. Clone this repository

  2. Open Visual Studio Code and open the sample folder

  3. Open the terminal and navigate to the sample folder

  4. Run npm install

  5. Run npm run build && npm run start

    Terminal view after building and starting the server

  6. Select PORTS at the top of the Visual Studio Code Terminal

    Image of VS Code where the terminal is open and the PORTS tab is highlighted

  7. Select the green Forward a Port button

    Image of VS Code where the PORTS tab is open and the green  button is highlighted

  8. Enter 3000 as the port number (this should be the same as the port number you see when you ran the command in step 5). You might be prompted to sign in to GitHub, if so please do this, since this is required to use the port forwarding feature.

  9. Right click on the row you just added and select Port visibility > Public to make the server publicly available

  10. Ctrl + click on the Forwarded address, which should be something like: https://something-3000.something.devtunnels.ms

  11. Select Copy on the following pop-up to copy the URL

    View of the PORTS setup with highlighted the port, the forwarded address and the visibility

  12. Open to the browser of your choice and paste the URL in the address bar, type /mcp behind it and hit enter

If all went well, you will see the following error message:

json
{"jsonrpc":"2.0","error":{"code":-32000,"message":"Method not allowed."},"id":null}

Don't worry - this error message is nothing to be worried about!

๐ŸŒŽ Host on Azure Container Apps โ€‹

Make sure to login to Azure Developer CLI if you haven't done that yet.

azurecli
azd auth login

Run the following command in the terminal:

azurecli
azd up

After running the azd up command, it will take a couple of minutes before the server has been deployed. When it's done - you should be able to go to the URL that's listed at the end and add /mcp to the end of that URL.

Azd deploy server output

You should again see the following error:

json
{"jsonrpc":"2.0","error":{"code":-32000,"message":"Method not allowed."},"id":null}

Again - don't worry - this error message is nothing to be worried about!

๐Ÿ‘จโ€๐Ÿ’ป Use the Jokes MCP Server in Visual Studio Code / GitHub Copilot โ€‹

To use the Jokes MCP Server, you need to use the URL of your server (can be either your devtunnel URL or your deployed Azure Container App) with the /mcp part at the end and add it as an MCP Server in Visual Studio Code.

  1. Press either ctrl + shift + P (Windows/Linux) or cmd + shift + P (Mac) and type MCP

  2. Select MCP: Add Server...

  3. Select HTTP (HTTP or Server-Sent Events)

  4. Paste the URL of your server in the input box (make sure /mcp in the end is included)

  5. Press Enter

  6. Enter a name for the server, for instance JokesMCP

  7. Select User Settings to save the MCP Server settings in your user settings

  8. Open GitHub Copilot

  9. Switch from Ask to Agent

  10. Make sure the JokesMCP server actions are enabled

  11. Ask the following question:

    text
    Get a chuck norris joke from the Dev category

This should give you a response like this:

Screenshot of question to provide a joke from the dev category and the answer from GitHub Copilot

Now you have added the JokesMCP server to Visual Studio Code!

๐Ÿ˜ Jokes MCP Server Sample (Streamable HTTP version)