AiAgentCard

Basic Usage

Display agent name, model, description, capability tags and statistics with click/use/favorite interactions.

Layout Variants

Supports vertical (default), horizontal, and compact layouts.

Skeleton Loading

Use :loading="true" to show the skeleton screen.

API

Props

Prop	Type	Default	Description
data	AgentData	required	Agent data object
layout	'vertical' | 'horizontal' | 'compact'	'vertical'	Card layout direction
showActions	boolean	true	Show action buttons
showStats	boolean	true	Show statistics
favoritable	boolean	true	Enable favorite
selected	boolean	false	Selected state (highlighted border)
loading	boolean	false	Skeleton loading state
themeOverrides	ComponentThemeVars	-	Theme override variables

AgentData

Field	Type	Description
id	string	Unique identifier
name	string	Agent name
avatar	string	Avatar URL or icon name
model	string	Model name
description	string	Description text
capabilities	AgentCapability[]	Capability tag list
stats	AgentStats	Statistics (usage, rating, etc.)
verified	boolean	Official verified badge
status	'online' | 'offline' | 'busy'	Online status
favorited	boolean	Initial favorite state

Events

Event	Args	Description
click	(data: AgentData)	Card clicked
use	(data: AgentData)	Use button clicked
favorite	(data: AgentData, favorited: boolean)	Favorite toggled
share	(data: AgentData)	Share clicked

Slots

Slot	Description
avatar	Custom avatar content
actions	Custom action button area (scoped: { data, use })
default	Extra content at card bottom (scoped: { data })

Theme Variables

Variable	Description
--yh-ai-agent-card-bg	Card background color
--yh-ai-agent-card-border-color	Card border color
--yh-ai-agent-card-avatar-size	Avatar area size

Usage in Nuxt

<!-- pages/agents.vue -->
<script setup lang="ts">
const { data: agents } = await useFetch('/api/agents')
</script>

<template>
  <div class="agent-grid">
    <YhAiAgentCard
      v-for="agent in agents"
      :key="agent.id"
      :data="agent"
      @use="navigateTo(`/chat?agentId=${agent.id}`)"
    />
  </div>
</template>

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@yh-ui/nuxt']
  // YH-UI CSS is injected by default; only configure yhUI.importStyle when disabling auto styles
})