Claude builds good-looking dashboards, but the data is usually frozen at the moment you asked. And a page in your browser can’t simply fetch most data sources itself: many APIs block requests from web pages, and you can’t put an API key in a page anyone can open. Here’s how to give a Claude-built dashboard live data and an Update button, with no server of your own.
How it works
ArtifactDeploy fetches the data on its servers and gives your page a simple address to read it from:
- You (or Claude) add a data source to a deployed page: a JSON API, a CSV file or published Google Sheet, or a table on a web page.
- The page loads the data from
/_data/<name>on its own address — no cross-site problems, no keys in the page. - Results are cached for a few minutes, so a busy page doesn’t hammer the source. The Update button asks for fresh data; a schedule can refresh it hourly or every 15 minutes.
Step 1 — Ask Claude for the dashboard and the data
With ArtifactDeploy connected to Claude, describe both in one go:
“Build a dashboard of the 10 most populous countries from the Wikipedia list of countries by population, with a bar chart, a table and an Update button. Deploy it with live data.”
Claude deploys the page, sets up the data source and tells you how many rows it found. The page code reads the data like this:
const res = await fetch('/_data/countries');
const { data, updated_at, stale, error } = await res.json();
// Update button:
await fetch('/_data/countries?refresh=1');Step 2 — Pick the right kind of source
| Source | Use it for | Example ask |
|---|---|---|
| JSON API | Prices, metrics, anything with an API | “Use the open exchange-rate API for USD rates” |
| CSV / Google Sheet | Data your team edits by hand | “Use my published Google Sheet; keep only the North region” |
| Web page table | Public tables with no API | “Take the table of results from this page” |
For Google Sheets, use File → Share → Publish to web → CSV and give Claude that link. For web tables, ArtifactDeploy follows the site’s robots.txt and only reads pages that allow it.
Step 3 — Sources that need an API key
Tell Claude the key once: “Add my API key as the X-API-Key header.” It’s encrypted and stored on the server, used only when fetching, and never appears in the page or in Claude’s replies. (Stored keys need Starter or above.)
Step 4 — Keep it fresh
- Update button: visitors get fresh data on demand (a failing source is retried at most once a minute).
- Schedule: “Refresh it every hour” on Starter, or every 15 minutes on Pro, so the page is current even before anyone clicks.
- If a source fails, the page keeps showing the last good data and says so, instead of going blank.
Tips
- Prefer official APIs over scraping popular finance sites; those often rate-limit shared cloud servers, so you’ll see the last good copy more often.
- Ask for less. “Only the date and closing price” is faster and clearer than whole responses.
- Check health from Claude: “List the data sources on my dashboard” shows each source’s status, last update and a sample of rows.
Share it
The dashboard is a normal link with a preview card, so it works in a team chat, a client email or a LinkedIn post — and the numbers are current whenever someone opens it. Want a head start? Copy a live dashboard from the template gallery; the copy comes with its data sources.