UI Structure

Understanding UI components and composition in DAIN tool handlers

Overview

Tool handlers can return UI components that are displayed to users in the Butterfly interface. UI components are built using UIBuilders from @dainprotocol/utils.

Basic Structure

import { DainResponse, CardUIBuilder } from "@dainprotocol/utils";

return new DainResponse({
  text: "Weather information",
  data: weatherData,
  ui: new CardUIBuilder()
    .title("Weather Report")
    .content("Current temperature is 72°F")
    .build()
});

Component Composition

UIBuilders support component nesting through addChild and addChildren methods:

import { 
  DainResponse, 
  CardUIBuilder, 
  AlertUIBuilder,
  TableUIBuilder 
} from "@dainprotocol/utils";

const alertUI = new AlertUIBuilder()
  .variant("info")
  .title("Search Complete")
  .message("Found 3 matching results")
  .build();

const tableUI = new TableUIBuilder()
  .addColumns([
    { key: "name", header: "Name" },
    { key: "value", header: "Value" }
  ])
  .rows(results)
  .build();

const cardUI = new CardUIBuilder()
  .title("Search Results")
  .addChild(alertUI)
  .addChild(tableUI)
  .build();

return new DainResponse({
  text: "Search complete",
  data: results,
  ui: cardUI
});

Complex Layouts

Example of a multi-level dashboard layout:

import { 
  DainResponse, 
  CardUIBuilder,
  ChartUIBuilder,
  StatsGridUIBuilder,
  TableUIBuilder
} from "@dainprotocol/utils";

// Create chart component
const chartUI = new ChartUIBuilder()
  .type("line")
  .title("Daily Trends")
  .chartData(trendData)
  .dataKeys({ x: "date", y: "value" })
  .build();

// Create stats grid
const statsUI = new StatsGridUIBuilder()
  .addStats([
    { title: "Total Users", value: 1234 },
    { title: "Revenue", value: 45600, prefix: "$" }
  ])
  .build();

// Create data table
const tableUI = new TableUIBuilder()
  .addColumns([
    { key: "id", header: "ID" },
    { key: "name", header: "Name" }
  ])
  .rows(userData)
  .build();

// Compose final layout
const dashboardUI = new CardUIBuilder()
  .title("Dashboard")
  .addChild(statsUI)
  .addChild(chartUI)
  .addChild(tableUI)
  .build();

return new DainResponse({
  text: "Dashboard data loaded",
  data: dashboardData,
  ui: dashboardUI
});