AI Elements

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/app.vue and a title, description and image for the home page in app/pages/index.vue.

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 UiTrace with a UiTraceCollapsible 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.

Usage

<template>
  <UiTrace>
    <UiTraceCollapsible default-open :unmount-on-hide="false">
      <UiTraceCollapsibleTrigger>
        <UiTraceLine>
          <UiTraceTitle>Found the project files</UiTraceTitle>
        </UiTraceLine>
      </UiTraceCollapsibleTrigger>
      <UiTraceCollapsibleContent>
        <UiTrace>
          <UiTraceLine>
            <UiTraceIcon>
              <UiIcon name="lucide:search" />
            </UiTraceIcon>
            <UiTraceTitle>Searched for app/pages/index.vue</UiTraceTitle>
          </UiTraceLine>
          <a href="/files/app/pages/index.vue">
            <UiTraceLine>
              <UiTraceIcon>
                <UiIcon name="lucide:file-text" />
              </UiTraceIcon>
              <UiTraceTitle>Read app/pages/index.vue</UiTraceTitle>
            </UiTraceLine>
          </a>
        </UiTrace>
      </UiTraceCollapsibleContent>
    </UiTraceCollapsible>
  </UiTrace>
</template>

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

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

API Reference

See Trace.

Suggestion

A short prompt you can send to the agent in one click.

Terminal

Displays a command the agent runs, with its output as it streams.