Chat - Plan and task

Render a live, animated task list inside a tool call to surface multi-step agent progress in the conversation.

The demo below shows the agent plan animating through each step inside the conversation:

Rendering tasks inside a tool call

When a tool call named run_tasks arrives, the default JSON accordion is replaced by a collapsible task list. Each step animates through pending → running → done, and the list collapses automatically when all steps finish.

The whole UI is a plain React component—no dedicated package export required.

Providing a custom tool renderer

Supply a partRenderers map to ChatBox. Each key is a message part type, and the dynamic-tool key lets you intercept any tool call and render a custom UI:

const partRenderers: ChatPartRendererMap = {
  'dynamic-tool': ({ part }) => {
    if (part.toolInvocation.toolName !== 'run_tasks') {
      return null; // fall through to default for other tools
    }
    return <MyTaskList tasks={tasks} />;
  },
};

<ChatBox adapter={adapter} partRenderers={partRenderers} /* … */ />;

Animating steps from outside the renderer

The renderer is a plain function closed over component state, so you can drive it from any external source—a WebSocket, server-sent events, or a timer:

const [tasks, setTasks] = React.useState(initialTasks);

// partRenderers rebuilds when tasks change — ChatBox picks up the new renderer
const partRenderers = React.useMemo(
  () => ({
    'dynamic-tool': ({ part }) =>
      part.toolInvocation.toolName === 'run_tasks' ? (
        <MyTaskList tasks={tasks} />
      ) : null,
  }),
  [tasks],
);

Call setTasks with updated statuses from your stream handler, and the task list re-renders automatically inside the message.

API

• ChatRoot