AiProvider Global Config

AiProvider is the core configuration component of the AI component library, used to inject global settings at the top level of the application. It uses Vue's provide/inject mechanism to provide essential configurations such as base API URLs, authentication info, avatars, and typewriter effects to all downstream AI components (e.g., AiChat, AiBubble).

Basic Usage

It is recommended to wrap AiProvider at the root component of your application or at the outer-most level of an AI feature module.

Hello! I am the assistant configured by AiProvider.

Basic Usage

Global Identity Configuration

You can centrally set user and assistant avatars and names using AiProvider.

Who is configuring me?

It’s me, your global assistant.

Global Identity Configuration

API

Props

Name	Description	Type	Default
base-url	Global AI base URL	string	-
token	Authentication Token (Bearer)	string	-
headers	Global request headers	Record<string, string>	-
user-avatar	User avatar URL	string	-
assistant-avatar	Assistant avatar URL	string	-
user-name	User display name	string	-
assistant-name	Assistant display name	string	-
system-prompt	Global system prompt	string	-
typewriter	Typewriter effect configuration	object	{ enabled: true, charsPerFrame: 2 }

typewriter property definition

Name	Description	Type	Default
enabled	Whether to enable typewriter effect	boolean	true
chars_per_frame	Characters per frame to render	number	2

Slots

Name	Description
default	Downstream component content for configuration injection

Recommendations

• Vite/Nuxt Projects: Typically used once in App.vue or layouts/default.vue.
• Scope Isolation: If your application has multiple distinct AI modules (e.g., a support bot and a code assistant), you can wrap them in separate AiProvider instances for isolation.