Task

Displays the steps the agent takes, as it takes them.

Add Open Graph metadata to the home page.

Added Open Graph defaults to app/layout.tsx and a title, description and image for the home page in app/page.tsx.

"use client"

import * as React from "react"

Task is a piece of work the agent is doing, such as finding the project files or updating a page. Each step, like a search, a read or an edit, appears under the task when the agent takes it.

Task is built with Trace with a TraceCollapsible for each task.

Task or Plan

Both are a list of steps under a collapsible line. The difference is when the steps are known.

Use Plan when the agent decides the steps before it starts. Use Task when the steps come from the work itself, and the agent only knows the next one once it has taken the last.

	Plan	Task
Steps	Every step, from the start	Each step, once the agent takes it
Pending steps	Yes, waiting their turn	None
Title	The goal, with progress: "2 of 4 done"	What the agent is doing, then what it did
Per reply	One plan	One or more tasks, each closing when it is done

Installation

Task is built with the Trace component.


pnpm dlx shadcn@latest add trace

Usage

import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from "@/components/ui/trace"

<Trace>
  <TraceCollapsible defaultExpanded>
    <TraceCollapsibleTrigger>
      <TraceLine>
        <TraceTitle>Found the project files</TraceTitle>
      </TraceLine>
    </TraceCollapsibleTrigger>
    <TraceCollapsibleContent>
      <Trace>
        <TraceLine>
          <TraceIcon>
            <SearchIcon />
          </TraceIcon>
          <TraceTitle>Searched for app/page.tsx</TraceTitle>
        </TraceLine>
        <a href="/files/app/page.tsx">
          <TraceLine>
            <TraceIcon>
              <FileTextIcon />
            </TraceIcon>
            <TraceTitle>Read app/page.tsx</TraceTitle>
          </TraceLine>
        </a>
      </Trace>
    </TraceCollapsibleContent>
  </TraceCollapsible>
</Trace>

Status

Set the task's status from its steps. Write the title in the present tense while the task runs, and in the past tense once it is done.

Steps	`status`	Title
A step is still running	`"running"`	Updating the page metadata
A step failed	`"error"`	Failed to update the page metadata
Every step is done	none	Updated the page metadata

Put several tasks in one Trace. Keep the running task open, and close each task once it is done.

AI SDK

Stream each task as a data part with its own id. The AI SDK replaces a data part with the same id, so writing a task again with a new step updates it in place.

app/api/chat/route.ts

const stream = createUIMessageStream({
  execute: async ({ writer }) => {
    writer.write({ type: "data-task", id: "update", data: { title, steps } })
  },
})

const tasks = message.parts.filter((part) => part.type === "data-task")

Migrating from AI SDK Elements

If you added Task from AI SDK Elements, your project has a components/ai-elements/task.tsx wrapper. Paste this prompt into your coding agent to rebuild it on Trace. Every export keeps its name and props, so the code that uses it keeps working.

Prompt

Migrate components/ai-elements/task.tsx from AI SDK Elements to the shadcn/ui Trace component.
 
Keep every export, with the same name and props, so the code that imports it keeps working. Only change how each part renders.
 
1. Install Trace: npx shadcn@latest add trace
2. Read https://ui.shadcn.com/docs/ai-elements/aria/task.md and build Task the same way.
3. Rebuild each part:
   - Task renders a Trace with a TraceCollapsible.
   - TaskTrigger renders a TraceCollapsibleTrigger with a TraceLine and a TraceTitle with title.
   - TaskContent renders a TraceCollapsibleContent with a Trace for the steps.
   - TaskItem renders a TraceLine with a TraceTitle.
   - Keep TaskItemFile as it is.
4. Remove the imports the file no longer uses.
5. Run the type checker and fix any errors.