Generate a dashboard

dashboards.create() starts building a dashboard from a title and a prompt. It returns as soon as the dashboard has an id, and generation continues in the background. The renderer streams the dashboard while it's built.

import { dashboards } from "@/lib/openui";

const response = await dashboards.create(
  {
    title: "Orders, last 30 days",
    prompt:
      "Daily orders and revenue for the last 30 days as a line chart, a KPI row with total revenue, " +
      "order count, and refund rate, and a table of the 10 largest orders. Add a status filter.",
  },
  { userId: session.user.id },
  { signal: request.signal },
);

The second argument is the context. The dashboard belongs to context.userId. The third is optional and takes a signal that cancels the call while it waits.

The response

create resolves with a response string. Use it unchanged:

• In an agent: return it as the tool result. It gives the agent the dashboard's metadata, such as its id, which the agent uses to request edits later. See Add to your agent.
• In the browser: pass it to LiveArtifactRenderer as response. See Render a dashboard.

Write the prompt

The model that builds the dashboard sees the prompt, the component library, and the data tools. It doesn't see the conversation that led to it.

• Name the data: Say which metrics, entities, and time ranges to show, so the model picks the right tools.
• Describe the layout: Mention the charts, tables, KPIs, and filters to include.
• Leave out the numbers: The dashboard loads them through data tools every time it opens.

For example, "revenue by plan for the last 90 days as a stacked bar chart, with a plan filter" builds a better dashboard than "a revenue dashboard".

When generation finishes

The dashboard is saved when generation finishes. After that, it appears in the dashboard list and can be rendered.

If generation fails, the renderer shows the error in its Error slot. Errors before generation starts, such as a missing userId, reject the create call with an OpenUIApiError that has a code and an HTTP status.