pro187 lines · framer-motion

Agent Chat

Streaming replies with the tool calls left in. A chat panel where the agent's tool calls show inline as dashed chips before the streamed answer. Ships with a scripted demo; plug your stream into `onSend`.

Use it for: Copilots, support agents, internal assistants.
Themes: Light + dark
License: Commercial use (draft)

Live

Ask the agent something. It will show the tools it uses.

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

export type ChatPart =
  | { type: "text"; text: string }
  | { type: "tool"; name: string; args: string; result?: string; status: "running" | "done" };

export interface ChatMessage {
  id: string;
  role: "user" | "assistant";
  parts: ChatPart[];
}

export interface AgentChatProps {
  /** Supply your own stream handler. Default is a scripted demo. */
  onSend?: (text: string) => void;
  messages?: ChatMessage[];
  /** Characters per tick for the demo stream. */
  speed?: number;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→User bubbles right (primary), agent bubbles left (muted) under a small agent label.
→Tool calls render as dashed monospace chips: pulsing blue dot while running, green when done, with the result after an arrow.
→Answer text streams in with a blinking signal-coloured caret.
→Log auto-scrolls to the newest message.

Accessibility

✓Message list is role=log, aria-live=polite.
✓Input has a visually hidden label.
✓Honours prefers-reduced-motion.