AiPrompts

AiPrompts provides elegant cards or list layouts for suggestions and quick actions.

Basic Usage

Horizontal prompt cards.

💡 Suggestions

Write a Vue 3 componentComposition API component

How to implement debounce?Functional programming patterns

Explain RAG to mePrinciples of Augmented Generation

Basic Usage

Vertical Layout

Vertical layout is recommended when space is limited.

🚀 Quick Actions

Reset ConversationClear history and start over

Export ChatGenerate Markdown and download

Vertical Layout

Custom Theme

Use theme-overrides to personalize component styles.

🎨 Custom Theme

Custom Blue ThemeApplied via themeOverrides

Custom Theme

API

Props

Name	Description	Type	Default
items	Prompt data list	(AiPromptItem | string)[]	[]
layout	Layout mode: horizontal vertical waterfall	string	'horizontal'
title	Top header text	string	''
theme-overrides	Theme variables override	AiPromptsThemeVars	—

Events

Name	Description	Callback Parameters
click	Emitted when item is clicked	(item: AiPromptItem | string) => void

Slots

Name	Description	Slot Scope
title	Custom title area	—
item	Custom item rendering	{ item: AiPromptItem | string, index: number }
icon	Custom internal icon	{ icon: string }

Use in Nuxt

This component fully supports Nuxt 3/4. In Nuxt projects, the component will be automatically imported.

For detailed configuration, please see Nuxt Integration.

Theme Variables

Variable Name	Description	Default Value
--yh-ai-prompts-bg-color	Container background color	var(--yh-bg-color)
--yh-ai-prompts-border-color	Border color	var(--yh-border-color)
--yh-ai-prompts-border-radius	Border radius	var(--yh-border-radius-base)
--yh-ai-prompts-header-font-size	Header font size	14px
--yh-ai-prompts-item-min-height	Item minimum height	48px
--yh-ai-prompts-active-border-color	Active/hover border color	var(--yh-color-primary)
--yh-ai-prompts-item-hover-bg-color	Item hover background color	var(--yh-color-primary-light-9)
--yh-ai-prompts-hover-text-color	Item hover text color	var(--yh-color-primary)
--yh-ai-prompts-icon-size	Icon size	20px
--yh-ai-prompts-icon-color	Icon color	var(--yh-color-primary)