Skip to content

AI & MCP

Build dashboards with AI

Ask an AI agent to create a dashboard app on the Dashboard SDK, develop it against your real data and publish it.

Guide4 min read

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 ​

  1. Create the app

    Ask your AI agent

    Create 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 a CLAUDE.md that 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).

  2. Develop it against your data

    Ask your AI agent

    Start 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, or npm start in Angular) and calls thinger_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.

  3. Publish it

    Ask your AI agent

    Build 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:

    DestinationWhere 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 (--preview in 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_publish warns when a page loads thinger-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:

SettingContent
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.

Next steps ​