Connecting Your First API

You can connect any REST API to a drio MCP tool in four steps — create a tool, add an API request node, map the response to widgets, and deploy. The entire process takes under 10 minutes with zero backend code. This guide walks you through it from scratch using a real API.

Every useful MCP tool connects to external data. Whether you are pulling weather forecasts, querying a database, or fetching product inventory — the API connector is where your tool comes to life. If you are not familiar with MCP itself, start with What Is MCP? for the big picture.

We will use the Open-Meteo weather API for this tutorial. It is free, requires no API key, and returns rich data — perfect for a first project.

What we are building

By the end of this guide, you will have a weather dashboard tool that:

Accepts a city name as input
Calls the Open-Meteo API for current conditions and a 7-day forecast
Renders the data as a card widget (current weather) and chart widget (forecast)
Works inside ChatGPT, Claude, and Cursor

Here is what the finished tool looks like when invoked in an AI client:

Weather tool rendering in ChatGPT showing card and chart widgets

Step 1: Create a new tool

Open the drio builder and click New Tool. You will see a blank canvas with a tool configuration panel on the right.

Give your tool a name and description. These are important — this is what AI assistants show users when they discover your tool. Be specific about what the tool does:

Name: get_weather
Description: "Get current weather conditions and a 7-day forecast for any city worldwide"

The description acts as a natural language hint for the AI. When a user asks "what is the weather in Berlin?", the AI matches that intent against your tool's description to decide whether to invoke it.

Define your parameters

Add the input parameters your tool needs. Click Add Parameter in the tool config panel:

city — Type: text. Description: "City name (e.g., Berlin, New York, Tokyo)". Required: yes.
units — Type: dropdown. Options: "celsius", "fahrenheit". Default: "celsius". Required: no.

Each parameter gets a JSON Schema definition under the hood — drio generates this automatically from your visual configuration. This schema is what the AI uses to validate inputs before calling your tool.

Tool configuration panel showing city and units parameters

Step 2: Add an API request node

Drag an API Request node onto the canvas. This is where you configure the actual HTTP call to your external API.

Configure the request

Method: GET
URL: https://api.open-meteo.com/v1/forecast
Query parameters:
- latitude and longitude — We will use drio's built-in geocoding to convert the city name. Alternatively, you can chain a geocoding API call first.
- current = temperature_2m,weather_code,wind_speed_10m,relative_humidity_2m
- daily = temperature_2m_max,temperature_2m_min,weather_code
- timezone = auto
- temperature_unit = {{units}}

The {{units}} syntax is drio's variable interpolation. It inserts the value of the units parameter from the tool's input. You can use this syntax in URLs, headers, query params, and request bodies.

About authentication

Open-Meteo does not require authentication, which makes it ideal for a first tutorial. But most production APIs do. drio supports three auth methods in the Auth tab:

API Key — Added as a header or query param. drio encrypts and stores the key securely.
Bearer Token — Standard Authorization: Bearer <token> header.
OAuth 2.0 — Full OAuth flow with client credentials, authorization code, or PKCE.

Your API credentials never leave drio's infrastructure. They are encrypted at rest and injected at runtime — they are never exposed to the AI client or the end user.

Testing the request

Click Test Request in the API node. Enter a sample city and hit send. You should see a JSON response with current and daily objects:

{
  "current": {
    "temperature_2m": 18.3,
    "weather_code": 2,
    "wind_speed_10m": 12.4,
    "relative_humidity_2m": 65
  },
  "daily": {
    "temperature_2m_max": [19.1, 21.3, 18.7],
    "temperature_2m_min": [11.2, 13.4, 10.8],
    "weather_code": [2, 1, 3]
  }
}

If the test succeeds, you are good. If it fails, check the troubleshooting section at the bottom of this post.

Step 3: Map the response to widgets

This is where your tool goes from "returns JSON" to "renders an interactive UI." Connect the API response node to widgets on the canvas.

Current conditions card

Drag a Card widget onto the canvas and connect it to the API response node. Map the fields:

