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)

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.

---