Create Rich UI Blocks with Data Components

Learn how to create and use data components for rich, interactive Agent messages.

What are Data Components?

Data Components allow your agents to return rich, interactive content instead of just text. Think of them as reusable UI building blocks that your agent can populate with data.

For example, instead of returning "You have 3 tasks: Task #123 (shipped), Task #124 (processing)...", your agent can return a properly formatted task list component.

Defining Data Components

Data components are defined using the dataComponent builder function. We recommend using Zod schemas for type safety and better developer experience.

import { dataComponent } from '@inkeep/agents-sdk';
import { z } from 'zod';

export const taskList = dataComponent({
  id: "task-list",
  name: "TaskList",
  description: "Display user tasks with status",
  props: z.object({
    tasks: z
      .array(
        z.object({
          id: z.string().describe("Unique task identifier"),
          title: z.string().describe("Task title"),
          completed: z.boolean().describe("Whether the task is completed"),
          priority: z.enum(["low", "medium", "high"]).describe("Task priority"),
        })
      )
      .describe("Array of user tasks"),
    totalCount: z.number().describe("Total number of tasks"),
    completedCount: z.number().describe("Number of completed tasks"),
  }),
});

JSON Schema is also supported if you prefer traditional schema definitions.

Using in Agents

import { agent } from '@inkeep/agents-sdk';
import { taskList } from './data-components/task-list';

const taskAgent = agent({
  id: "task-agent",
  name: "Task Agent",
  prompt: "Provide helpful answers and use data components when appropriate.",
  dataComponents: () => [taskList],
});

When a user asks "Show me my tasks", the agent will respond with:

{
  "dataComponents": [
    {
      "id": "task-list",
      "name": "TaskList",
      "props": {
        "tasks": [
          { "id": "1", "title": "Review documentation", "completed": false },
          { "id": "2", "title": "Update website", "completed": true }
        ]
      }
    }
  ]
}

Frontend Integration

Create a React component that receives the props defined by your data component schema:

const TaskList = ({ tasks, totalCount, completedCount }) => (
  <div className="task-list">
    <h3>Your Tasks ({completedCount}/{totalCount} completed)</h3>
    {tasks.map((task) => (
      <div key={task.id} className={task.completed ? "completed" : ""}>
        {task.title}
      </div>
    ))}
  </div>
);

import { TaskList } from './ui/TaskList';

<InkeepSidebarChat
  aiChatSettings={{
    agentUrl: "your-agent-url",
    components: {
      "TaskList": TaskList, // Key = component name; value = your component
    },
  }}
/>

The agent will automatically return structured data that renders as your React component.

Create Rich UI Blocks with Data Components

What are Data Components?

Defining Data Components

Using in Agents

Frontend Integration

On this page