Morpha UI

Plan

A collapsible plan card with a streamed title and steps.

Overview

Plan is a plan laid out as a Card you can collapse. While isStreaming, the title and description shimmer via the kit's .text-shimmer. The trigger toggles the body of steps; the Collapsible root renders as the Card.

Build the chat UI
Three steps to a streaming assistant on the kit.
  1. Ship the Cupido tokens
  2. Render replies with Response
  3. Drop in PromptInput
$ npx morpha-ui add plan

Installation

Distributed via the Morpha CLI: npx morpha-ui add plan. Ported from AI Elements onto the kit's Card + Collapsible.

npx morpha-ui add plan

API Reference

Prop

Type

Task

A collapsible agent task with steps and file chips.

Artifact

The side panel for a streamed document, code file, or preview.

On this page

OverviewInstallationAPI Reference