Avatar Profile

Shows a box with user avatar, name and description. It can be used directly or by parsing an agent source string.

avatarprofileuseragentdisplay

v0.100.1

Promptbook Team

Live Preview

Features

✓Displays agent's avatar, name, title, and description
✓Can parse agent information from a string source
✓Responsive design
✓Customizable with CSS classes

Usage Examples

Basic Usage with Source

import { book } from '@promptbook/utils';
import { AvatarProfileFromSource } from '@promptbook/components';

<AvatarProfileFromSource
  agentSource={book`

      AI Avatar

      PERSONA A friendly AI assistant that helps you with your tasks

  `}
/>

Quick Actions

Download Component

Technical Details

Dependencies

react: ^18.0.0 || ^19.0.0

@promptbook/components: 0.100.1

Props

agent

AgentBasicInformation & { agentTitle?: string; agentDescription?: string }

The agent object to display. Used in `AvatarProfile`.

agentSource

string_book

The agent source string to parse and display. Used in `AvatarProfileFromSource`.

className

string

Additional CSS classes to apply to the root element.

Default: ""