Json Ui Renderer

This example allows you to deploy a remote MCP server on Cloudflare Workers. Authentication is optional for local development and can be enabled with MCP_AUTH_TOKEN for public deployments.

Get started:

Deploy to Workers

This will deploy your MCP server to a URL like: remote-mcp-server-authless.<your-account>.workers.dev/mcp

Alternatively, you can use the command line below to get the remote MCP Server created on your local machine:

npm create cloudflare@latest -- my-mcp-server --template=cloudflare/ai/demos/remote-mcp-authless

Customizing your MCP Server

To add your own tools to the MCP server, define each tool inside the init() method of src/index.ts using this.server.tool(...).

Seguridad y contratos de UI

El endpoint /mcp acepta un token Bearer cuando existe el secreto MCP_AUTH_TOKEN. Para proteger un despliegue público, configura el secreto antes de conectarlo:

npx wrangler secret put MCP_AUTH_TOKEN

En desarrollo local, puedes definirlo en .dev.vars. Si no está definido, el endpoint permanece abierto para facilitar el desarrollo local.

Los Select usan una lista plana de textos en options, por ejemplo ["Todos", "Pendientes", "Listos"]; no uses objetos { label, value }.

Las interfaces están limitadas a 250 elementos, 100 filas por tabla, 100 opciones por selector y 500 KB por especificación para mantener tiempos de renderizado previsibles.

Connect to Cloudflare AI Playground

You can connect to your MCP server from the Cloudflare AI Playground, which is a remote MCP client:

1. Go to https://playground.ai.cloudflare.com/
2. Enter your deployed MCP server URL (remote-mcp-server-authless.<your-account>.workers.dev/mcp)
3. You can now use your MCP tools directly from the playground!

Connect Claude Desktop to your MCP server

You can also connect to your remote MCP server from local MCP clients, by using the mcp-remote proxy.

To connect to your MCP server from Claude Desktop, follow Anthropic's Quickstart and within Claude Desktop go to Settings > Developer > Edit Config.

Update with this configuration:

{
	"mcpServers": {
		"calculator": {
			"command": "npx",
			"args": [
				"mcp-remote",
				"http://localhost:8787/mcp" // or remote-mcp-server-authless.your-account.workers.dev/mcp
			]
		}
	}
}

Restart Claude and you should see the tools become available.