--- title: How to Build Your Own MCP Server and Publish Your... description: A comprehensive step-by-step guide to building an MCP (Model Context Protocol) server from scratch using Node.js, integrating it with ChatGPT as a connector... canonical: https://daily.dev/posts/how-to-build-your-own-mcp-server-and-publish-your-chatgpt-app-with-supabase-auth-and-digitalocean-zvzhzhrh2 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How to Build Your Own MCP Server and Publish Your ChatGPT App with Supabase Auth and DigitalOcean | daily.dev og:description: A comprehensive step-by-step guide to building an MCP (Model Context Protocol) server from scratch using Node.js, integrating it with ChatGPT as a connector... og:url: https://daily.dev/posts/how-to-build-your-own-mcp-server-and-publish-your-chatgpt-app-with-supabase-auth-and-digitalocean-zvzhzhrh2 og:image: https://api.daily.dev/og/posts/zvZhzhRh2.png og:image:alt: How to Build Your Own MCP Server and Publish Your ChatGPT App with Supabase Auth and DigitalOcean og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How to Build Your Own MCP Server and Publish Your ChatGPT App with Supabase Auth and DigitalOcean **[freeCodeCamp](https://daily.dev/sources/freecodecamp)** · 47 min read · 1 upvotes · 0 comments ## Summary A comprehensive step-by-step guide to building an MCP (Model Context Protocol) server from scratch using Node.js, integrating it with ChatGPT as a connector app, and progressively enhancing it with a custom HTML/JavaScript UI widget and Supabase authentication with a PostgreSQL database backend. The tutorial covers three levels: a basic in-memory todo MCP server with tools for adding, listing, and completing todos; a ChatGPT-embedded UI using the OpenAI Skybridge iframe protocol; and full auth/database integration using Supabase OAuth server, row-level security, and a Next.js consent/login page. Deployment to DigitalOcean and publishing to the ChatGPT app directory are also covered. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I add OAuth authentication to an MCP server using Supabase? Enable the OAuth server in the Supabase dashboard under Auth settings, then implement three proxy endpoints on the MCP server: /.well-known/oauth-protected-resource, /.well-known/oauth-authorization-server, and /.well-known/openid-configuration, each forwarding requests to Supabase's auth endpoints. A Next.js app then hosts login and consent pages using @supabase/ssr, and each MCP tool verifies the bearer token via supabase.auth.getUser() before running. _Developers wiring OAuth into MCP servers can track Supabase and MCP protocol changes on daily.dev._ ### How do I expose a custom UI widget inside a ChatGPT app built with MCP? Register an HTML resource on the MCP server with registerResource using a ui:// URI and mimeType text/html+skybridge, then reference that URI in a tool's _meta.openai/outputTemplate field. The HTML file uses window.openai.callTool and window.openai.toolOutput to call server tools and render results, letting ChatGPT display an interactive widget instead of plain text. _Anyone building interactive ChatGPT app UIs can follow MCP and Skybridge developments on daily.dev._ ### What information does OpenAI require to publish an MCP-based ChatGPT app to its directory? Submissions need app info (logo, description, demo video, privacy policy, terms), MCP server details including a URL verification token, at least five test cases covering scenario, user prompt, triggered tool, and expected output (plus negative cases), one to four widget screenshots at 706px width and 400-860px height, and localization/country targeting before final compliance checks and release notes. _Teams preparing a ChatGPT app submission can follow MCP publishing requirements as they evolve on daily.dev._ ## Similar posts on daily.dev - [Building ChatGPT Apps with Supabase Edge Functions and mcp-use](https://daily.dev/posts/building-chatgpt-apps-with-supabase-edge-functions-and-mcp-use-fgtwiaa3l) · Supabase · 3 upvotes · 0 comments - [How to Build MCP Servers for Your Internal Data](https://daily.dev/posts/how-to-build-mcp-servers-for-your-internal-data-mal9z290q) · freeCodeCamp · 3 upvotes · 0 comments - [How to Add MCP Servers to ChatGPT](https://daily.dev/posts/how-to-add-mcp-servers-to-chatgpt-awxv0wlfn) · Docker · 2 upvotes · 0 comments - [Build anything: Supabase from code, and an MCP server for your app](https://daily.dev/posts/build-anything-supabase-from-code-and-an-mcp-server-for-your-app-57ek84lkt) · Supabase · 16 upvotes · 1 comments - [How to Use the ChatGPT Apps SDK: Build a Pizza App with Apps SDK](https://daily.dev/posts/how-to-use-the-chatgpt-apps-sdk-build-a-pizza-app-with-apps-sdk-a5maep8qy) · freeCodeCamp · 3 upvotes · 0 comments --- Tags: [#nodejs](https://daily.dev/tags/nodejs), [#nextjs](https://daily.dev/tags/nextjs), [#mcp](https://daily.dev/tags/mcp), [#oauth](https://daily.dev/tags/oauth), [#supabase](https://daily.dev/tags/supabase) [View this post on daily.dev](https://daily.dev/posts/how-to-build-your-own-mcp-server-and-publish-your-chatgpt-app-with-supabase-auth-and-digitalocean-zvzhzhrh2) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How to Build Your Own MCP Server and Publish Your ChatGPT App with Supabase Auth and DigitalOcean","url":"https://daily.dev/posts/how-to-build-your-own-mcp-server-and-publish-your-chatgpt-app-with-supabase-auth-and-digitalocean-zvzhzhrh2","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-to-build-your-own-mcp-server-and-publish-your-chatgpt-app-with-supabase-auth-and-digitalocean-zvzhzhrh2"},"datePublished":"2026-07-09T21:34:14.435Z","dateModified":"2026-09-14T06:12:46.630Z","description":"A comprehensive step-by-step guide to building an MCP (Model Context Protocol) server from scratch using Node.js, integrating it with ChatGPT as a connector...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/72ceb8c06808dd43fa08a7b1a45095ea?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/72ceb8c06808dd43fa08a7b1a45095ea?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"freeCodeCamp","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"freeCodeCamp","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp","url":"https://daily.dev/sources/freecodecamp"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-to-build-your-own-mcp-server-and-publish-your-chatgpt-app-with-supabase-auth-and-digitalocean-zvzhzhrh2","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"nodejs,nextjs,mcp,oauth,supabase","timeRequired":"PT47M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"freeCodeCamp","item":"https://daily.dev/sources/freecodecamp"},{"@type":"ListItem","position":3,"name":"How to Build Your Own MCP Server and Publish Your ChatGPT App with Supabase Auth and DigitalOcean"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-to-build-your-own-mcp-server-and-publish-your-chatgpt-app-with-supabase-auth-and-digitalocean-zvzhzhrh2#faq","mainEntity":[{"@type":"Question","name":"How do I add OAuth authentication to an MCP server using Supabase?","acceptedAnswer":{"@type":"Answer","text":"Enable the OAuth server in the Supabase dashboard under Auth settings, then implement three proxy endpoints on the MCP server: /.well-known/oauth-protected-resource, /.well-known/oauth-authorization-server, and /.well-known/openid-configuration, each forwarding requests to Supabase's auth endpoints. A Next.js app then hosts login and consent pages using @supabase/ssr, and each MCP tool verifies the bearer token via supabase.auth.getUser() before running. Developers wiring OAuth into MCP servers can track Supabase and MCP protocol changes on daily.dev."}},{"@type":"Question","name":"How do I expose a custom UI widget inside a ChatGPT app built with MCP?","acceptedAnswer":{"@type":"Answer","text":"Register an HTML resource on the MCP server with registerResource using a ui:// URI and mimeType text/html+skybridge, then reference that URI in a tool's _meta.openai/outputTemplate field. The HTML file uses window.openai.callTool and window.openai.toolOutput to call server tools and render results, letting ChatGPT display an interactive widget instead of plain text. Anyone building interactive ChatGPT app UIs can follow MCP and Skybridge developments on daily.dev."}},{"@type":"Question","name":"What information does OpenAI require to publish an MCP-based ChatGPT app to its directory?","acceptedAnswer":{"@type":"Answer","text":"Submissions need app info (logo, description, demo video, privacy policy, terms), MCP server details including a URL verification token, at least five test cases covering scenario, user prompt, triggered tool, and expected output (plus negative cases), one to four widget screenshots at 706px width and 400-860px height, and localization/country targeting before final compliance checks and release notes. Teams preparing a ChatGPT app submission can follow MCP publishing requirements as they evolve on daily.dev."}}]} ```