This guide shows how an AI agent builds a custom dashboard for you: it creates a dashboard app on the Dashboard SDK, runs it against your real data while it works, and publishes it as the dashboard of a device, a product or any other destination. You describe what you want; the agent writes the code.
For the same workflow done by hand, step by step, see Build a dashboard app.
Today you connect through the CLI
The agent uses the dashboard tools of the MCP server of the thinger CLI. Each tool has a CLI command that does the same: thinger dashboard init, dev and publish.
Before you start
- An agent connected to your account, as in Connect an AI agent. The agent must be able to run commands and edit files on your computer, as Claude Code does.
- Node.js 20 or later.
- Optional: browser tools in the agent (for example, a browser MCP server), so it can open the app, see it and read its console.
Steps
Create the app
Ask your AI agentCreate a dashboard app called greenhouse for my device YOUR_DEVICE, with React, and install its dependencies.
The agent calls
thinger_dashboard_init. It creates a folder with a TypeScript project on the Dashboard SDK, from one of the templates of the SDK package: React by default, or Angular. The folder includes:thinger.json: where the app is published (the file storage and the destinations) and the address of its development server. The next steps read it, so they run without arguments.AGENTS.md, and aCLAUDE.mdthat points to it: the rules of the dashboard frame, for the agents that work on the app.
Ask for a GitHub workflow at this step if you want the app published on every push to
main(see Publish from CI).Develop it against your data
Ask your AI agentStart the development server of the greenhouse app, open it with real data from YOUR_DEVICE and add a chart of its temperature and humidity over the last week. Check the browser console for errors.
The agent starts the development server of the app (
npm run dev, ornpm startin Angular) and callsthinger_dashboard_dev. The tool returns a link that opens the app from your computer as a standalone page, connected to your server, in the context you choose: a device, a product, an asset type or group, or a project. The app gets real data and reloads on every change, and its errors appear in the browser console.The link carries a full-access token
The link includes a temporary token with full access to your account (or to the project, in a project context). It lasts 8 hours by default, and each new link replaces it. Writes the app makes are real. The link only opens an address on your computer, unless you allow a remote one. See Permissions.
Publish it
Ask your AI agentBuild the greenhouse app and publish it as the dashboard of YOUR_DEVICE. Give me a preview link to share.
The agent builds the app and calls
thinger_dashboard_publish. The tool uploads the build to a public file storage and points the destinations at it:Destination Where the app opens dashboardA dashboard of the Dashboards list, created if it does not exist. device,product,asset_type,asset_group,projectThe dashboard of that device, product, asset type, asset group or project. The app gets its ID as context. One app can serve several destinations. With a preview (
--previewin the CLI), the tool also returns standalone links to review or share each destination in a browser, with a read-only token.
Result
The dashboard of YOUR_DEVICE opens the app in the console, with its live data. Later changes follow the same path: ask the agent for the change, check it with a new development link, and publish again.
Rules of the dashboard frame
The console shows a dashboard app inside a sandboxed frame. The template and its AGENTS.md already follow these rules, but check them when an app works in development and fails once published:
- No
localStorage, cookies or<base>tag. They work in the development link, outside the frame, and fail once published. Keep state in properties through the SDK. - Hash routing and relative asset paths, so the app works from its storage folder.
- The SDK package, not the old script.
thinger_dashboard_publishwarns when a page loadsthinger-dashboard.js, the deprecated script build of the SDK. It also warns when the SDK of the app needs a newer server than yours, or when a newer SDK is on npm.
The complete list of calls of the SDK is in the Dashboard SDK reference, and how dashboard apps are stored and served is in Dashboard apps.
Publish from CI
To publish the app on every push, the workflow that thinger_dashboard_init adds (with ci, or --ci in the CLI) runs npx -y @thinger-io/cli dashboard publish with two settings of the repository:
| Setting | Content |
|---|---|
THINGER_SERVER (variable) | Your server: YOUR_SERVER. |
THINGER_TOKEN (secret) | An access token allowed to write file storages and dashboards, or the dashboard property of the destinations. |
Create a token for this only, with those permissions, in Access Tokens.
The workflow installs the dependencies with npm ci, which needs a package-lock.json. Run npm install in the app (or create it with install, --install in the CLI) and commit package-lock.json before the first push.