Creative Tim UICreative Tim UI

Live AI agent activity feed with token and cost tracking - shadcn/ui

Real-time activity log showing agent events: task started, tool called, token consumed, message sent, error occurred. Each event has a timestamp, event type icon, description, and optional metadata (tokens, cost). Top header shows aggregate stats: total tokens, total cost, active tasks. Events auto-scroll. Tabs for All, Tasks, and Errors. Simulates new events every 2 seconds via useEffect interval.

Preview

Component Details

ID
ai-agent-activity-01
Type
Block
Access
Free
Category
AI Agents
Published
3 Apr 2026

Files Included

  • app/ai-agent-activity/page.tsx
  • components/creative-tim/blocks/ai-agent-activity-01.tsx

Components Used

Explore More Blocks

Team
TeamProfessional team member showcase components for React and Next.js. Build team pages, member profiles, organization charts, and employee directories with customizable layouts.
Pricing
PricingProfessional pricing and plan comparison components for React and Next.js. Build pricing tables, subscription plans, feature comparisons, and pricing toggles with monthly/annual options.
Newsletter
NewsletterModern newsletter subscription components for React and Next.js. Build email capture forms, subscribe popups, modals, and newsletter sections with validation and call-to-action elements.
Content
ContentVersatile content layout components for React and Next.js. Build blog posts, articles, portfolios, project showcases, comment sections, and rich content presentations with customizable designs.
User Profile
User ProfileProfessional user profile components for React and Next.js. Build user profile cards, account overviews, profile headers with statistics, social media links, and customizable layouts for displaying user information and achievements.
Logo
LogoProfessional brand logo showcase components for React and Next.js. Build trust sections, partner displays, client logos, and company ecosystem layouts with various styles and configurations.
Order
OrderProfessional order tracking and management components for React and Next.js. Build order details pages, tracking timelines, shipping status displays, order summaries, and delivery management interfaces with customizable layouts.
Billing
BillingProfessional billing and payment UI components for React and Next.js. Build payment forms, invoices, subscription management, and checkout flows with pre-built blocks.