drio
Open app

MCP Demo

Source

cloudflare workers MCP server

Catalog onlyCatalog onlySTDIO

Overview

MCP Demo is a simple demonstration project that utilizes Cloudflare Workers MCP to create custom AI tools that can be used with AI assistants like Claude and Cursor.

To use MCP Demo, clone the repository, install dependencies, configure your Cloudflare Worker, and deploy it. After setup, you can interact with your custom tools directly from AI assistants.

  • Custom AI tools running on Cloudflare Workers - Seamless integration with Claude, Cursor, and other MCP clients - Ability to extend AI capabilities through serverless functions
  1. Generating random numbers with AI assistance
  2. Creating images based on text prompts
  3. Taking screenshots of URLs (requires a paid account)
  4. Extracting images from web pages (requires a paid account)

Add to your AI client

Use these steps to connect MCP Demo in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "workers-mcp-demo-akazwz": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-workers-mcp-demo-akazwz"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "workers-mcp-demo-akazwz": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-workers-mcp-demo-akazwz"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "workers-mcp-demo-akazwz": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-workers-mcp-demo-akazwz"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "workers-mcp-demo-akazwz": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-workers-mcp-demo-akazwz"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "workers-mcp-demo-akazwz": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-workers-mcp-demo-akazwz"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "workers-mcp-demo-akazwz": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-workers-mcp-demo-akazwz"
      ]
    }
  }
}

FAQ

What is MCP?

MCP (Model Context Protocol) is a standard developed by Anthropic for connecting AI assistants with data sources.

Do I need a paid Cloudflare account?

Some features, like screenshotting URLs and extracting images, require a paid account. Free users can still use other functionalities.

How can I add my own tools?

You can add your own tools by editing the `src/index.ts` file and redeploying your Worker.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":2229,"uuid":"9adf71c8-d3d0-41f9-b0ce-08dc69525006","name":"workers-mcp-demo","title":"MCP Demo","description":"cloudflare workers MCP server","avatar_url":"https://avatars.githubusercontent.com/u/50396286?v=4","created_at":"2025-03-09T04:25:26.122Z","updated_at":"2025-03-12T10:20:33.903Z","status":"created","author_name":"akazwz","author_avatar_url":"https://avatars.githubusercontent.com/u/50396286?v=4","tags":"[]","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/akazwz/workers-mcp-demo","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"25\",\"license\":\"\",\"language\":\"TypeScript\",\"is_official\":false,\"latest_commit_time\":\"2025-03-07 14:59:17\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools