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.

Model Recommendations

How to create a data component

1. Go to the Data Components tab in the left sidebar. Then select "New data component".
2. Add in an id, name, and description. These are required fields.
3. Enter a JSON schema defining the structure of your data component.
4. Click "Submit".

To visually add the data component to the Agent, see the Sub Agents page for details.

Example JSON Schema

{
  "type": "object",
  "properties": {
    "tasks": {
      "type": "array",
      "description": "Array of user tasks",
      "items": {
        "type": "object",
        "properties": {
          "id": { "type": "string", "description": "Task ID" },
          "title": { "type": "string", "description": "Task title" },
          "completed": { "type": "boolean", "description": "Task status" }
        }
      }
    },
    "totalCount": { "type": "number", "description": "Total tasks" }
  }
}

Frontend Integration

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

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

If you have generated component UI (render code) for this data component in the dashboard, you can add the component file to your app instead via the CLI:

inkeep add --ui <component-id>

The CLI writes the component to apps/agents-ui/src/ui (or your project’s equivalent).

Register the component with the chat widget. The key in components must be the component name as shown in the dashboard (exact string), and the value is your imported React component:

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

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

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