Building a Data Dashboard Agent with A2UI

Goal: Build an AI agent that can analyze data and present findings through dynamic, interactive charts.

What We’re Building

An “Analyst Agent” that:

1. Accepts natural language queries like “Show me Q4 revenue trends.”
2. Processes data and selects appropriate visualization types.
3. Renders interactive charts using A2UI components.

Prerequisites

• React 18+ with TypeScript
• A2UI SDK installed (npm install @a2ui/react)
• A chart library (we’ll use Chart.js)

[!TIP] Using Vercel AI SDK? You don’t need to abandon your current stack. Read our guide on how to use A2UI with Vercel AI SDK to get the best of both worlds.

Step 1: Define the Chart Component

First, create a reusable chart component that the agent can invoke.

// components/DashboardChart.tsx
import { Bar, Line, Pie } from 'react-chartjs-2';

interface ChartProps {
  title: string;
  chartType: 'bar' | 'line' | 'pie';
  data: {
    labels: string[];
    datasets: {
      label: string;
      data: number[];
      color: string;
    }[];
  };
}

export function DashboardChart({ title, chartType, data }: ChartProps) {
  const chartData = {
    labels: data.labels,
    datasets: data.datasets.map(ds => ({
      label: ds.label,
      data: ds.data,
      backgroundColor: ds.color,
      borderColor: ds.color,
    })),
  };

  const ChartComponent = { bar: Bar, line: Line, pie: Pie }[chartType];

  return (
    <div className="bg-gray-900 p-6 rounded-xl border border-white/10">
      <h3 className="text-xl font-bold text-white mb-4">{title}</h3>
      <ChartComponent data={chartData} />
    </div>
  );
}

Step 2: Register with A2UI

Add the chart component to your registry so the agent can use it.

// registry.ts
import { createRegistry } from '@a2ui/react';
import { DashboardChart } from './components/DashboardChart';

export const registry = createRegistry({
  'dashboard-chart': DashboardChart,
  // ... other components
});

Step 3: Configure the Agent Prompt

Teach the LLM how to use the chart component.

SYSTEM_PROMPT = """
You are a data analyst assistant. When the user asks for data visualization:

1. Analyze the data structure.
2. Choose the best chart type:
   - `bar`: For comparisons across categories.
   - `line`: For trends over time.
   - `pie`: For proportions of a whole.
3. Respond with the following JSON structure:

{
  "type": "dashboard-chart",
  "props": {
    "title": "Your Chart Title",
    "chartType": "bar|line|pie",
    "data": {
      "labels": ["Label1", "Label2", ...],
      "datasets": [{
        "label": "Series Name",
        "data": [10, 20, 30, ...],
        "color": "#6366f1"
      }]
    }
  }
}
"""

Step 4: Handle Streaming Updates

For large datasets, stream the data progressively.

// Using A2UI streaming
<AIOutput
  messages={messages}
  registry={registry}
  onPartialUpdate={(partial) => {
    // Handle partial chart data
    console.log('Streaming update:', partial);
  }}
/>

Example Conversation

User: “Show me the sales performance by region for 2024.”

Agent Response:

{
  "type": "dashboard-chart",
  "props": {
    "title": "2024 Regional Sales Performance",
    "chartType": "bar",
    "data": {
      "labels": ["North America", "Europe", "Asia Pacific", "LATAM"],
      "datasets": [{
        "label": "Revenue (M USD)",
        "data": [45, 38, 52, 18],
        "color": "#10b981"
      }]
    }
  }
}

Best Practices

1. Always validate data: Ensure arrays match in length.
2. Use color tokens: Define a palette in your design system.
3. Add loading states: Show skeleton while data streams.
4. Handle errors gracefully: Display fallback UI for malformed data.

---