AI Agent Profile Card

A static profile card for an AI assistant or agent: avatar with initials fallback, name, role, description, capability badges, a small 3-message sample conversation preview, a stats row (conversations handled, rating), and Chat now / View details action links.

By Staaarter Team

Chat

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials, badge, button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/ai-agent-profile-card.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/chat/chat9.tsx instead.

Usage

The file also exports chat9Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Chat9, chat9Demo } from "@/components/blocks/chat/chat9";

export default function Page() {
  return <Chat9 {...chat9Demo} />;
}

Props

Prop	Type	Default	Description
name	string	none	Agent's display name.
role	string	none	Short role label shown under the name.
description	string	none	One or two sentence description of what the agent does.
avatar	{ src: string; alt: string }	undefined	Optional avatar image; falls back to initials when omitted.
capabilities	string[]	none	Capability badges rendered under the description.
sampleConversation	AgentConversationMessage[]	none	2-3 static messages shown as a sample chat preview.
stats	AgentStat[]	none	Stat tiles shown in the row above the action buttons.
chatHref	string	"#"	Link target for the "Chat now" button.
detailsHref	string	"#"	Link target for the "View details" button.
className	string	none	Extra classes for the outer section element.

Types

export interface AgentConversationMessage {
  id: string;
  from: "user" | "agent";
  text: string;
}

export interface AgentStat {
  label: string;
  value: string;
}

Behavior notes

Fully static Server Component: the sample conversation is a hardcoded preview, not a live or interactive chat.
"Chat now" and "View details" are plain links (render={<Link .../>}) with placeholder hrefs, nothing is submitted or called.
The avatar defaults to an initials fallback rather than a stock photo since it represents an AI persona, not a real person.

More Chat Blocks

View all →

rich-prompt-input-with-suggestions

Rich Prompt Input with Smart Suggestions

An AI prompt composer with attachment icons, a model selector, and a grid of clickable prompt suggestion cards.

ai-streaming-response-typewriter

AI Streaming Response with Live Typing

A single AI chat exchange with a skeleton loading state, a word-by-word typewriter reveal, and a stop-generating control.

ai-response-with-cited-sources

AI Response with Cited Sources

A Perplexity-style answer with inline numbered citation markers and an expandable source list below it.

code-generation-chat-with-syntax-highlighting

Code Generation Chat with Syntax Highlighting

A developer chat message with a file-name tab bar, a language badge, illustrative syntax coloring, and a real copy button.

prompt-starter-grid

AI Prompt Starter Grid

A tabbed grid of prompt template cards, filterable by category, each with an icon, title, and description.

floating-chat-widget

Floating Chat Widget with Expandable Window

A corner chat bubble with a pulsing notification dot that expands into a mini chat window.