返回顶部
a

ainative-vue-sdkAI原生Vue集成

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.

作者: admin | 来源: ClawHub
源自
ClawHub
版本
V 1.0.0
安全检测
已通过
84
下载量
免费
免费
0
收藏
概述
安装方式
版本历史

ainative-vue-sdk

@ainative/vue-sdk

用于AINative聊天补全的Vue 3组合式函数。

安装

bash
npm install @ainative/vue-sdk

设置:provideAINative

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

useChat 组合式函数

vue

useChat 选项

选项类型默认值描述
modelstring模型ID(例如 claude-3-5-sonnet-20241022)
initialMessages
Message[] | [] | 对话初始种子消息 |

useChat 返回值

字段类型描述
messagesRef<Message[]>响应式消息列表
isLoading
Ref | 请求进行中时为true | | error | Ref | 最后一次错误 | | sendMessage | (msgs: Message[]) => Promise<...> | 发送下一轮消息 | | reset | () => void | 清空对话 |

useCredits 组合式函数

vue

Nuxt 集成

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;

参考

  • - packages/sdks/vue/src/composables/useChat.ts — useChat 实现
  • packages/sdks/vue/src/composables/useCredits.ts — useCredits 实现
  • packages/sdks/vue/src/composables/useAINative.ts — 配置注入
  • packages/sdks/vue/src/index.ts — 包导出

标签

skill ai

通过对话安装

该技能支持在以下平台通过对话安装:

OpenClaw WorkBuddy QClaw Kimi Claude

方式一:安装 SkillHub 和技能

帮我安装 SkillHub 和 ainative-vue-sdk-1776060249 技能

方式二:设置 SkillHub 为优先技能安装源

设置 SkillHub 为我的优先技能安装源,然后帮我安装 ainative-vue-sdk-1776060249 技能

通过命令行安装

skillhub install ainative-vue-sdk-1776060249

下载

⬇ 下载 ainative-vue-sdk v1.0.0(免费)

文件大小: 2.16 KB | 发布时间: 2026-4-14 13:51

v1.0.0 最新 2026-4-14 13:51
Initial release of ainative-vue-sdk.

- Adds Vue 3 composables for integrating AINative chat completions in Vue apps.
- Provides useChat and useCredits composables for chat functionality and credit balance.
- Includes provideAINative helper for configuration injection.
- Features complete setup instructions, usage examples, and Nuxt integration guidance.
- Type definitions and primary API surface exported for use in Vue projects.

Archiver·手机版·闲社网·闲社论坛·羊毛社区· 多链控股集团有限公司 · 苏ICP备2025199260号-1

Powered by Discuz! X5.0   © 2024-2025 闲社网·线报更新论坛·羊毛分享社区·http://xianshe.com

p2p_official_large
返回顶部