Build a ChatGPT App in 10 Minutes or Less

OpenAI's ChatGPT Apps SDK opens up a powerful new way to surface your own data — and even render interactive HTML components — right inside ChatGPT. In this guide, you'll learn how to set up an MCP server in Xano, create two connected tools, and deliver a fully custom UI to your users without writing a single line of backend code.

What You're Building

The end result is a ChatGPT app that lets users query data from your Xano database and see the results rendered as a styled HTML component — all without leaving ChatGPT. The example here uses a real pizzeria dataset, but the same approach works for any data you're storing in Xano.

Setting Up Your MCP Server

Start by navigating to the AI tab in your Xano workspace and selecting MCP Servers. Create a new server and give it a descriptive name (like "Pizza Finder") along with a brief description. This server acts as the bridge between your Xano data and ChatGPT.

Creating the Data Tool

Next, head to AI > Tools and create your first tool — the one responsible for fetching data. Give it a clear name like "Query Pizzerias" and write tool instructions that ChatGPT will use to understand when to invoke it.

Inside the function stack, add an input field (for example, city) and wire up a Query All Records function pointed at your data table. Add a conditional filter so results are scoped to the provided city. Run a quick test to confirm data comes back correctly, then publish the tool.

Creating the Resource Tool (Your Custom UI)

The second tool is what serves the visual experience. Create a new tool called something like "Pizza List" and mark its instructions to indicate it serves the UI.

Inside this function stack, use the Template Engine function to paste in your custom HTML, CSS, and JavaScript. Name the output (e.g., inline_content). Then create a variable called response as an object with three properties ChatGPT expects: a uri (resource identifier), a mime_type, and a text field — which you'll populate with your rendered HTML output. Update the response at the bottom of the stack, run it to verify the output, and publish.

Connecting the Tools to Your MCP Server

Back in your MCP server card, use the Connect Tool button to attach both tools. Then open the connection settings for each. Set the UI tool's type to Resource and provide the matching URI. For the data tool, paste in the tool metadata JSON, which tells ChatGPT which resource to load and what progress messages to display during invocation.

Connecting to ChatGPT

Copy the streaming URL from your MCP server card. In ChatGPT, go to Settings > Apps & Connectors > Advanced Settings and enable developer mode. Create a new app, paste your MCP server URL, add a name and icon, and confirm you trust the application.

Once created, you can invoke the app directly in a ChatGPT conversation. Ask it to find pizzerias in a specific city, confirm the action, and watch your live Xano data render as a beautiful, interactive component right inside the chat window.