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:
[](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.
This server cannot be deployed
Maintenance
ActivityStale
ResponsivenessNo issues