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

Request/Response Interceptor Props

Property Name	Description	Type	Default
timeout	Request timeout (ms)	number	30000
withCredentials	Allow credentials	boolean	false
mode	Request mode	'cors' | 'no-cors' | 'same-origin'	'cors'
cache	Cache mode	RequestCache	See below

Methods

Method Name	Description	Parameters	Returns
addRequestInterceptor	Add request interceptor	(interceptor: AiRequestInterceptor) => number	Interceptor ID
addResponseInterceptor	Add response interceptor	(interceptor: AiResponseInterceptor) => number	Interceptor ID
removeRequestInterceptor	Remove request interceptor	(id: number) => void	—
removeResponseInterceptor	Remove response interceptor	(id: number) => void	—
clearInterceptors	Clear all interceptors	() => void	—

Interceptor Usage Examples

Basic Interceptor

💡 Interceptors enhanced: Click send to see real-time interceptor feedback in the chat window and console.

Interceptor Example 1: Basic Request/Response Interception

Add Request/Response Interceptors

Request Interceptor - Add Token

🔑 Interceptors will auto-inject token and show feedback (check console).

Interceptor Example 2: Request Interceptor - Auto Auth Token

Request Interceptor - Auto Add Token

Response Interceptor - Error Handling

🚨 Unified exception capture demo

Interceptor Example 3: Response Interceptor - Unified Error Handling

Response Interceptor - Unified Error Handling

Logging Interceptor

⏳ Real-time request duration logging feedback (check console)

Interceptor Example 4: Logging Interceptor

Logging Interceptor

Type Definitions

import type { AiRequestConfig, AiResponse } from '@yh-ui/components'

// Request Interceptor
interface AiRequestInterceptor {
  onRequest?: (config: AiRequestConfig) => AiRequestConfig | void | Promise<AiRequestConfig | void>
  onRequestError?: (error: Error) => void
}

// Response Interceptor
interface AiResponseInterceptor {
  onResponse?: (response: Response) => Response | void | Promise<Response | void>
  onResponseError?: (error: Error) => void
}

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.