Create Rich UI Blocks with Data Components

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 matching your data component name:

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>
);

<InkeepSidebarChat
  aiChatSettings={{
    agentUrl: "your-agent-url",
    components: {
      TaskList, // Component name must match data component name
    },
  }}
/>

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