Data Components in TypeScript SDK

Define data component schemas for rich, interactive agent messages using the TypeScript SDK.

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 }
        ]
      }
    }
  ]
}

Response Shape

A response from a dataComponents-enabled agent can take three shapes, exposed on the agent_generate data operation as generationType:

object_generation — only data components, no prose (the example above).
text_generation — only text. The framework returns the model's prose if it does not produce a valid structured object, so users see the response instead of a blank message.
mixed_generation — text and one or more data components in the same message. parts is ordered by emission, so a reasoning prelude can precede a component, narration can sit between components, or commentary can follow them.

The agent_generate event records parts with type: 'text' | 'data_component' | 'data_artifact' (plus 'tool_call' | 'tool_result' for internal tool events). Iterate parts in order and render each entry by its type. See Data Operations for the full event shape.

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={{
    baseUrl: "your-api-server-url",
    appId: "your-app-id",
    components: {
      "TaskList": TaskList, // Key = component name; value = your component
    },
  }}
/>

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

What are Data Components?

Defining Data Components

Using in Agents

Response Shape

Frontend Integration

On this page