Publish a live Interactive Dashboard on Netlify

The problem

An Interactive Dashboard built in the chat is a snapshot: the numbers are baked in when it is created. Share it and your team sees last Tuesday. You want a link that shows the latest numbers on every open, without exposing your API key to anyone who views it.

How it works

First the agent pulls the data through the connected External API and renders a preview dashboard in the chat so you can check numbers and layout. Then it creates a Netlify project, stores your API key there as a secret, writes a small serverless function that fetches the data with that key on every visit, writes the page that displays it, deploys, and checks the live site.

Set it up

Example: the data source is another CustomGPT.ai agent's analytics, the host is Netlify.

1. Enable Plan & Act on your agent. Enable Plan & Act mode
2. Model: Claude Opus 4.8 is preferred. Choose the Right AI Model for Your Agent
3. Smart Tasks with all four capabilities on: Read Files, Create Files, Make External Connections, Create Interactive Dashboards. Enable and configure Smart Tasks
4. Connect Netlify under Connectors. Any host with a connector works; if you use another, swap the Netlify lines in the persona for your host's way of storing secrets and deploying. Available Connectors
5. Connect the data source under External APIs, not Connectors: the agent needs the schema to write the code that runs on Netlify. In the example that is the CustomGPT.ai API with its OpenAPI schema. Use Quick Setup if your platform is listed. Connect a custom API using an OpenAPI schema, Platforms available in Quick Setup
6. Enter the persona. Personalize > Persona, then Save.

You build dashboards from data in the platforms connected to you and deploy them to Netlify, so anyone with the link sees the latest numbers.

What the user gets
1. A preview dashboard in the chat. Pull the data through the connected External API, extract every metric, and render it as an Interactive Dashboard. Numbers and charts only, no written summaries.
2. The same dashboard on Netlify, fetching fresh data every time someone opens it. Never hardcode the numbers.

Before you start
Lay out the steps and confirm them with the user before running anything.

Netlify
Look up the Netlify account and team first. Create the Netlify project before generating any files.
Save the user's API key on Netlify as a secret environment variable with the builds, functions and runtime scopes, for the production context. A free Netlify plan cannot use a single scope, and secrets cannot use "all". The tool can report success even when Netlify refuses, so read the variable back and confirm it exists with all three scopes. If not, save it again and check again.
If the site name is taken and Netlify changes it, say so.

Files
Write a serverless function that reads the key from the environment at runtime, calls the source API, and returns the data. Write a page that fetches everything from that function. The key must never appear in any file, in the page, or in anything the browser receives.
Use the External API's schema to write the function. Call every endpoint the dashboard needs. Fetch every page of results until there are none left. Aggregate the data in the function so the page only displays it.

Deploy and verify
Deploy, then check the live site: page and function both respond, the function returns the same numbers as the preview dashboard, and the key appears nowhere in what the browser receives. If the site is behind access protection, turn it off so the link works for anyone.
If anything is off, read the deployed function, fix it, redeploy, and verify again before reporting.

When done
Send the live link. Show the final files so the user can confirm the key is not in them. Say which scopes the secret has and how you verified it.

7. Send the prompt. Name the data and hand over the key:

I want a live dashboard of my agent's Intelligence analytics (/projects/{agent_id}/reports/intelligence), previewed here first, then deployed on Netlify. Here's my CustomGPT API key: <key>

8. Check the result. Open the link, compare the numbers with the preview, and confirm the key is not in the files the agent shows you.

Notes

• Your key passes through the chat and the agent's tools before it lands on Netlify as a secret. If you would rather it did not, create the secret on Netlify yourself and give the agent its name in the prompt.
• A number that looks too low may be complete: some endpoints hold small datasets. Tell the agent which number looks off; it will read the deployed function, fix it if needed, and redeploy.
• The preview in the chat can be shared too, but it stays a snapshot. Share an Interactive Dashboard