Creating UI Components

UI components in AgentPress provide rich visual representations of tool outputs in the chat interface. They transform raw data into beautiful, interactive displays that enhance the user experience.

Overview

When an agent uses a tool, the output can be displayed using a custom UI component. These components are React components that receive tool output data and render it in a meaningful way.

File Structure

UI components are created in /packages/custom/src/ui/ and registered in the main index file:


packages/custom/src/ui/
├── index.ts              # Registration file
├── weather.tsx           # Weather component example
├── stockValue.tsx        # Stock value component
└── sendMessage.tsx       # Message component

Basic UI Component

Here’s the structure of a basic UI component:


"use client";
 
import { type TToolUI } from "@agentpress/lib/types";
import { Calendar, Info } from "lucide-react";
 
export const MyToolUI: TToolUI = ({ toolPart }) => {
  // Extract data from tool output
  const toolResult = toolPart?.output as any;
  const data = toolResult?.data || "No data available";
  
  return (
    <div className="rounded-lg shadow-lg overflow-hidden max-w-2xl w-full bg-white dark:bg-gray-800">
      {/* Header */}
      <div className="bg-blue-600 text-white p-4">
        <div className="flex items-center gap-2">
          <Info className="h-5 w-5" />
          <h2 className="text-lg font-semibold">Tool Result</h2>
        </div>
      </div>
      
      {/* Content */}
      <div className="p-6">
        <p className="text-gray-700 dark:text-gray-300">{data}</p>
      </div>
      
      {/* Footer */}
      <div className="bg-gray-100 dark:bg-gray-700 px-6 py-3">
        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
          <Calendar className="h-4 w-4" />
          <span>Updated: {new Date().toLocaleString()}</span>
        </div>
      </div>
    </div>
  );
};

Component Registration

After creating your UI component, you must register it in /packages/custom/src/ui/index.ts:


import { type IToolsUI } from "@agentpress/lib/types";
import { Weather } from "./weather";
import { MyToolUI } from "./myToolUI";
// ... other imports
 
export const toolsUI: IToolsUI = {
  // Existing tools
  getWeather: Weather,
  
  // Your new tool UI (key must match tool name)
  myToolName: MyToolUI,
  
  // ... other tool UIs
};

Best Practices

Keep it Simple: Start with basic functionality and add complexity gradually
Handle Edge Cases: Always provide fallbacks for missing data
Use Icons: Leverage Lucide React icons for consistent iconography
Follow Design System: Use Tailwind classes consistently with the existing UI
Performance: Use React hooks appropriately and avoid unnecessary re-renders
Accessibility: Include proper ARIA labels and semantic HTML
Dark Mode: Always support dark mode with appropriate classes

Your UI component should now display beautifully formatted tool outputs in the AgentPress chat interface!