2 variants

Agent Thread

An AI chat that streams word by word, shows its tool calls, asks before it acts, and cites its sources. As a full page or a docked copilot.

Full page

The chat on its own. The thread follows each reply unless you scroll up, with approvals, sources, copy, feedback and the composer.

You: How do I collapse a section without it jumping?
Agent:
Animate the row track, not the height. A grid going from 0fr to 1fr collapses without measuring anything 1, and it stays smooth on a phone.
Keep it near 200ms, and skip it when someone asks for less motion 2.
1. 1web.dev
2. 2MDN

Claude

Enter to send, Shift + Enter for a new line

page.tsx

import { AgentThread } from "@/components/blocks/agent-thread";

// Map your chat state (the AI SDK's useChat, or your own) onto messages and busy.
export default function Page() {
  const { messages, busy, send, stop, approve } = useAgent();
  return <AgentThread messages={messages} busy={busy} onSubmit={send} onStop={stop} onApprove={approve} />;
}

"use client";

import { ThreadView, type ThreadViewProps } from "@/components/blocks/agent-thread-kit";
import { cn } from "@/lib/utils";

export type AgentThreadProps = ThreadViewProps;

/** A full chat: the thread and the composer under it, nothing else. */
export function AgentThread({ className, ...thread }: AgentThreadProps) {
  return (
    <section className={cn("w-full px-4 py-16 sm:px-6", className)}>
      <div className="mx-auto flex h-[40rem] max-w-3xl flex-col overflow-hidden rounded-3xl bg-background shadow-[0_0_0_1px_var(--border)]">

6 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/agent-thread

Docked panel

A copilot beside your app that names what it is looking at, with the same thread, approvals and composer in a narrow panel.

page.tsx

import { AgentPanel } from "@/components/blocks/agent-panel";

export function Copilot({ invoice }) {
  const { messages, busy, send, stop, approve } = useAgent({ context: invoice });
  return (
    <AgentPanel
      context={"Invoice " + invoice.number}
      messages={messages}
      busy={busy}
      onSubmit={send}
      onStop={stop}
      onApprove={approve}
    />
  );
}

"use client";

import { X } from "lucide-react";
import { ThreadView, type ThreadViewProps } from "@/components/blocks/agent-thread-kit";
import { ThinkingOrb } from "@/components/registry/thinking-orb";
import { cn } from "@/lib/utils";

export interface AgentPanelProps extends ThreadViewProps {
  title?: string;
  /** What the agent can see right now: "Invoice INV-0148". */
  context?: string;
  onClose?: () => void;

38 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/agent-panel