Components / AI Agents

AI Agent Card

A card displaying an AI agent's profile with capabilities, status indicator, and quick-action buttons.

Live Preview — ai-agent-card-01

Customer Support v2

Active & Learning

Success Rate

98.4%

Avg Latency

1.2s

+4 capabilities

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react lucide-react

Source Code

ai-agent-card-01.tsx 
"use client";

import React from "react";
import { Bot, Activity, ArrowRight, MessageSquare, Shield } from "lucide-react";

export default function AIAgentCard() {
    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-5 shadow-sm w-full max-w-sm mx-auto">
            <div className="flex items-start justify-between mb-6">
                <div className="flex items-center gap-3">
                    <div className="h-12 w-12 rounded-xl bg-violet-600 flex items-center justify-center shadow-lg shadow-violet-500/20">
                        <Bot className="h-6 w-6 text-white" />
                    </div>
                    <div>
                        <h3 className="font-bold text-zinc-900 dark:text-zinc-100 leading-tight">Customer Support v2</h3>
                        <div className="flex items-center gap-1.5 mt-1">
                            <span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
                            <span className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Active & Learning</span>
                        </div>
                    </div>
                </div>
                <button className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 transition-colors">
                    <Activity className="h-4 w-4" />
                </button>
            </div>

            <div className="grid grid-cols-2 gap-2 mb-6">
                <div className="p-2.5 rounded-lg bg-zinc-50 dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800/50">
                    <p className="text-[10px] text-zinc-500 uppercase font-black tracking-widest mb-1">Success Rate</p>
                    <p className="text-sm font-bold text-zinc-900 dark:text-zinc-100">98.4%</p>
                </div>
                <div className="p-2.5 rounded-lg bg-zinc-50 dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800/50">
                    <p className="text-[10px] text-zinc-500 uppercase font-black tracking-widest mb-1">Avg Latency</p>
                    <p className="text-sm font-bold text-zinc-900 dark:text-zinc-100">1.2s</p>
                </div>
            </div>

            <div className="flex items-center gap-2 mb-6">
                <div className="p-1.5 rounded bg-violet-50 dark:bg-violet-900/20 text-violet-600 dark:text-violet-400">
                    <MessageSquare className="h-3 w-3" />
                </div>
                <div className="p-1.5 rounded bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400">
                    <Shield className="h-3 w-3" />
                </div>
                <span className="text-[10px] text-zinc-400 font-medium ml-1">+4 capabilities</span>
            </div>

            <button className="w-full flex items-center justify-center gap-2 py-2.5 rounded-lg bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 text-xs font-bold hover:opacity-90 transition-all">
                Deploy to Production
                <ArrowRight className="h-3 w-3" />
            </button>
        </div>
    );
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
AIAgentCard() None

JSX Tags Usage

Every JSX/HTML tag used in this component, with usage count and source.

Tag Count Type Source
<Activity> 1× Library lucide-react
<ArrowRight> 1× Library lucide-react
<Bot> 1× Library lucide-react
<MessageSquare> 1× Library lucide-react
<Shield> 1× Library lucide-react
<button> 2× Native Native HTML
<div> 12× Native Native HTML
<h3> 1× Native Native HTML
<p> 4× Native Native HTML
<span> 3× Native Native HTML

Related Components

  • AI Agent Workflow — A step-by-step workflow visualization showing AI agent task execution with progress and status updates.
  • AI Tool Selector — A tool selection interface for configuring AI agent capabilities with toggle switches and descriptions.
  • AI Agent Execution Log — A detailed execution log showing AI agent reasoning steps, tool calls, and decision traces.
  • AI Agent Memory Panel — A memory management panel showing stored context, conversation history, and knowledge base entries.
  • AI Task Queue — A priority task queue showing pending, active, and completed AI agent tasks with progress indicators.
  • AI Function Call Display — A function call visualization showing AI-generated function invocations with parameters and return values.