SlackStarJoin Cloud Waitlist
Visual builderStructured outputs

Create Rich UI Blocks with Data Components

Copy page

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.

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

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

Register it with the Inkeep chat component:

<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.

Project ManagementArtifact Components

On this page

What are Data Components?
How to create a data component
Example JSON Schema
Frontend Integration