​
What’s This About?

Instead of just showing text responses, your AI can display beautiful custom UIs like:

  • Forms to collect information
  • Charts and graphs
  • Product cards
  • Settings toggles
  • And much more!

​
Quick Example: Weather Display

Let’s create a simple weather display UI. We’ll build an AI that shows weather data in a nice card with a graph.

1

Create the Weather Action

  1. Go to your dashboard
  2. Create a new action called getTheWeather
  3. Set it as a GET request
  4. Use this URL:
https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&current=temperature_2m&hourly=temperature_2m,relative_humidity_2m,wind_speed_10m
2

Add the Widget to Your App

Add this code to your React app:

import { CopilotWidget, Root } from "@openchatai/widget";
import { WeatherDisplay } from "./WeatherDisplay";

function App() {
  return (
    <div className="max-w-sm h-full">
      <Root
        options={{
          apiUrl: "https://api.opencopilot.so/backend",
          token: "YOUR_TOKEN",
          defaultOpen: true,
          initialMessage: "Hello",
          socketUrl: "https://api.opencopilot.so",
          components: [
            {
              key: "getTheWeather",  // Must match your action name
              component: WeatherDisplay,
            },
          ],
          language: "en",
        }}
      >
        <CopilotWidget />
      </Root>
    </div>
  );
}

export default App;
3

Create the Weather Display

Create a new file called WeatherDisplay.tsx:

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ComponentProps } from "@openchatai/widget";
import { ResponsiveLine } from "@nivo/line";

// This matches the data from the weather API
type WeatherData = {
  current: {
    temperature_2m: number;
    wind_speed_10m: number;
  };
  current_units: {
    temperature_2m: string;
    wind_speed_10m: string;
  };
  hourly: {
    time: string[];
    temperature_2m: number[];
    relative_humidity_2m: number[];
    wind_speed_10m: number[];
  };
}

export function WeatherDisplay(props: ComponentProps<WeatherData>) {
  const { data } = props;
  
  return (
    <Card className="p-3">
      <CardHeader>
        <CardTitle>
          {data.current.temperature_2m}°C
          Wind: {data.current.wind_speed_10m} km/h
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div style={{ height: "150px" }}>
          <ResponsiveLine
            data={[
              {
                id: "temperature",
                data: data.hourly.time.map((time, i) => ({
                  x: time,
                  y: data.hourly.temperature_2m[i],
                })),
              }
            ]}
            margin={{ top: 20, right: 20, bottom: 40, left: 40 }}
            yScale={{ type: "linear" }}
            axisBottom={{ tickRotation: -45 }}
          />
        </div>
      </CardContent>
    </Card>
  );
}

​
How It Works

  1. When someone asks about the weather, your AI calls the getTheWeather action
  2. The action gets data from the weather API
  3. Our widget finds the matching component (WeatherDisplay)
  4. The component shows the weather data in a nice UI

That’s it! Now when users ask about the weather, they’ll see a beautiful card with current conditions and a temperature graph.

Remember to:

  • Match your component’s key with your action name
  • Make sure your component can handle the data structure from your action
  • Use shadcn/ui components for consistent styling

​
What You Can Build

You can create UIs for many purposes:

  • Product displays
  • Booking forms
  • Data visualizations
  • Settings panels
  • And much more!

Just create an action that returns the data you need, and a component to display it how you want.

Need help? check out more examples in our GitHub repo.

Was this page helpful?

Chat widgetAuthentication