闲社服务运行正常AI智能体自动化平台
a

Svelte AI聊天SDK

技能标识:ainative-svelte-sdk

Use @ainative/svelte-sdk to add AI chat to Svelte/SvelteKit apps. Use when (1) Installing @ainative/svelte-sdk, (2) Using Svelte stores for chat state, (3) Configuring AINative in a Svelte app, (4) Displaying chat messages reactively, (5) Handling loading and error states with Svelte stores. Published npm package v1.0.0.

作者:admin | 来源记录:ClawHub
登记来源
ClawHub
版本
V 1.0.0
检测标记
后台标记通过
免费
免费获取
0
收藏
来源与检测标记为平台登记信息,并不代表已展示可复核的检测报告。使用前请核对版本、依赖和所需权限,建议先在隔离环境中运行。
概述
安装方式
版本历史

Svelte AI聊天SDK

@ainative/svelte-sdk

用于AINative聊天补全的Svelte存储和工具。

安装

bash
npm install @ainative/svelte-sdk

配置

typescript
// src/lib/ainative.ts
import { setAINativeConfig } from @ainative/svelte-sdk;

setAINativeConfig({
apiKey: import.meta.env.VITEAINATIVEAPI_KEY,
baseUrl: https://api.ainative.studio,
});

在应用根目录(+layout.svelte 或 App.svelte)中调用一次。

createChatStore

svelte

{#each $chat.messages as msg}


{msg.role}: {msg.content}

{/each}

{#if $chat.isLoading}

思考中...


{/if}

{#if $chat.error}

错误: {$chat.error.message}


{/if}

e.key === Enter && send()} />

存储结构

$chat 是一个响应式存储,具有以下结构:

字段类型描述
messagesMessage[]完整对话历史
isLoading
boolean | 请求进行中时为 true |
| error | AINativeError \| null | 最后一次错误 |

createChatStore 选项

选项类型默认值描述
modelstring—模型 ID
initialMessages
Message[] | [] | 初始对话 |

SvelteKit — 服务器路由

对于服务器端调用,直接使用原始 API(不暴露浏览器认证信息):

typescript
// src/routes/api/chat/+server.ts
import { AINATIVEAPIKEY } from $env/static/private;
import type { RequestHandler } from ./$types;

export const POST: RequestHandler = async ({ request }) => {
const { messages } = await request.json();

const resp = await fetch(https://api.ainative.studio/v1/public/chat/completions, {
method: POST,
headers: {
X-API-Key: AINATIVEAPIKEY,
Content-Type: application/json,
},
body: JSON.stringify({
model: claude-3-5-sonnet-20241022,
messages,
}),
});

return new Response(resp.body, {
headers: { Content-Type: application/json },
});
};

环境变量

bash

.env


VITEAINATIVEAPIKEY=akyour_key # 客户端安全(仅公钥)
AINATIVEAPIKEY=akyourkey # 服务器端(SvelteKit $env/static/private)

生产环境请使用服务器路由 — 切勿在客户端包中暴露 API 密钥。

导出

typescript
import {
createChatStore,
setAINativeConfig,
ainativeConfig,
type Message,
type ChatState,
type AINativeError,
} from @ainative/svelte-sdk;

参考

  • - packages/sdks/svelte/src/stores/chat.ts — 聊天存储实现
  • packages/sdks/svelte/src/stores/config.ts — 配置存储
  • packages/sdks/svelte/src/index.ts — 包导出

标签

skill ai

通过对话安装

以下为平台配置的接入选项,并非逐项实测通过。能否安装取决于客户端支持、技能来源和运行环境:

OpenClaw WorkBuddy QClaw Kimi Claude

方式一:安装 SkillHub 和技能

帮我安装 SkillHub 和 ainative-svelte-sdk-1776060301 技能

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

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

通过命令行安装

skillhub install ainative-svelte-sdk-1776060301

下载

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

文件大小: 2.22 KB | 发布时间: 2026-4-14 10:42

v1.0.0 最新 2026-4-14 10:42
ainative-svelte-sdk v1.0.0 initial release

- Adds Svelte store utilities for integrating AINative chat into Svelte/SvelteKit apps.
- Provides createChatStore for reactive chat state, handling messages, loading, and errors.
- Includes setAINativeConfig for global API setup.
- Documents recommended setup for both client and secure server-side usage.
- Type exports for Message, ChatState, and AINativeError.
返回顶部