Copy, paste, own the code. Six production-ready primitives for progress tracking, tool call streams, human-in-the-loop approval, plan visualization, token metering, and trace debugging — all wired to AG-UI out of the box.
Multi-step tracker for long-running agent tasks. Live duration tickers, ETA, failure and skip states.
Live demo →Collapsible card with tool name, params, and streamed output. Handles code diffs, JSON, and markdown.
Live demo →users where inactive > 90dInterrupt-driven modal that blocks the agent until a human approves, edits, or rejects the proposed action.
Live demo →Hierarchical tree of the agent's execution plan. Streams live as nodes are added during reasoning.
Live demo →Running token count and cost tracker. Budget cap with green/amber/red/locked states per provider.
Live demo →Step-by-step execution trace with timestamps, token counts, and collapsible decision tree for debugging.
Live demo →Hand-rolled progress UIs either spin indefinitely or jump from 10% to 100%. ProgressTracker streams real step completions with live duration tickers — so the bar actually reflects what the agent is doing.
Most agents skip human-in-the-loop entirely because building the modal is painful. HumanApprovalModal handles the interrupt, the diff preview, the keyboard shortcuts, and the AG-UI event wiring — in one copy-paste.
When an agent does something unexpected, you need to see every LLM call, every tool invocation, every token — in order, with timestamps. TraceViewer surfaces that without you writing a single log formatter.
No npm dependency that breaks on a major version. No proprietary API. You copy the JSX into your project, modify it freely, and ship it. Modeled exactly on the shadcn/ui philosophy — because it's the right one.
AG-UI is an open protocol for streaming agent state — think of it as SSE with a typed event schema. If your backend emits AG-UI events, TaskFrame components wire up automatically. No adapter needed.
Already used by LangGraph, CrewAI, Mastra, Pydantic AI, and anything else that speaks the protocol. The event stream is framework-agnostic — if your agent backend can emit JSON over SSE, it works.
No npm dependency. No version lock. Download the JSX you need, drop it in your components/ folder, and ship. That's the shadcn/ui philosophy — and it's the right one for agent UIs.
Works with Next.js, Vite, Remix, or any React project. Tested with TypeScript. AG-UI event wiring means it plugs into your existing agent backend without glue code.
# 1. Download the component into your project curl -O https://taskframe.polsia.app/ProgressTracker.jsx mv ProgressTracker.jsx src/components/ # 2. Install peer dep (if not already installed) npm install react # 3. Import in your page import ProgressTracker from './components/ProgressTracker'
Open source. AG-UI native. Six copy-paste components for every state your agent will ever be in.