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.

Creating Data Components

You can create data components by adding them to your agent configuration.

const taskAgent = agent({
  id: "task-agent",
  name: "Task Agent",
  description: "Manages user tasks",
  prompt: "Provide helpful answers and use data components when appropriate.",
  dataComponents: [
    {
      id: "task-list",
      name: "TaskList",
      description: "Display user tasks with status",
      props: {
        type: "object",
        properties: {
          tasks: {
            type: "array",
            items: {
              type: "object",
              properties: {
                id: { type: "string" },
                title: { type: "string" },
                completed: { type: "boolean" },
              },
            },
          },
        },
        required: ["tasks"], // This tells the agent to include the tasks array in the response
      },
    },
  ],
});

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

Basic Setup

First, create your React component:

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

Then register it with your Inkeep chat component:

<InkeepSidebarChat
  aiChatSettings={{
    graphUrl: "your-graph-url",
    components: {
      TaskList, // The component name must match the data component name
    },
  }}
/>

Now when you ask the agent to show you your tasks, it will return a properly formatted task list component.

Data Components

What are Data Components?

Creating Data Components

Frontend Integration

Basic Setup

On this page