Cost Explorer MCP

An MCP App — a tool that returns a real interactive UI, rendered live inside the conversation, instead of just text. This one estimates Claude API costs: sliders for request volume and token size, a live comparison chart across five models, and a button that hands the picked model straight back to the conversation.

• Hand-rolled JSON-RPC 2.0 over HTTP — no @modelcontextprotocol/sdk on the server side
• Zero runtime dependencies — pure arithmetic, no external API call, so tools/call costs nothing to run
• Deploys as a single AWS Lambda function behind a Function URL

Files

Build

npm install
npm run build

Produces dist/mcp-app.html — a single file with CSS and JS inlined, required since the host renders it in a sandboxed iframe under a strict CSP.

Deploy

Zip exactly three things: index.mjs, pricing.mjs, and dist/. Upload to a new Lambda function (Node.js 22+, no native dependencies), set the MCP_API_KEY environment variable, and create a Function URL with AuthType: NONE plus a CORS block:

• Allow origin: *
• Allow methods: GET, POST
• Allow headers: content-type, x-api-key, mcp-protocol-version, mcp-session-id, last-event-id

The CORS block matters because a browser-based host preflights every call with an OPTIONS request before the real one — without it, that preflight gets rejected and the app never loads.

Connect

Add it as a custom connector in Claude Desktop or Claude web, using the Function URL with the key appended as a query param (?key=...) — the connector dialog has no header field, so the handler accepts the key via query string as a fallback to the x-api-key header.