Sponsored by Deepsite.site

Calculator SSE

Created By
biswapm8 months ago
Content

🧮 Implementation of Calculator SSE 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 ToolsNetwork 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.

Recommend Servers
TraeBuild with Free GPT-4.1 & Claude 3.7. Fully MCP-Ready.
DeepChatYour AI Partner on Desktop
WindsurfThe new purpose-built IDE to harness magic
Baidu Map百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。
Zhipu Web SearchZhipu Web Search MCP Server is a search engine specifically designed for large models. It integrates four search engines, allowing users to flexibly compare and switch between them. Building upon the web crawling and ranking capabilities of traditional search engines, it enhances intent recognition capabilities, returning results more suitable for large model processing (such as webpage titles, URLs, summaries, site names, site icons, etc.). This helps AI applications achieve "dynamic knowledge acquisition" and "precise scenario adaptation" capabilities.
CursorThe AI Code Editor
EdgeOne Pages MCPAn MCP service designed for deploying HTML content to EdgeOne Pages and obtaining an accessible public URL.
Playwright McpPlaywright MCP server
Tavily Mcp
TimeA Model Context Protocol server that provides time and timezone conversion capabilities. This server enables LLMs to get current time information and perform timezone conversions using IANA timezone names, with automatic system timezone detection.
AiimagemultistyleA Model Context Protocol (MCP) server for image generation and manipulation using fal.ai's Stable Diffusion model.
Visual Studio Code - Open Source ("Code - OSS")Visual Studio Code
Serper MCP ServerA Serper MCP Server
Context7Context7 MCP Server -- Up-to-date code documentation for LLMs and AI code editors
ChatWiseThe second fastest AI chatbot™
MCP AdvisorMCP Advisor & Installation - Use the right MCP server for your needs
Howtocook Mcp基于Anduin2017 / HowToCook (程序员在家做饭指南)的mcp server,帮你推荐菜谱、规划膳食,解决“今天吃什么“的世纪难题; Based on Anduin2017/HowToCook (Programmer's Guide to Cooking at Home), MCP Server helps you recommend recipes, plan meals, and solve the century old problem of "what to eat today"
MiniMax MCPOfficial MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.
BlenderBlenderMCP connects Blender to Claude AI through the Model Context Protocol (MCP), allowing Claude to directly interact with and control Blender. This integration enables prompt assisted 3D modeling, scene creation, and manipulation.
Jina AI MCP ToolsA Model Context Protocol (MCP) server that integrates with Jina AI Search Foundation APIs.
Amap Maps高德地图官方 MCP Server