Agent Card

Last updated

2026-10-15 UTC

Demo

agent-card/demo.vue

el-bot

Local AI assistant

Ready

Current task

Awaiting approval

task-20261006-001

Review the requested action before continuing.

<script setup lang="ts">
import { shallowRef } from 'vue'

const continued = shallowRef(false)
</script>

<template>
  <YlfAgentCard name="el-bot" description="Local AI assistant" state="ready" status-label="Ready">
    <YlfAgentTask title="Current task" :state="continued ? 'working' : 'waiting'" :status-label="continued ? 'Running' : 'Awaiting approval'" task-id="task-20261006-001" description="Review the requested action before continuing.">
      <template #actions>
        <YlfButton :disabled="continued" @click="continued = true">
          Continue
        </YlfButton>
      </template>
    </YlfAgentTask>
  </YlfAgentCard>
</template>

An overview container for agent identity, description, state, connection information and actions. Surfaces, typography and spacing use shared tokens. Information cards stay still rather than lifting on hover.

Props

Property	Description	Type	Default
name	Agent name and accessible region name	string	Required
description	Purpose or current project	string	—
state	Presentation state	YlfAgentState	Required
statusLabel	Localized status text	string	Required

Slots

Name	Description
avatar	Custom identity image; the default is decorative
default	Application content such as connections
actions	Buttons; the application owns permissions, disabled states and events

The component does not receive credentials, connect services, store approvals or execute actions. Names and descriptions render as escaped text. See agent components.