Your QR endpoint is already an MCP tool. You didn't write any MCP code; the same class powers it. This page connects a real AI client to it and makes the call.
What MCP is, in one paragraph
MCP (Model Context Protocol) is how AI assistants like Claude call external tools. Your product speaks it natively at /mcp/. That means anyone can plug your product into Claude, ChatGPT, or Cursor and use it from a conversation. This is the surface that makes an API feel magical in 2026.
1. Have your demo API key ready
You copied it in Run It on Your Computer (the mcpsk_... one). Lost it? Log into the dashboard and mint a new key under API Keys.
2. Connect Claude Code
Create a file called mcp.json anywhere (your code folder is fine):
{
"mcpServers": {
"my-api": {
"type": "http",
"url": "http://127.0.0.1:8000/mcp/",
"headers": { "Authorization": "Bearer mcpsk_YOUR_KEY_HERE" }
}
}
}Then ask Claude to use it:
claude -p "Call the qr-code tool with text='https://learnwithhasan.com' and tell me what you get back." --mcp-config mcp.jsonClaude connects, discovers your tools, calls qr-code, and reports the PNG data URI it received. In our run it listed 7 tools: the 5 reference endpoints, get-job-status, and the qr-code tool you built.

Cursor and other clients
Same shape everywhere. In Cursor's mcp.json: "url": "http://127.0.0.1:8000/mcp/" with the same Authorization header. Any MCP client that supports HTTP servers and headers works.
3. What about Claude.ai in the browser?
Claude.ai's web connector needs to REACH your server, and it can't reach your laptop. Two options:
- Deployed server (the real answer): after Put It on the Internet, your
https://your-domain/mcp/works in Claude.ai's custom connector settings, including the one-click OAuth flow the boilerplate ships (users click Connect, approve, done; no key copying). - Tunnel for testing: the repo's
docs/MCP.mdhas a 5-minute ngrok recipe.
How auth works here (plain words)
Three ways in, all built for you:
- API key (
mcpsk_...): what you just used. Best for developers and scripts. - OAuth 2.1: what Claude.ai uses. Your users click "Connect", log into YOUR product, approve, and Claude gets a token. This is the flow that turns your endpoint into a consumer product.
- URL token: a special
/mcp/k/<token>/address for clients that can't send headers.
Every one of them resolves to the same user, the same credits, the same rate limits. Calls from Claude are billed exactly like REST calls.
Next: Charge Credits For It, where this stops being a demo and starts being a business.