Title: Weather in {{city}}
Primary value: {{current.temperature_2m}}°C
Subtitle: Map weather_code to a human-readable condition (drio includes a built-in weather code mapper)
Metadata fields: Wind speed, humidity

7-day forecast chart

Drag a Chart widget onto the canvas. Configure it:

Type: Line chart
X-axis: Days (auto-generated from the daily.time array)
Y-axis: Temperature range
Data series: daily.temperature_2m_max and daily.temperature_2m_min

Hourly breakdown table (optional)

If you also request hourly data from Open-Meteo, you can add a Table widget for the hourly breakdown. Tables support sorting and filtering out of the box.

Each widget property maps to a field in your API response using the visual data mapper. Click a widget property, then click the corresponding response field — done. No template strings, no manual JSON construction. When your API schema changes, reconnect the nodes and the widget updates accordingly.

For a deeper look at all available widget primitives and how to combine them, check out Building MCP Tools with Rich UIs.

Step 4: Test and deploy

Preview locally

Use the built-in Preview panel to test your tool with sample inputs. Type "Berlin" as the city and hit invoke. You will see exactly what users see when they call the tool in ChatGPT or Claude — the card with current conditions and the chart with the 7-day forecast, rendered with your brand colors.

The preview uses a real API call, so the data is live. This is your chance to verify:

Widget layout and spacing look correct
Data fields are mapping to the right properties
Labels and formatting are what you expect
Actions work (if you added any)

Deploy

When everything looks right, hit Deploy. drio compiles your visual configuration into a spec-compliant MCP server and deploys it to the cloud. Your tool gets a dedicated endpoint:

https://app.getdrio.com/{your-app}/mcp

This URL works with any MCP-compatible AI client. Copy it, paste it into ChatGPT's MCP settings, Claude Desktop's config, or Cursor's .cursor/mcp.json — and your tool is live.

The whole process takes under 30 seconds. Updates are instant too — save in the builder, and changes are live on the endpoint within seconds. No redeploy, no build step.

For detailed instructions on connecting to specific AI clients, see How to Add MCP Tools to ChatGPT.

Troubleshooting common issues

API request returns an error

404 Not Found — Double-check the URL. Make sure there are no trailing slashes or typos in the endpoint path.
401 Unauthorized — Your API key is wrong or expired. Re-enter it in the Auth tab.
429 Too Many Requests — You have hit the API's rate limit. Wait a few minutes or check if you need a paid plan.
CORS errors — This should not happen with drio since API calls run server-side, not in the browser. If you see CORS errors in the preview, refresh the page.

Widgets show wrong data

Check the field mapping. The most common mistake is mapping to the wrong nesting level — current.temperature_2m vs. just temperature_2m.
Use the Response Inspector in the API node to see the raw JSON structure. Match field paths exactly.

Tool does not appear in ChatGPT

Make sure you deployed (not just saved). The deploy button shows a green checkmark when successful.
Verify the MCP URL is correctly pasted in ChatGPT's settings. No extra spaces, no trailing newline.
ChatGPT may take a few seconds to discover new tools. Try refreshing the chat.

Data types look wrong

If numbers appear as strings (e.g., "18.3" instead of 18.3), check the API response type. drio auto-casts common types, but some APIs return numbers as strings.
If dates look wrong, check the timezone setting in your API request. Open-Meteo supports timezone=auto which usually handles this.

What to build next

Now that you know the basics, here are some ideas:

Connect a paid API — Try the Spotify API, GitHub API, or your own company's internal API. The auth configuration supports OAuth 2.0 for more complex flows.
Chain multiple APIs — Add a second API Request node to geocode the city name before calling the weather API. Nodes execute in sequence, so each node can use data from the previous one.
Add widget actions — Make the forecast chart interactive. When a user clicks a day, trigger a follow-up tool call that shows the hourly breakdown for that specific day.

The MCP server building guide covers how this works at the protocol level if you want to understand what drio generates under the hood.

The fastest way to learn drio is to connect an API you already use. Start with something simple, then layer on more widgets and logic as you go.