Guides · Build

How to turn an AI dashboard into one HTML file you can share

The most shareable thing an AI tool can give you is one HTML file with everything inside it. It opens in any browser, it doesn’t need the chat it came from, and it works the same whether Claude, ChatGPT, Gemini or Copilot made it. Here’s the prompt that gets you one every time.

The Dashfridge team · Updated November 7, 2026

Why one file?

A dashboard that lives inside a chat only works for people who can open that chat. A dashboard that reads from a live connection breaks the moment someone else opens it without that connection. One self-contained file has neither problem: the numbers, the charts and the layout travel together.

The prompt

Paste this after your request (“build a weekly cash dashboard from this export”) or after the AI has already made something you like:

Copy this prompt

Build this as ONE complete, self-contained HTML file I can save and share.

Rules:
- Put all the data inside the file (as a JavaScript array or JSON). No API calls,
  no fetch(), no links to spreadsheets or databases.
- Put all styles and scripts inside the file. If you need a chart library, load it
  from cdn.jsdelivr.net or cdnjs.cloudflare.com, or inline it.
- No outside images. Use inline SVG or emoji for icons.
- At the top, show the title, a one-line summary, and "Data as of [date]".
- Make it readable on a laptop and a phone, and print cleanly to one page if possible.
- Give me the whole file in one code block (or as a download), not snippets.

Getting the file out of each tool

Claude

Claude usually shows the dashboard in a side panel. Use the download option on that panel, or ask “give me the complete HTML file” and save it. More in sharing a Claude dashboard with your team.

ChatGPT

ChatGPT may show it in a canvas, a preview or as a file. Ask for “one complete, self-contained HTML file” and download it. More in sharing a ChatGPT canvas dashboard.

Gemini and Copilot

Both can write the page. Ask for the full HTML in one code block, copy it into a plain text editor (Notepad, TextEdit in plain text mode), and save it with a .html ending.

Cursor, Claude Code and other coding tools

Ask it to write dashboard.html to your project folder, then open it in your browser.

Check it before you share it

Turn off Wi-Fi and open it. If the numbers and charts still show, the data is inside the file.
Look for “Data as of”. Readers should know how fresh the numbers are without asking you.
Check the totals once. AI tools are good at layout and occasionally wrong at arithmetic. Compare one or two numbers with the source.
Keep it under 10 MB. If it’s bigger, ask the AI to summarize the data first.

What works where

The dashboard uses…	Opens from the file?	Works on Dashfridge?
Data inside the file	Yes	Yes
A chart library from a well-known CDN	Yes, when online	Yes
Live API calls or fetch()	Sometimes	No, blocked for safety
Images from other websites	Yes, when online	No, use inline SVG
A file on your laptop (C:\Users\…)	Only on your laptop	No

Common questions

Why does my AI dashboard look broken when I open the file?

Usually it depends on something outside the file: data from an API, a spreadsheet link, a local file path or an image URL. Ask your AI to put the data and assets inside the file, then test it with your Wi-Fi off.

Can a single HTML file hold a lot of data?

A few thousand rows is fine. Very large datasets make the file slow to open. Ask the AI to pre-summarize the data (by week, by customer, by crew) and only include what the dashboard shows.

Which AI tools can do this?

Any of them that write code: Claude, ChatGPT, Gemini, Copilot, Cursor and others. The prompt works the same way in each.