Dashboard

Hashed View, structured result, and forecast.refresh action.

OpenAIOpen in ChatGPTAnthropicOpen in Claude

The examples/dashboard app shows a tool that returns data and a View that renders a chart.

tool.ts

export default defineTool({
  description: "Get a forecast and show an interactive chart",
  input: z.object({ city: z.string() }),
  output: z.object({
    city: z.string(),
    summary: z.string(),
    points: z.array(z.object({ t: z.string(), temp: z.number() })),
  }),
  async execute({ city }) {
    return { city, summary: `Mild in ${city}`, points };
  },
});

view.tsx

The View reads typed result and calls a backing refresh action:

const { result, callTool } = useApp<Forecast>();
callTool("forecast.refresh", { city: result.city });

actions.ts

export const refresh = defineAction({
  description: "Reload forecast points",
  input: z.object({ city: z.string() }),
  async execute({ city }) {
    return { city, summary: `Updated forecast for ${city}`, points: [...] };
  },
});

What this proves

  • Compiler emits hashed ui:// HTML and _meta.ui.resourceUri
  • structuredContent types flow into useApp()
  • App-only actions stay out of tools/list
  • Text fallback works when UI is stripped

Run it:

cd examples/dashboard
pnpm dev
pnpm preview
PreviouscreateAppNextConfirm