Marketing Agent Run Demo
Marketing or landing page section showing an AI agent run step by step with tool calls and a final result.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this block
What it's for
- Marketing or landing page section showing an AI agent run step by step with tool calls and a final result.
- Marketing demo of an agent run trace with play, pause and replay for an agent platform.
- Explain how our AI agents plan, call tools and wait for approval on the product page.
For inspecting real runs inside the product, use AI Agent Run Trace.
Includes
- Ai agent showcase
- Marketing demo
- Run trace replay
- Step by step
- Tool call steps
- Step timings
- Play pause
- Progress bar
Works with
- Radix UI and Base UI primitives (pick the one your project uses)
- React 19 and Tailwind CSS 4 in Next.js (App Router), Vite, React Router or TanStack Start, installed with the agentic-ui or shadcn CLI
- Your theme tokens, in light and dark mode
Install
Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.
agentic-ui add marketing-agent-run-demonpx shadcn@4.17.0 add @agentic-ui/marketing-agent-run-demoUsed in
A standalone component: drop it into any screen.
- Type
- Block
- Variants
- Radix UI and Base UI
- Themes
- Light and dark
- Widths
- Preview it at desktop, tablet and mobile widths above.
- npm packages
lucide-react- Registry dependencies
lib-primitivesmotion-ai-thinking-orb- Files
2 files
- components/agentic-ui/marketing-agent-run-demo/marketing-agent-run-demo/marketing-agent-run-demo.tsx
- components/agentic-ui/marketing-agent-run-demo/marketing-agent-run-demo/run-model.ts
Related components
Marketing 404
404 not found page with search, back to home button and suggested links.
Details and live previewMarketing About Timeline
About us page with mission statement and company history timeline of milestones by year.
Details and live previewMarketing Announcement Bar
Announcement bar at the top of a landing page linking to a new feature or launch.
Details and live previewMarketing API Showcase
API section of a developer marketing page with endpoints, curl and SDK examples and a sample JSON response.
Details and live preview