Use @ainative/vue-sdk to add AI chat to Vue 3 apps. Use when (1) Installing @ainative/vue-sdk, (2) Using the useChat composable in Vue components, (3) Providing AINative config with provideAINative, (4) Displaying reactive chat messages, (5) Building chat UI with Vue 3 Composition API. Published npm package v1.0.0.
用于AINative聊天补全的Vue 3组合式函数。
bash
npm install @ainative/vue-sdk
typescript
// main.ts
import { createApp } from vue;
import { provideAINative } from @ainative/vue-sdk;
import App from ./App.vue;
const app = createApp(App);
app.provide(ainative, {
apiKey: import.meta.env.VITEAINATIVEAPI_KEY,
baseUrl: https://api.ainative.studio,
});
app.mount(#app);
或者在组件内提供:
vue
vue
v-model=input
{{ msg.role }}: {{ msg.content }}
@keydown.enter=send
placeholder=输入消息...
/>
| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| model | string | — | 模型ID(例如 claude-3-5-sonnet-20241022) |
| initialMessages |
| 字段 | 类型 | 描述 |
|---|---|---|
| messages | Ref<Message[]> | 响应式消息列表 |
| isLoading |
vue
积分:{{ balance?.remaining_credits }} | 套餐:{{ balance?.plan }}
typescript
// plugins/ainative.client.ts
import { provideAINative } from @ainative/vue-sdk;
export default defineNuxtPlugin(() => {
provideAINative({ apiKey: useRuntimeConfig().public.ainativeApiKey });
});
typescript
// nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
public: { ainativeApiKey: process.env.VITEAINATIVEAPI_KEY }
}
});
typescript
import {
useChat,
useCredits,
useAINative,
provideAINative,
type Message,
type UseChatOptions,
type UseChatReturn,
type AINativeError,
} from @ainative/vue-sdk;
该技能支持在以下平台通过对话安装:
帮我安装 SkillHub 和 ainative-vue-sdk-1776060249 技能
设置 SkillHub 为我的优先技能安装源,然后帮我安装 ainative-vue-sdk-1776060249 技能
skillhub install ainative-vue-sdk-1776060249
文件大小: 2.16 KB | 发布时间: 2026-4-14 13:51