Skip to main content
Glama
JLex11

json-ui-renderer-mcp

by JLex11
README.md
# Building a Remote MCP Server on Cloudflare (Optional Auth)

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](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/ai/tree/main/demos/remote-mcp-authless)

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:

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

## Customizing your MCP Server

To add your own [tools](https://developers.cloudflare.com/agents/model-context-protocol/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:

```bash
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](https://www.npmjs.com/package/mcp-remote).

To connect to your MCP server from Claude Desktop, follow [Anthropic's Quickstart](https://modelcontextprotocol.io/quickstart/user) and within Claude Desktop go to Settings > Developer > Edit Config.

Update with this configuration:

```json
{
	"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.