MCP App Workers Template

You build an MCP server that exposes tools and interactive UI widgets at the edge, enabling MCP clients to run server-side functions and render rich widgets in hosts. This template gives you a production-ready foundation with TypeScript, React widgets, CSP support, and a clean build/deploy flow on Cloudflare Workers.

How to use

You connect with the MCP server from an MCP client to invoke tools and render widgets. Start by running the local development server to preview how tools respond and how widgets display inside MCP hosts. You can call example tools like get-anime-detail to search data and then render the results in an interactive widget. Widgets are registered to serve HTML via resource URIs and are wired to respond to host commands and tool results through the MCP Extensions Apps API.

How to install

Prerequisites you need before you begin include Node.js 18+ and npm, a Cloudflare account for deployment, and the Wrangler CLI installed via npm.

# 1) Install Node.js 18+ from nodejs.org
# 2) Install Wrangler globally if you don’t have it
npm install -g wrangler

# 3) Clone the project repository
git clone https://github.com/MCPJam/mcp-app-workers-template.git
cd mcp-app-workers-template

# 4) Install dependencies
npm install

# 5) Generate Cloudflare Workers types
npm run cf-typegen

Additional setup and usage notes

After you have dependencies installed and types generated, you will build and run the project locally to test MCP endpoints and widgets before deploying to Cloudflare Workers.

Build the widgets and server assets before development to ensure all bundles are available for serving in the MCP host.

To build widgets, you can run a targeted build or build all widgets to the ASSETS binding directory.

Available tools

get-anime-detail

Tool that searches for anime data (e.g., via Jikan API) and returns structured results for display in an interactive widget.