calculator-sse

calculator-sse

12
cloud_platformsdeveloper_toolscommunication

This project showcases a demo MCP Server implemented with Node.js and TypeScript. It features calculation tools like BMI and addition, providing real-time responses via Server-Sent Events. The project demonstrates integration with Microsoft Copilot Studio and GitHub Copilot Agent.

🧮 Step by step Implementation of MCP Server and Integration into Microsoft Copilot Studio and Github Copilot Agent

This is a demo Node.js + TypeScript MCP SDK using Model Context Protocol SDK. It exposes simple calculation tools like BMI and addition through MCP, and supports real-time responses via Server-Sent Events (SSE). Explore the MCP architecture and best practices using the MCP Architecture and SSE transport.

🚀 Features

  • ✅ SSE (Server-Sent Events) Support
  • ✅ BMI Calculator Tool
  • ✅ Addition Tool
  • ✅ MCP Tool + Github Copilot Agent Integration
  • ✅ MCP Tool + Microsoft Copilot Studio Integration
  • ✅ Azure App Service Ready

📁 Project Structure

⚙️Quick Start

npm install      # Install dependencies
npm run build    # Compile TypeScript
npm run start    # Start server (http://localhost:3001)

The app will run at http://localhost:3001 (unless configured otherwise).

🧪 MCP Tools

🔹 calculate-bmi

Input:

{
  "weightKg": 70,
  "heightM": 1.75
}

Response:

{
  "content": [{ "type": "text", "text": "22.86" }]
}

🔹 calculate-sum

Input

{
  "a": 5,
  "b": 3
}

Response:

{
  "content": [{ "type": "text", "text": "8" }]
}

🔁 SSE Endpoint

The server supports Server-Sent Events (SSE) via:

GET /sse

🖥️ MCP Tool + Github Copilot Agent Integration (VSCode)

  1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
  2. Type "Add MCP Server" and select it.
  3. Update .vscode/mcp.json with the following:
{
    "servers": {
        "my-mcp-server": {
            "type": "sse",
            "url": "http://localhost:3001/sse"
        }
    }
}

Result in Github Copilot Agent

The server appears and is connected successfully.

🖥️ MCP Tool + Microsoft Copilot Studio Integration (Custom Connector)

For details on integrating Model Context Protocol (MCP) tools into Microsoft Copilot Studio using custom connectors, check out the official Microsoft documentation: 🔗 Extend Copilot actions using MCP in Copilot Studio

MCP Custom connector Copilot Studio Integration

It shows how to set up the MCP Tools for actions to work with custom connectors in Copilot Studio.

Swagger Specification

swagger: '2.0'
info:
  title: MCPCalculatorDemo
  description: Calculate BMI and Calculate sum using MCP SSE server
  version: '1.0'
host: calculatormcp-dummyurl.azurewebsites.net
basePath: /
schemes:
  - https
definitions:
  QueryResponse:
    type: object
    properties:
      jsonrpc:
        type: string
      id:
        type: string
      method:
        type: string
      params:
        type: object
      result:
        type: object
      error:
        type: object
paths:
  /sse:
    get:
      summary: MCP Server Actions for calculating BMI and sum
      parameters:
        - in: query
          name: sessionId
          type: string
          required: false
      produces:
        - application/json
      responses:
        '200':
          description: Immediate Response
          schema:
            $ref: '#/definitions/QueryResponse'
        '201':
          description: Created and will follow callback
      operationId: CalculatorDemo
      tags:
        - Agentic
        - McpSse
securityDefinitions: {}
security: []

image

Using MCP Server Action in Copilot Studio

Steps to Access the MCP Server Action

  1. Open Copilot Studio
    Navigate to your Copilot Studio workspace.

  2. Go to Actions
    Click on the Action menu in the left sidebar.

  3. Select "Custom connector"
    Under the Action menu, choose Custom connector.

  4. Locate the MCP Server Action
    The system will automatically display available tools. Select the MCP Server Action from the list.

    Custom Connector Selection

  5. MCP Server Action Preview
    You will be able to view the details of the selected MCP Server Action as shown below:

    MCP Server Action

📌 Considerations

  • ✅ The /sse endpoint should return the full URI (including protocol and host) when initializing the MCP transport. This ensures compatibility when deploying across environments (e.g., localhost vs Azure). It establishes a live connection for streaming MCP interactions.

    Example:

    const protocol = req.protocol;
const host = req.get('host');
const fullUri = `${protocol}://${host}/mcp`;

🔄 Return / Server-Sent Events (SSE) with Full URI

Ensure your custom connector supports SSE (Server-Sent Events) and returns the full URI as shown: Return SSE with Full URI

🏷️ Add Tags to Your Custom Connector

tags:
  - Agentic
  - McpSse

⚠️ Naming Guidance

Do not use "InvokeMCP" as your operationId.
Choose a more specific and descriptive name to reflect the purpose of the action and avoid conflicts.

☁️ Deploy to Azure (Optional)

Create an Azure App Service (Node.js 18+) Set the startup command (if needed):

npm run build && npm run start

SSE Deployment Update

The SSE deployment to Azure with the West US 2 region using the Basic plan was successful and tested without issues.

🛠️ Troubleshooting

✅ How to Check if Your SSE Server is Running Properly

Follow these steps to verify that your SSE (Server-Sent Events) server is functioning correctly:

🔍 Step 1: Browse the SSE Endpoint

  • Open your browser and navigate to:

    • http://localhost:3000/sse (if running locally), or
    • Your deployed Azure URL.

  • Open Developer Tools → Network tab.

  • Look for an EventStream connection.

  • Under the Event section, you should see:

    • Endpoint: SSE endpoint
    • Data: Your Full URI endpoint

SSE Browser Network Trace

🧪 Step 2: Test SSE Endpoint via Postman

  1. Copy the Full URI (from the EventStream data).
  2. Use Postman to send a POST request to that URI.

Example URL:

http://calculatormcp-dummyurl.azurewebsites.net/mcpfy/v1/calculatordemo?sessionId=620c84e1-81e2-484d-8737-a7fbc93165b1

Example Request Payload:

{
  "jsonrpc": "2.0",
  "id": "2",
  "method": "tools/call",
  "params": {
    "name": "calculate-bmi",
    "arguments": {
      "weightKg": 180,
      "heightM": 1.8
    }
  }
}

If successful, you'll receive a response with a "message" confirming that the server is working correctly.

🖼️ Sample Screenshots

Browser Network Event Trace:

Event Trace

Postman Response:

Postman Output

Alternatively, you can use MCP Inspector to test, https://github.com/modelcontextprotocol/inspector

Disclaimer

This is an unsupported, experimental, and not an official Microsoft product. It is provided "as is", without support and without any warranties, whether express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a particular purpose, and non-infringement.

In no event shall the authors or copyright holders be liable for any claims, damages, or other liabilities, whether in contract, tort, or otherwise, arising from, out of, or in connection with the Software or the use or other dealings in the Software.

⚠️ Important Note:
This is a sample demo custom MCP server created for demonstration purposes. It is deployed into Microsoft Azure and intended solely for integration with Copilot Studio during prototyping or sample scenarios.
This component is not part of any official Microsoft product and is not available for production use.