Connect to all the apps with OAuth DCR + CIMD

One client, many services. Connect with Dynamic Client Registration or Client ID Metadata Documents, then ask one question across everything you authorized.

\n${error?`

${esc(error)}

`:\"\"}\n

Chat with your connections

${hasConnections?\"Ask about the services you connected below.\":\"Connect at least one app below to enable chat.\"}

${hasConnections?\"Ask me for the three most recent items from each connected service.\":\"Your connected apps will appear here.\"}

\n${mode===\"home\"\n ?`

Featured apps

${featured.length} well-known services found by scanning every remote server in the MCP registry on ${esc(registryScanMeta.scannedAt)}. Browse the full A–Z list — ${publicCount.toLocaleString()} services total.

${featuredRows}

App	DCR	CIMD

`\n :`

All ${publicCount.toLocaleString()} apps, A–Z

Every service found by scanning the MCP registry on ${esc(registryScanMeta.scannedAt)} (${registryScanMeta.hostsWithDcr.toLocaleString()} hosts advertise DCR, ${registryScanMeta.hostsWithCimd.toLocaleString()} advertise CIMD). View featured.

${allRows}

App	DCR	CIMD

`}\n

Featured Full list (${publicCount.toLocaleString()} apps)Code tour View source

\n\n

`;\n}\n\napp.get(\"/directory\",c=>c.redirect(\"/#directory\"));\napp.get(\"/code-tour\",c=>c.html(codeTourPage()));\n\napp.get(\"/\", async c => {\n await init();\n const sid=cookie(c.req.raw,\"mcp_demo_sid\");\n let connections:any[]=[];\n if(sid) connections=(await sqlite.execute({sql:\"SELECT provider,tools,connected_at FROM mcp_connections WHERE sid=? AND access_token IS NOT NULL\",args:[sid]})).rows as any[];\n return c.html(page(connections,c.req.query(\"error\"),\"home\"));\n});\n\napp.get(\"/apps\", async c => {\n await init();\n const sid=cookie(c.req.raw,\"mcp_demo_sid\");\n let connections:any[]=[];\n if(sid) connections=(await sqlite.execute({sql:\"SELECT provider,tools,connected_at FROM mcp_connections WHERE sid=? AND access_token IS NOT NULL\",args:[sid]})).rows as any[];\n return c.html(page(connections,undefined,\"all\"));\n});\n\napp.get(\"/oauth/client-metadata.json\",c=>{\n const origin=new URL(c.req.url).origin;\n return c.json({\n client_id:origin+\"/oauth/client-metadata.json\",\n client_name:\"Connect to all the apps with OAuth DCR + CIMD\",\n client_uri:origin,\n redirect_uris:[origin+\"/oauth/callback\"],\n grant_types:[\"authorization_code\",\"refresh_token\"],\n response_types:[\"code\"],\n token_endpoint_auth_method:\"none\",\n });\n});\n\napp.get(\"/oauth/:provider/:mode/start\",async c=>{\n await init();\n const p=await resolveProvider(c.req.param(\"provider\"));\n const mode=c.req.param(\"mode\");\n if(!p||![\"dcr\",\"cimd\"].includes(mode))return c.notFound();\n if(mode===\"cimd\"&&!p.cimd)return c.redirect(\"/?error=\"+encodeURIComponent(p.name+\" does not advertise CIMD.\"));\n try{\n const origin=new URL(c.req.url).origin;\n const redirectUri=origin+\"/oauth/callback\";\n const verifier=b64url(crypto.getRandomValues(new Uint8Array(48)));\n const challenge=await sha256(verifier);\n const state=crypto.randomUUID();\n let client:any={client_id:origin+\"/oauth/client-metadata.json\"};\n if(mode===\"dcr\"){\n const registration={\n client_name:\"Connect to all the apps with OAuth DCR + CIMD\",client_uri:origin,redirect_uris:[redirectUri],\n grant_types:[\"authorization_code\",\"refresh_token\"],response_types:[\"code\"],token_endpoint_auth_method:p.authMethod,\n };\n const rr=await fetch(p.register,{method:\"POST\",headers:{\"content-type\":\"application/json\",\"accept\":\"application/json\"},body:JSON.stringify(registration)});\n const raw=await rr.text();\n if(!rr.ok)throw new Error(`${p.name} registration failed (${rr.status}): ${raw.slice(0,160)}`);\n client=JSON.parse(raw);\n }\n await sqlite.execute({sql:\"INSERT INTO mcp_flows(state,provider,client_id,client_secret,verifier,redirect_uri,created_at) VALUES(?,?,?,?,?,?,?)\",args:[state,p.key,client.client_id,client.client_secret||null,verifier,redirectUri,Date.now()]});\n const q:Record={response_type:\"code\",client_id:client.client_id,redirect_uri:redirectUri,state,code_challenge:challenge,code_challenge_method:\"S256\"};\n q.resource=p.endpoint;\n if(p.scope)q.scope=p.scope;\n return c.redirect(p.auth+\"?\"+new URLSearchParams(q));\n }catch(e){return c.redirect(\"/?error=\"+encodeURIComponent(e instanceof Error?e.message:String(e)))}\n});\n\napp.get(\"/mcp/:provider/start\",c=>c.redirect(\"/oauth/\"+c.req.param(\"provider\")+\"/dcr/start\"));\n\napp.get(\"/oauth/callback\",async c=>{\n await init();\n const state=c.req.query(\"state\")||\"\",code=c.req.query(\"code\")||\"\";\n const flow:any=(await sqlite.execute({sql:\"SELECT * FROM mcp_flows WHERE state=?\",args:[state]})).rows[0];\n if(!flow||!code)return c.redirect(\"/?error=\"+encodeURIComponent(\"OAuth response could not be verified.\"));\n const p=await resolveProvider(flow.provider);\n if(!p)return c.redirect(\"/?error=\"+encodeURIComponent(\"Unknown provider.\"));\n try{\n const form:Record={grant_type:\"authorization_code\",code,client_id:flow.client_id,redirect_uri:flow.redirect_uri,code_verifier:flow.verifier};\n form.resource=p.endpoint;\n if(flow.client_secret)form.client_secret=flow.client_secret;\n const tr=await fetch(p.token,{method:\"POST\",headers:{\"content-type\":\"application/x-www-form-urlencoded\",\"accept\":\"application/json\"},body:new URLSearchParams(form)});\n const raw=await tr.text();\n if(!tr.ok)throw new Error(`${p.name} token exchange failed (${tr.status}): ${raw.slice(0,160)}`);\n const token=JSON.parse(raw);\n const summary=await authenticatedTools(p,token.access_token);\n const encryptedToken=await encryptToken(token.access_token);\n let sid=cookie(c.req.raw,\"mcp_demo_sid\")||crypto.randomUUID();\n await sqlite.batch([\n {sql:\"INSERT OR REPLACE INTO mcp_connections(sid,provider,tools,access_token,connected_at) VALUES(?,?,?,?,?)\",args:[sid,p.key,JSON.stringify(summary),encryptedToken,Date.now()]},\n {sql:\"DELETE FROM mcp_flows WHERE state=?\",args:[state]},\n {sql:\"DELETE FROM mcp_flows WHERE created_at < ?\",args:[Date.now()-3600000]},\n ]);\n return new Response(null,{status:302,headers:{location:\"/\",\"set-cookie\":`mcp_demo_sid=${sid}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=86400`}});\n }catch(e){return c.redirect(\"/?error=\"+encodeURIComponent(e instanceof Error?e.message:String(e)))}\n});\n\napp.get(\"/mcp/callback\",c=>c.redirect(\"/oauth/callback?\"+new URL(c.req.url).searchParams));\n\napp.post(\"/chat\", async c => {\n await init();\n const sid=cookie(c.req.raw,\"mcp_demo_sid\");\n if(!sid) return c.json({error:\"Connect at least one service first.\"},401);\n const body=await c.req.json();\n const message=String(body.message||\"\").trim();\n if(!message) return c.json({error:\"Enter a question.\"},400);\n const toolCalls:any[]=[];\n try{\n const rows:any[]=(await sqlite.execute({sql:\"SELECT provider,access_token FROM mcp_connections WHERE sid=? AND access_token IS NOT NULL\",args:[sid]})).rows as any[];\n if(!rows.length) return c.json({error:\"Reconnect a service to enable chat.\"},400);\n const registry=new MapPromise}>();\n const aiTools:any[]=[];\n for(const row of rows){\n const provider=await resolveProvider(row.provider);\n if(!provider)continue;\n const token=await decryptToken(row.access_token);\n const {tools}=await mcpToolList(provider,token);\n for(const tool of tools){\n let fn=(provider.key+\"__\"+tool.name).replace(/[^a-zA-Z0-9_-]/g,\"_\").slice(0,64);\n let n=2;while(registry.has(fn))fn=(fn.slice(0,60)+\"_\"+n++).slice(0,64);\n registry.set(fn,{provider,token,tool});\n aiTools.push({type:\"function\",function:{name:fn,description:`[${provider.name}] ${tool.description||tool.name}`.slice(0,1000),parameters:tool.inputSchema||{type:\"object\",properties:{}}}});\n }\n }\n const openai=new OpenAI();\n const connectedNames=rows.map((r:any)=>byKey.get(r.provider)?.name||directoryEntries.find(x=>slug(x.service)===r.provider)?.service).filter(Boolean);\n const proofMode=/each connected service|each of my connected services|most recent items|proves? the connection/i.test(message);\n if(proofMode){\n const proofRequests:Record={\n valtown:\"Use the authenticated Val Town MCP tools to find the three most recently updated projects.\",\n notion:\"Find the three most recently edited Notion pages or documents. Prefer an API/tool result explicitly sorted by last edited time.\",\n linear:\"Find the three most recently updated Linear issues.\",\n sentry:\"Find the three most recent Sentry issues or errors.\",\n stripe:\"Find the three most recent Stripe payments; if payments are unavailable, use the three most recent customers.\",\n };\n const proofLabels:Record={\n valtown:\"Your three most recently updated Val Town projects are:\",\n notion:\"Your three most recently edited Notion docs are:\",\n linear:\"Your three most recently updated Linear issues are:\",\n sentry:\"Your three most recent Sentry issues or errors are:\",\n stripe:\"Your three most recent Stripe payments are:\",\n };\n const proofs:string[]=[];\n for(const row of rows){\n const provider=await resolveProvider(row.provider);\n if(!provider) continue;\n const prefix=provider.key+\"__\";\n const toolsForProvider=aiTools.filter((t:any)=>t.function.name.startsWith(prefix));\n if(!toolsForProvider.length){proofs.push(\"### \"+provider.name+\"\\nConnected, but no tools were advertised.\");continue;}\n const proofMessages:any[]=[\n {role:\"system\",content:`You are proving that an OAuth connection to ${provider.name} works. You MUST call at least one provided tool and use its returned data. ${proofRequests[provider.key]||`Find the three most recently updated items in ${provider.name}.`} You MUST return exactly three real items when the tool provides them. Include each item’s title or identifying name and its updated/created date when available. Link every item title to its service-provided URL using Markdown. Never invent or guess a URL; if the tool returns no URL, leave that title unlinked and state that no URL was provided. If the tools cannot determine recency or return fewer than three items, say that plainly; never substitute an arbitrary result or invent data. Format the result as a short numbered Markdown list only. Do not mention any other service.`},\n {role:\"user\",content:proofRequests[provider.key]||\"Fetch the three most recently updated items.\"},\n ];\n let proof=\"\";\n for(let round=0;round<5;round++){\n const completion:any=await openai.chat.completions.create({model:\"gpt-5.4-nano\",messages:proofMessages,tools:toolsForProvider,tool_choice:round===0?\"required\":\"auto\",max_completion_tokens:500});\n const reply=completion.choices?.[0]?.message;\n if(!reply) break;\n proofMessages.push(reply);\n if(!reply.tool_calls?.length){proof=reply.content||\"\";break;}\n for(const call of reply.tool_calls){\n const item=registry.get(call.function.name);\n if(!item) continue;\n let args={}; try{args=JSON.parse(call.function.arguments||\"{}\")}catch{}\n try{\n const result=item.call?await item.call():await mcpToolCall(item.provider,item.token,item.tool.name,args);\n const response=JSON.stringify(result,null,2).slice(0,30000);\n toolCalls.push({service:item.provider.name,name:item.tool.name,args,response});\n proofMessages.push({role:\"tool\",tool_call_id:call.id,content:response});\n }catch(e){\n const error=e instanceof Error?e.message:String(e);\n toolCalls.push({service:item.provider.name,name:item.tool.name,args,error});\n proofMessages.push({role:\"tool\",tool_call_id:call.id,content:\"Tool error: \"+error});\n }\n }\n }\n proofs.push(\"### \"+provider.name+\"\\n\"+(proofLabels[provider.key]||\"Your three most recent items are:\")+\"\\n\"+(proof||\"Connected, but I could not retrieve three recent items.\"));\n }\n return c.json({answer:proofs.join(\"\\n\\n\"),toolCalls});\n }\n const messages:any[]=[\n {role:\"system\",content:`The user has connected exactly these services: ${connectedNames.join(\", \")}. No other service is connected, even if its name appears inside a document or search result. For requests about each connected service, you MUST call at least one tool belonging to every service in this list and return three concise, concrete recent items per service, such as document titles, issues, customers, errors, or payments. Link every item title to the URL returned by that service using Markdown; never fabricate a URL. Never present a mention of another product inside one service as data fetched from that product. Label every item with the connected service that actually supplied it. Format the answer as concise Markdown. If a tool cannot produce a proof item, say so explicitly.`},\n {role:\"user\",content:message},\n ];\n for(let round=0;round<4;round++){\n const completion:any=await openai.chat.completions.create({model:\"gpt-5.4-nano\",messages,tools:aiTools,tool_choice:\"auto\",max_completion_tokens:1200});\n const reply=completion.choices?.[0]?.message;\n if(!reply) throw new Error(\"The model returned no response.\");\n messages.push(reply);\n if(!reply.tool_calls?.length) return c.json({answer:reply.content||\"Done.\",toolCalls});\n for(const call of reply.tool_calls){\n const item=registry.get(call.function.name);\n if(!item){messages.push({role:\"tool\",tool_call_id:call.id,content:\"Tool unavailable\"});continue;}\n let args={}; try{args=JSON.parse(call.function.arguments||\"{}\")}catch{}\n try{\n const result=item.call?await item.call():await mcpToolCall(item.provider,item.token,item.tool.name,args);\n const response=JSON.stringify(result,null,2).slice(0,30000);\n toolCalls.push({service:item.provider.name,name:item.tool.name,args,response});\n messages.push({role:\"tool\",tool_call_id:call.id,content:response});\n }catch(e){\n const error=e instanceof Error?e.message:String(e);\n toolCalls.push({service:item.provider.name,name:item.tool.name,args,error});\n messages.push({role:\"tool\",tool_call_id:call.id,content:\"Tool error: \"+error});\n }\n }\n }\n return c.json({answer:\"I reached the tool-call limit. Try a narrower question.\",toolCalls});\n }catch(e){\n console.error(e);\n return c.json({error:e instanceof Error?e.message:String(e)},500);\n }\n});\n\nexport default app.fetch;\n",[],[197],"d382f56d-247e-4c8f-b1c5-a3040b2d5069","featured-apps.ts","01a064df-2166-778e-a16b-5163c6f309d8",["D",1788398739318],"// Well-known apps shown in the featured table on the home page, keyed by the hostname of the app's MCP URL.\n// Alphabetical order. Everything runnable that is not listed here renders in the full list at /apps (A–Z).\n// Hostnames must match an entry's `mcpUrl` host in directory-data.ts (curated) or registry-scan-data.ts\n// (generated); unknown hosts are silently skipped. Keep the canonical Cloudflare whole-API entry\n// (mcp.cloudflare.com) rather than the many product-scoped *.mcp.cloudflare.com subdomains.\nexport const featuredHosts: string[] = [\n \"mcp.airtable.com\", // Airtable\n \"mcp.algolia.com\", // Algolia\n \"mcp.amplitude.com\", // Amplitude\n \"mcp.atlassian.com\", // Atlassian\n \"mcp.calendly.com\", // Calendly\n \"mcp.canva.com\", // Canva\n \"mcp.circleci.com\", // CircleCI\n \"mcp.cloudflare.com\", // Cloudflare (whole API)\n \"asset-management.mcp.cloudinary.com\", // Cloudinary\n \"mcp.cypress.io\", // Cypress\n \"gitlab.com\", // GitLab\n \"mcp.grafana.com\", // Grafana\n \"mcp.honeycomb.io\", // Honeycomb\n \"huggingface.co\", // Hugging Face\n \"ifttt.com\", // IFTTT\n \"mcp.intercom.com\", // Intercom\n \"mcp.lambdatest.com\", // LambdaTest\n \"mcp.linear.app\", // Linear\n \"mcp.make.com\", // Make\n \"mcp.mapbox.com\", // Mapbox\n \"mcp.miro.com\", // Miro\n \"mcp.monday.com\", // monday.com\n \"mcp.mux.com\", // Mux\n \"mcp.newrelic.com\", // New Relic\n \"mcp.notion.com\", // Notion\n \"mcp.paypal.com\", // PayPal\n \"mcp.pscale.dev\", // PlanetScale\n \"mcp.posthog.com\", // PostHog\n \"mcp.postman.com\", // Postman\n \"mcp.prisma.io\", // Prisma\n \"mcp.railway.com\", // Railway\n \"replit-mcp.com\", // Replit\n \"mcp.sanity.io\", // Sanity\n \"mcp.sentry.dev\", // Sentry\n \"mcp.stripe.com\", // Stripe\n \"mcp.supabase.com\", // Supabase\n \"ai.todoist.net\", // Todoist\n \"api.val.town\", // Val Town\n \"mcp.vercel.com\", // Vercel\n \"mcp.webflow.com\", // Webflow\n \"mcp.wix.com\", // Wix\n \"public-api.wordpress.com\", // WordPress.com\n \"mcp.zapier.com\", // Zapier\n];\n",[],[204],["D",1788398739318],[],[18],"3c76dbce-3b3d-4a4d-ba31-ebab39a0197f","code-tour.tsx","01a064df-2166-778e-a16b-4aa2738cded2",["D",1788398739318],"// Code tour — each chapter shows a simplified snippet with per-line explanations.\n// Highlighting is done server-side with Shiki (one call per chapter, whole snippet\n// at a time) so multi-line constructs tokenize correctly, unlike per-line Prism.\n\ntype Line = { code: string; why: string; comment?: boolean };\ntype Step = { title: string; act: string; why: string; lines: Line[] };\n\nconst ACT1 = \"Part 1 · Get a client identity\";\nconst ACT2 = \"Part 2 · Trade the code for tokens\";\nconst ACT3 = \"Part 3 · Put the connection to work\";\n\nconst steps: Step[] = [\n { title: \"1. Describe providers\", act: ACT1, why: \"Every connection uses the same MCP and OAuth machinery; only protocol endpoints and capabilities vary.\", lines: [\n { code: \"type Provider = {\", why: \"Define the small configuration shape shared by every provider.\" },\n { code: \" endpoint: string;\", why: \"The provider’s authenticated remote MCP endpoint.\" },\n { code: \" auth: string; token: string; register: string;\", why: \"OAuth authorization, token, and DCR endpoints.\" },\n { code: \" cimd: boolean;\", why: \"Whether the authorization server accepts a metadata-document URL as client_id.\" },\n { code: \"};\", why: \"No provider-specific callback, tool adapter, or token-exchange code is needed.\" },\n ]},\n { title: \"2. Discover more providers\", act: ACT1, why: \"The directory can turn standards metadata into a working connection without adding another config object.\", lines: [\n { code: \"const metadataUrl = entry.cimdUrl ?? entry.dcrUrl;\", why: \"Start from the evidence URL already collected by the directory.\" },\n { code: \"const metadata = await fetch(metadataUrl).then(r => r.json());\", why: \"Read the authorization-server metadata document.\" },\n { code: \"return {\", why: \"Construct the same Provider shape from chapter 1.\" },\n { code: \" auth: metadata.authorization_endpoint,\", why: \"Discover where the browser should authorize.\" },\n { code: \" token: metadata.token_endpoint,\", why: \"Discover where the code is exchanged.\" },\n { code: \" register: metadata.registration_endpoint,\", why: \"Discover DCR support directly from metadata (chapter 4 uses it).\" },\n { code: \"};\", why: \"After this, the rest of the flow is provider-independent.\" },\n ]},\n { title: \"3. Generate PKCE\", act: ACT1, why: \"PKCE binds the browser authorization response to the client that initiated it.\", lines: [\n { code: \"const verifier = b64url(randomBytes(48));\", why: \"Create a high-entropy base64url secret that never leaves the server before the callback.\" },\n { code: \"const challenge = await sha256(verifier);\", why: \"Send only base64url(SHA-256(verifier)) — the hash, never the secret.\" },\n { code: \"const state = crypto.randomUUID();\", why: \"Give this browser flow an unpredictable lookup key.\" },\n { code: \"await save({ state, verifier, provider });\", why: \"Persist the verifier and provider until the callback returns.\" },\n ]},\n { title: \"4. Register with DCR\", act: ACT1, why: \"DCR creates a client at runtime, eliminating the developer-portal setup step.\", lines: [\n { code: \"const client = await fetch(provider.register, {\", why: \"POST to the registration endpoint advertised in chapter 2.\" },\n { code: \" method: \\\"POST\\\",\", why: \"Registration is a state-changing protocol operation.\" },\n { code: \" body: JSON.stringify({\", why: \"Send standard OAuth client metadata.\" },\n { code: \" redirect_uris: [callbackUrl],\", why: \"The provider may redirect only to this callback.\" },\n { code: \" token_endpoint_auth_method: \\\"none\\\",\", why: \"This public client relies on PKCE (chapter 3) rather than a durable client secret.\" },\n { code: \" }),\", why: \"The same document works across compliant providers.\" },\n { code: \"}).then(r => r.json());\", why: \"The response supplies the newly created client_id.\" },\n ]},\n { title: \"5. Identify with CIMD\", act: ACT1, why: \"CIMD removes even the registration POST from chapter 4: the client_id is a URL containing the client metadata.\", lines: [\n { code: \"app.get(\\\"/oauth/client-metadata.json\\\", c => c.json({\", why: \"Host a public metadata document at a stable HTTPS URL.\" },\n { code: \" client_id: origin + \\\"/oauth/client-metadata.json\\\",\", why: \"The document identifies itself.\" },\n { code: \" redirect_uris: [origin + \\\"/oauth/callback\\\"],\", why: \"The authorization server validates callbacks against this document.\" },\n { code: \"}));\", why: \"Providers fetch this document whenever they need current metadata.\" },\n { code: \"const clientId = origin + \\\"/oauth/client-metadata.json\\\";\", why: \"Use that URL directly as client_id — no registration request.\" },\n ]},\n { title: \"6. Authorize\", act: ACT2, why: \"DCR and CIMD converge here; only the source of client_id differs (chapters 4 and 5).\", lines: [\n { code: \"const url = new URL(provider.auth);\", why: \"Start with the discovered authorization endpoint.\" },\n { code: \"url.searchParams.set(\\\"client_id\\\", clientId);\", why: \"Either the DCR-issued ID or the CIMD metadata URL.\" },\n { code: \"url.searchParams.set(\\\"redirect_uri\\\", callbackUrl);\", why: \"Tell the provider where to return the code.\" },\n { code: \"url.searchParams.set(\\\"code_challenge\\\", challenge);\", why: \"Bind this request to the secret PKCE verifier from chapter 3.\" },\n { code: \"url.searchParams.set(\\\"state\\\", state);\", why: \"Bind the callback to the stored flow record.\" },\n { code: \"return redirect(url);\", why: \"The user now grants access on the provider’s site.\" },\n ]},\n { title: \"7. Exchange the code\", act: ACT2, why: \"The callback is identical for DCR and CIMD.\", lines: [\n { code: \"const flow = await load(request.query(\\\"state\\\"));\", why: \"Recover the verifier, client ID, and provider safely.\" },\n { code: \"const token = await fetch(provider.token, {\", why: \"POST the short-lived authorization code to the token endpoint.\" },\n { code: \" body: form({ code, client_id: flow.clientId,\", why: \"Identify the same client used during authorization.\" },\n { code: \" code_verifier: flow.verifier }),\", why: \"Prove this is the client that created the PKCE challenge.\" },\n { code: \"}).then(r => r.json());\", why: \"Receive the access token.\" },\n { code: \"await storeEncrypted(token.access_token);\", why: \"Encrypt the token before storing it in project-scoped SQLite.\" },\n ]},\n { title: \"8. Prove the connection\", act: ACT2, why: \"A successful token exchange is not enough; the app immediately uses the token against every provider’s MCP server.\", lines: [\n { code: \"await mcp(\\\"initialize\\\");\", why: \"Negotiate the MCP protocol version and session.\" },\n { code: \"const tools = await mcp(\\\"tools/list\\\");\", why: \"Fetch authenticated capabilities from the real account.\" },\n { code: \"store(tools);\", why: \"Remember what the connected MCP server actually advertised.\" },\n { code: \"// Val Town follows this same path\", comment: true, why: \"Not a line of code — the same initialize → tools/list path serves every provider, with no hand-written Val Town REST adapter.\" },\n ]},\n { title: \"9. Give tools to the model\", act: ACT3, why: \"Every connected MCP server becomes one namespaced tool collection for the chat model.\", lines: [\n { code: \"for (const service of connectedServices) {\", why: \"Process only services authorized in this browser session.\" },\n { code: \" const tools = await service.listTools();\", why: \"Discover current tool schemas dynamically.\" },\n { code: \" for (const tool of tools) {\", why: \"Convert each MCP tool to an OpenAI function tool.\" },\n { code: \" modelTools.push(namespace(service, tool));\", why: \"Namespacing prevents collisions, such as several search tools.\" },\n { code: \" }\", why: \"No service-specific tool-call implementation is required.\" },\n { code: \"}\", why: \"The model can now choose tools across every connection.\" },\n ]},\n { title: \"10. Render safely\", act: ACT3, why: \"The model returns Markdown, but arbitrary model HTML must not reach the page unsanitized.\", lines: [\n { code: \"const markdown = await askConnectedServices(message);\", why: \"The server returns a concise Markdown answer with source links.\" },\n { code: \"const html = marked.parse(markdown);\", why: \"Turn Markdown into readable lists and links.\" },\n { code: \"answer.innerHTML = DOMPurify.sanitize(html);\", why: \"Remove unsafe markup before inserting it into the DOM.\" },\n ]},\n];\n\n// --- Server-side highlighting (Shiki) -------------------------------------\n\nimport { createHighlighter } from \"npm:shiki@3\";\nimport typescript from \"npm:shiki@3/langs/typescript.mjs\";\nimport vesper from \"npm:shiki@3/themes/vesper.mjs\";\n\nconst highlighter = await createHighlighter({ themes: [vesper], langs: [typescript] });\n\nconst esc = (s: string) => s.replaceAll(\"&\", \"&\").replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll('\"', \""\");\n\n// Highlight each chapter's snippet as one block, then split back into lines so\n// every line can still be clicked individually.\nfunction highlightLines(step: Step): string[] {\n const source = step.lines.map((l) => l.code).join(\"\\n\");\n const { tokens } = highlighter.codeToTokens(source, { lang: \"typescript\", theme: \"vesper\" });\n return tokens.map((line) =>\n line.map((t) => {\n const style = t.fontStyle === 1 ? \"color:\" + t.color + \";font-style:italic\"\n : t.fontStyle === 2 ? \"color:\" + t.color + \";text-decoration:underline\"\n : t.fontStyle === 4 ? \"color:\" + t.color + \";font-weight:700\"\n : \"color:\" + t.color;\n return `${esc(t.content)}`;\n }).join(\"\")\n );\n}\n\nlet cached: string[] | null = null;\nfunction stepLineHtml() {\n if (!cached) cached = steps.map(highlightLines);\n return cached;\n}\n\n// --- Page -------------------------------------------------------------------\n\nexport function codeTourPage() {\n const highlighted = stepLineHtml();\n const acts = [...new Set(steps.map((s) => s.act))];\n const nav = acts.map((act) =>\n `

${esc(act)}

` +\n steps.map((s, i) => ({ s, i })).filter(({ s }) => s.act === act)\n .map(({ i }) => ``)\n .join(\"\")\n ).join(\"\");\n\n const panels = steps.map((s, i) => {\n const lines = s.lines.map((l, n) => {\n const num = `${n + 1}`;\n const body = `${highlighted[i][n]}`;\n return l.comment\n ? `

${num}${body}

`\n : ``;\n }).join(\"\");\n return `

` +\n `

Step ${i + 1} of ${steps.length} · ${esc(s.act)}

` +\n `

${esc(s.title)}

${esc(s.why)}

` +\n `

${lines}

` +\n `` +\n `

`;\n }).join(\"\");\n\n return `How this Val works

← Back to the app

How every line works

A guided tour of the essential code, simplified to expose the protocol rather than the page styling. Choose a chapter, then click any line for its explanation. Use ← → for chapters and ↑ ↓ to walk the lines.

${panels}

`;\n}",[],[214],"f3d27fcd-1f9b-4f55-b565-6e5e3c8fd56b","README.md","01a064df-2166-778e-a16b-44cffdc0f2d0",["D",1788398739318],"# Connect to all the apps with OAuth DCR + CIMD\n\nA live OAuth interoperability demo for Dynamic Client Registration (DCR) and Client ID Metadata Documents (CIMD).\n\n- Live app: https://oauth-demos.val.run/\n- Guided code tour: https://oauth-demos.val.run/code-tour\n- Val source: https://www.val.town/x/stevekrouse/oauth-demos/code/\n\n## What it does\n\nThe app lists only services with at least one runnable DCR or CIMD connection flow. After a user authorizes a service, the app proves the connection by calling its API or MCP server. Connected tools can then answer questions in the built-in chat. Each tool call and raw response is shown in a collapsed, expandable trace.\n\nThe chat sends the user's prompt and tool results from authorized services to OpenAI. Do not broaden scopes or expose new connector data without making that consequence clear.\n\n## Files\n\n- `main.tsx`: Hono app, page UI, OAuth flows, MCP client, encrypted token storage, and chat orchestration.\n- `directory-data.ts`: researched service directory plus evidence URLs.\n- `featured-apps.ts`: ordered list of well-known apps shown first; everything else renders alphabetically below it.\n- `registry-scan-data.ts`: generated list of every host in the official MCP registry whose authorization-server metadata advertises DCR and/or CIMD (scanned 2026-09-01: 3,572 DCR hosts, 701 CIMD hosts out of 10,628 hosts / 14,997 remote URLs). Scanner: https://www.val.town/x/stevekrouse/mcp-registry-oauth-scan\n- `code-tour.ts`: interactive explanation of the important protocol code.\n- `research/`: one-off probes used to validate endpoints and registration behavior.\n- `AGENTS.md`: maintenance notes and invariants for future agents.\n\n## OAuth behavior\n\nFive providers have explicit configuration in `main.tsx`: Val Town, Notion, Linear, Sentry, and Stripe. Other runnable providers are discovered from their authorization-server metadata in `directory-data.ts`. Every provider, including Val Town, supplies its advertised MCP tools directly to the chat.\n\nAll authorization-code flows use PKCE. DCR creates a client at runtime. CIMD uses `/oauth/client-metadata.json` as the `client_id`.\n\nAccess tokens are encrypted with AES-GCM before storage in the val's project-scoped SQLite database. Browser sessions are represented by an HttpOnly, Secure, SameSite=Lax cookie and expire after one day.\n\n## Verification\n\nA successful deployment should return HTTP 200 at the live URL and render:\n\n1. Notion\n2. Linear\n3. Val Town\n\nThe table columns must be `App`, `DCR`, then `CIMD`, and every row must contain at least one Connect button. Full OAuth verification requires interactive authorization against each provider.\n",[],[221],"b3c9e3cc-78ca-466f-8575-cb4dbe2f1e38","AGENTS.md","01a064df-2166-778e-a16b-40694d2cf9c4",["D",1788398739318],"# AGENTS.md\n\n## Project summary\n\nThis val is a public DCR/CIMD interoperability demo. Its HTTP entrypoint is `main.tsx`, deployed at https://oauth-demos.val.run/. It supports OAuth authorization, authenticated MCP tool discovery, and an OpenAI-powered chat over each provider’s full advertised MCP toolset.\n\nThere is no local build system or package manifest. Val Town runs the files directly with Deno-compatible URL imports.\n\n## File map\n\n- `main.tsx`: all routes, HTML/CSS/JS, OAuth state, token exchange, MCP calls, and model tool calling.\n- `directory-data.ts`: the researched catalog (`curatedEntries`). Preserve evidence URLs and distinguish researched capability from runtime support. Exports `directoryEntries = [...curatedEntries, ...registryScanEntries]`.\n- `featured-apps.ts`: alphabetical list of well-known apps (by MCP hostname) shown on the home page's featured table. Everything runnable not listed here appears in the full A–Z list at `/apps`. Display names for scan-discovered hosts are baked into `registry-scan-data.ts` by the generator.\n- `registry-scan-data.ts`: GENERATED. One entry per hostname from probing every remote URL in the official MCP registry for `registration_endpoint` (DCR) and `client_id_metadata_document_supported` (CIMD). Do not hand-edit; regenerate with https://www.val.town/x/stevekrouse/mcp-registry-oauth-scan and re-upload. Hosts already in `curatedEntries` are excluded by the generator.\n- `code-tour.tsx`: guided code tour (Shiki server-side highlighting, per-line explanations, act-grouped nav, keyboard navigation). Simplified excerpts, not executable copies of `main.tsx`.\n- `research/probe.ts` and `research/test-registration.ts`: diagnostic scripts. Do not import them into production.\n- `README.md`: public project overview.\n\n## UI invariants\n\n- Render only entries that produce at least one real Connect button.\n- Home (`/`) shows only the featured table: the apps in `featured-apps.ts` (`featuredHosts`, an alphabetical array of MCP hostnames), in that order. The full A–Z list of every runnable entry lives at `/apps`. To promote an app, add its MCP host to `featuredHosts`.\n- Keep the canonical Cloudflare whole-API entry (`mcp.cloudflare.com`) in the featured list; the many product-scoped `*.mcp.cloudflare.com` subdomains belong only in the `/apps` full list.\n- Table columns are App, DCR, CIMD, in that order.\n- Company marks use the company-site favicon and appear left of the name.\n- Keep the page and chat light. Dark backgrounds are reserved for syntax-highlighted code on the code-tour page.\n- The table is derived at render time. Do not manually duplicate the service list in HTML.\n- Chat tool calls render as collapsed `

` panels with arguments and raw responses. Keep trace text escaped via DOM `textContent`.\n\n## OAuth architecture\n\n`providers` contains hand-configured integrations. `resolveProvider` discovers the others from the metadata URLs stored in `directory-data.ts`.\n\nRoutes:\n\n- `GET /oauth/:provider/:mode/start`: creates PKCE state, optionally performs DCR, then redirects to authorization.\n- `GET /oauth/client-metadata.json`: stable CIMD document.\n- `GET /oauth/callback`: exchanges the code, verifies useful access, encrypts the token, and saves the connection.\n- `POST /chat`: exposes each connected MCP tool to the model and executes selected calls.\n- `GET /code-tour`: teaching UI.\n\nVal Town uses its official MCP endpoint at `https://api.val.town/v3/mcp`, exactly like the other providers. Do not reintroduce a hand-written REST adapter. Val Town OAuth scope names use underscores, and its project scope is `project_rw`.\n\n## Data and security\n\nProject-scoped SQLite tables:\n\n- `mcp_flows`: short-lived OAuth state and PKCE verifier.\n- `mcp_connections`: encrypted access token plus discovered tool summary, keyed by browser session and provider.\n\nThe AES-GCM key is persisted in project-scoped blob storage under `mcp-token-encryption-key:v1`. Never log tokens, client secrets, authorization codes, or decrypted tool results.\n\nImportant: `POST /chat` sends user prompts and connector tool results to OpenAI. Expanding OAuth scopes expands the data that may be sent there. Require explicit user approval before broadening scopes or adding a new data source.\n\n## Editing and verification\n\nPrefer targeted replacements for small changes and a whole-file update only for coordinated refactors. After changing `main.tsx`, fetch its HTTP endpoint in the same edit call. Confirm HTTP 200, inspect the rendered table order and columns, and check logs if deployment fails.\n\nOAuth buttons cannot be fully verified non-interactively. Preserve PKCE, `state`, `resource` for MCP, token encryption, the secure session cookie, and the one-hour cleanup for abandoned flows.\n",[],[228],"9f153fbd-0ac4-4c0d-b7fb-85c0de2b890c","tmp","01a064df-2166-778e-a16b-3cb49d8e58d1",["D",1788398739318],"directory",[],[235],"fafa5488-227c-4cf1-8133-8bc1356017b4","test-registration.ts","01a064df-2166-778e-a16b-35272032a6fa","01a064df-2166-778e-a16b-3944e52c4843",["D",1788398739318],"const callback=\"https://stevekrouse--a74a3cae85fa11f1942c1607ee4eb77e.web.val.run/mcp/callback\";\nconst tests=[\n {name:\"figma\",url:\"https://api.figma.com/v1/oauth/mcp/register\",body:{client_name:\"Val Town OAuth Demos\",redirect_uris:[callback],grant_types:[\"authorization_code\",\"refresh_token\"],response_types:[\"code\"],token_endpoint_auth_method:\"client_secret_post\"}},\n {name:\"asana\",url:\"https://mcp.asana.com/register\",body:{client_name:\"Val Town OAuth Demos\",redirect_uris:[callback],grant_types:[\"authorization_code\",\"refresh_token\"],response_types:[\"code\"],token_endpoint_auth_method:\"none\"}},\n];\nconst out=[];\nfor(const t of tests){const r=await fetch(t.url,{method:\"POST\",headers:{\"content-type\":\"application/json\",\"accept\":\"application/json\"},body:JSON.stringify(t.body)});out.push({name:t.name,status:r.status,headers:Object.fromEntries(r.headers),body:(await r.text()).slice(0,2000)});}\nconsole.log(JSON.stringify(out,null,2));\nexport default out;",[],[249,242],"research","90d79703-7d77-4014-9dcf-36401be7e3ae","probe.ts","01a064df-2165-759e-9fb6-fc201a345573",["D",1788398739318],"const targets = [\n [\"Notion\", \"https://mcp.notion.com/mcp\"],\n [\"Figma\", \"https://mcp.figma.com/mcp\"],\n [\"Slack\", \"https://mcp.slack.com/mcp\"],\n [\"Linear\", \"https://mcp.linear.app/mcp\"],\n [\"Sentry\", \"https://mcp.sentry.dev/mcp\"],\n [\"Atlassian\", \"https://mcp.atlassian.com/v1/mcp\"],\n [\"Canva\", \"https://mcp.canva.com/mcp\"],\n [\"Stripe\", \"https://mcp.stripe.com\"],\n [\"Intercom\", \"https://mcp.intercom.com/mcp\"],\n [\"Asana\", \"https://mcp.asana.com/sse\"],\n] as const;\n\nconst json = async (url: string) => {\n try {\n const r = await fetch(url, { redirect: \"manual\", headers: { accept: \"application/json, text/event-stream\" } });\n let body: any = null;\n try { body = await r.json(); } catch { body = (await r.text()).slice(0, 300); }\n return { url, status: r.status, headers: Object.fromEntries(r.headers), body };\n } catch (e) { return { url, error: String(e) }; }\n};\n\nasync function probe() {\n const output = [];\n for (const [name, endpoint] of targets) {\n const first: any = await json(endpoint);\n const auth = first.headers?.[\"www-authenticate\"] || \"\";\n const match = auth.match(/resource_metadata=\"([^\"]+)\"/);\n const candidates = [\n match?.[1],\n new URL(\"/.well-known/oauth-protected-resource\" + new URL(endpoint).pathname, endpoint).toString(),\n new URL(\"/.well-known/oauth-protected-resource\", endpoint).toString(),\n ].filter(Boolean) as string[];\n let resource: any = null;\n for (const u of [...new Set(candidates)]) {\n const x: any = await json(u);\n if (x.status === 200 && typeof x.body === \"object\") { resource = x; break; }\n }\n const issuer = resource?.body?.authorization_servers?.[0];\n let server: any = null;\n if (issuer) {\n for (const suffix of [\"/.well-known/oauth-authorization-server\", \"/.well-known/openid-configuration\"]) {\n const base = new URL(issuer);\n const u = base.origin + suffix + (base.pathname === \"/\" ? \"\" : base.pathname);\n const x: any = await json(u);\n if (x.status === 200 && typeof x.body === \"object\") { server = x; break; }\n }\n }\n output.push({\n name, endpoint,\n endpoint_status: first.status,\n www_authenticate: auth,\n resource_metadata_url: resource?.url,\n authorization_server: issuer,\n authorization_metadata_url: server?.url,\n authorization_endpoint: server?.body?.authorization_endpoint || null,\n token_endpoint: server?.body?.token_endpoint || null,\n scopes_supported: server?.body?.scopes_supported || null,\n registration_endpoint: server?.body?.registration_endpoint || null,\n client_id_metadata_document_supported: server?.body?.client_id_metadata_document_supported ?? server?.body?.client_id_metadata_documents_supported ?? null,\n auth_methods: server?.body?.token_endpoint_auth_methods_supported || null,\n error: first.error,\n });\n }\n console.log(JSON.stringify(output, null, 2));\n return output;\n}\n\nexport default await probe();",[],[249,251],"bafb66b1-3556-43dd-9eaa-f12b6da5b52d",["D",1788398739318],[177,178],[249],["D",1788398739318],["D",1789530642963],{"_11":12,"_127":72},{"_11":12,"_122":123,"_71":72,"_30":70,"_124":125,"_126":24},{"_38":39,"_13":16,"_32":35,"_112":74,"_113":62,"_114":63,"_115":78,"_116":117,"_118":119,"_120":14,"_121":12},"ctx",{"_51":-5,"_148":299,"_300":301,"_302":303,"_304":24,"_305":24,"_306":24,"_307":86,"_308":-5,"_309":-7,"_310":-7,"_311":26,"_312":24,"_313":24,"_314":-5,"_315":24,"_316":24,"_317":24,"_318":-5},"ENV",{"_270":271,"_272":273,"_274":16,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · directory-data.ts