Unified HAX + A2UI Demo

A demonstration app combining HAX SDK components, CopilotKit A2UI pattern, with support for multiple design systems:

• shadcn/ui - Beautifully designed components built with Radix UI and Tailwind CSS
• Open UI Kit - UI/UX framework based on Material-UI from Outshift

Features

Feature	Description
🎨 Design System Switching	Toggle between shadcn/ui and Open UI Kit in real-time
📅 Timeline	Project timeline with status indicators
📊 Details Panel	Reports with stats and data tables
📈 Charts	Bar, line, pie visualizations
📚 Sources	Citation and attribution display

Quick Start

1. Install Dependencies

cd unified-demo
npm install

2. Run the Development Server

npm run dev

Open http://localhost:3002 in your browser.

Architecture

unified-demo/
├── app/
│   ├── components/
│   │   ├── shadcn/           # shadcn/ui implementations
│   │   │   ├── timeline.tsx
│   │   │   ├── details.tsx
│   │   │   ├── chart.tsx
│   │   │   └── sources.tsx
│   │   ├── openui/           # Open UI Kit implementations
│   │   │   ├── timeline.tsx
│   │   │   ├── details.tsx
│   │   │   ├── chart.tsx
│   │   │   └── sources.tsx
│   │   ├── unified/          # Design-system-aware wrappers
│   │   │   └── index.tsx
│   │   ├── design-switcher.tsx
│   │   └── ...
│   ├── context/
│   │   └── design-system.tsx  # Design system context
│   └── page.tsx               # Main demo page
└── ...

How It Works

1. Design System Context

const { designSystem, setDesignSystem } = useDesignSystem();
// designSystem: "shadcn" | "openui"

2. Unified Components

Each component has two implementations that are switched based on context:

export function UnifiedTimeline(props: TimelineProps) {
  const { designSystem } = useDesignSystem();

  if (designSystem === "openui") {
    return <OpenUITimeline {...props} />;
  }
  return <ShadcnTimeline {...props} />;
}

3. A2UI Pattern Integration

The AI generates artifacts that render using the currently selected design system:

useCopilotAction({
  name: "create_timeline",
  render: ({ args }) => (
    <UnifiedTimeline {...args} />  // Respects design system choice
  ),
});

Design System Comparison

Aspect	shadcn/ui	Open UI Kit
Style	Minimal, clean	Vibrant, gradient-rich
Colors	Neutral, subtle	Bold, colorful
Borders	Subtle borders	Shadows, gradients
Foundation	Radix UI + Tailwind	Material-UI

Learn More

• HAX SDK Documentation
• CopilotKit A2UI Docs
• shadcn/ui
• Open UI Kit