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.

Model Recommendations

Warning

Data components require high-capability models for best results.

Configure the structured output model in your agent settings with one of these recommended models:

Provider	Recommended Models
Anthropic	`claude-sonnet-4+`, `claude-opus-4+`
OpenAI	`gpt-4.1`, `gpt-5.1`, `gpt-5.2`
Google	`gemini-3.0-pro`

Not recommended: Lower-tier models (gpt-4.1-mini, gpt-4.1-nano, gemini-2.5-flash, gemini-2.5-flash-lite), or custom models.

Data components use structured output generation, which requires frontier-level reasoning capabilities.

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.