From Idea to AI App in 10 Minutes
A timed speed-run tutorial — build and deploy a weather dashboard tool from zero to live in ChatGPT in under 10 minutes using drio.
You can go from zero to a deployed AI app in ChatGPT in under 10 minutes. This is a timed walkthrough — we will build a real weather dashboard tool that shows current conditions and a 7-day forecast with interactive widgets. Start a timer if you want to follow along.
This tutorial assumes you have a drio account and know the basics of What Is MCP?. If you want the in-depth API guide, see Connecting Your First API. This is the express version.
What we are building
A weather tool that:
- Accepts a city name
- Returns current conditions as a card widget
- Shows a 7-day forecast as a chart widget
- Works in ChatGPT, Claude, and Cursor
We will use the Open-Meteo API — free, no API key required.
flowchart LR prompt["User asks for weather"] tool["get_weather tool"] api["Open-Meteo API"] card["Current conditions card"] chart["7-day forecast chart"] clients["ChatGPT, Claude, Cursor"] prompt --> tool --> api api --> card api --> chart card --> clients chart --> clients
0:00 — Sign in and create a new app
Open drio and sign in. Click New App. Give it a name: "Weather Dashboard."
Select Start from scratch (or use the Weather template if available — it will save you 3 minutes, but where is the fun in that).
1:00 — Create the tool
Click Add Tool. Configure:
- Name:
get_weather - Description: "Get current weather conditions and a 7-day forecast for any city worldwide"
- Parameters:
city— Text, required. Description: "City name (e.g., Berlin, Tokyo, New York)"
That is one parameter. Keep it simple for the first build.
2:00 — Add the API connection
Drag an API Request node onto the canvas. Configure:
- Method: GET
- URL:
https://api.open-meteo.com/v1/forecast - Query params:
latitude: 52.52 (we will hardcode Berlin for now — geocoding can come later)longitude: 13.41current:temperature_2m,weather_code,wind_speed_10m,relative_humidity_2mdaily:temperature_2m_max,temperature_2m_min,weather_codetimezone:auto
Click Test Request. You should see the JSON response in under a second.
3:30 — Map to a card widget
Drag a Card widget onto the canvas. Connect it to the API response node.
Map the fields:
- Title: "Weather in Berlin" (hardcoded for now — you can use
{{city}}for dynamic titles) - Primary value:
{{current.temperature_2m}}°C - Subtitle: "Current conditions"
- Metadata: Wind speed from
current.wind_speed_10m, Humidity fromcurrent.relative_humidity_2m
5:00 — Add a chart widget
Drag a Chart widget onto the canvas. Configure:
- Type: Line chart
- X-axis: Days (from
daily.time) - Series 1:
daily.temperature_2m_max— label "High" - Series 2:
daily.temperature_2m_min— label "Low"
Connect it to the same API response node.
You should now see two widgets on the canvas, both wired to the API response.
6:30 — Customize the brand
Open the Brand panel. Choose:
- A primary color (blue works well for weather)
- Corner style: Medium
- Font: Leave the default or pick one
This takes 30 seconds and makes the tool look intentional rather than generic.
7:00 — Preview
Click Preview. Type "Berlin" as the city input and hit invoke.
You should see:
- A card with the current temperature, wind speed, and humidity
- A line chart with the 7-day high/low forecast
If something looks off, fix the field mapping. Most issues are wrong response paths — use the Response Inspector to check.
8:00 — Deploy
Click Deploy. Wait for the green checkmark (usually 10-15 seconds).
Copy the MCP endpoint URL:
https://app.getdrio.com/weather-dashboard/mcp9:00 — Add to ChatGPT
- Open ChatGPT
- Go to tools/settings
- Click Add MCP Tool
- Paste the URL
- Click Connect
Wait a few seconds for ChatGPT to discover the tool.
10:00 — Test it live
Type: "What is the weather in Berlin?"
ChatGPT invokes your tool and renders the card and chart inline in the conversation. You built that. In 10 minutes.
What we skipped (and how to add it later)
This was a speed-run, so we cut some corners:
Dynamic geocoding
We hardcoded Berlin's coordinates. To support any city, add a geocoding step — either chain a geocoding API call before the weather API, or use drio's built-in geocoder if available.
Error handling
What happens when the user types a city that does not exist? Add a conditional branch in the flow that checks the API response and returns a friendly error message.
More widgets
A table with hourly breakdowns. A stat dashboard with UV index, precipitation chance, and sunrise/sunset times. A form for selecting between celsius and fahrenheit. You can layer these on incrementally.
Multiple tools
Add a get_weather_alerts tool for severe weather warnings. Add a compare_weather tool that shows two cities side by side. Multiple tools in one app create a richer experience.
For the complete, unhurried version of this tutorial, see Connecting Your First API. For more on widget design, see Building MCP Tools with Rich UIs.
The point
Ten minutes from nothing to a working AI app in ChatGPT. Not a mockup. Not a prototype. A real, deployed tool that real users can invoke.
This is what visual builders make possible. The protocol complexity — JSON-RPC, capability negotiation, transport configuration, widget rendering contracts — is all handled by the compiler. You focus on what your tool does. drio handles how.
For the full vision of what this enables, see Build AI Apps Without Code.
The gap between "I have an idea" and "it is live in ChatGPT" should be measured in minutes, not months. That is what drio is for.
