Ainative Svelte Sdk — 技能工具
v1.0.0Use @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) C...
详细分析 ▾
运行时依赖
版本
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.
安装命令 点击复制
技能文档
Svelte stores and utilities for AINative chat completions.
Install
npm install @ainative/svelte-sdk
Configure
// src/lib/ainative.ts
import { setAINativeConfig } from '@ainative/svelte-sdk';setAINativeConfig({
apiKey: import.meta.env.VITE_AINATIVE_API_KEY,
baseUrl: 'https://api.ainative.studio',
});
Call this once in your app root (+layout.svelte or App.svelte).
createChatStore
{#each $chat.messages as msg}
{/each}{#if $chat.isLoading}
Thinking...
{/if}{#if $chat.error}
Error: {$chat.error.message}
{/if} e.key === 'Enter' && send()} />
Store Shape
$chat is a reactive store with this shape:
| Field | Type | Description | |
|---|---|---|---|
messages | Message[] | Full conversation history | |
isLoading | boolean | True while request in flight | |
error | AINativeError \ | null | Last error |
createChatStore Options
| Option | Type | Default | Description |
|---|---|---|---|
model | string | — | Model ID |
initialMessages | Message[] | [] | Seed conversation |
SvelteKit — Server Route
For server-side calls, use the raw API directly (no browser auth exposure):
// src/routes/api/chat/+server.ts
import { AINATIVE_API_KEY } 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': AINATIVE_API_KEY,
'Content-Type': 'application/json',
},
body: JSON.stringify({
model: 'claude-3-5-sonnet-20241022',
messages,
}),
});
return new Response(resp.body, {
headers: { 'Content-Type': 'application/json' },
});
};
Environment Variables
# .env
VITE_AINATIVE_API_KEY=ak_your_key # Client-safe (public key only)
AINATIVE_API_KEY=ak_your_key # Server-side (SvelteKit $env/static/private)
Use server routes for production — never expose API keys in client bundles.
Exports
import {
createChatStore,
setAINativeConfig,
ainativeConfig,
type Message,
type ChatState,
type AINativeError,
} from '@ainative/svelte-sdk';
References
packages/sdks/svelte/src/stores/chat.ts— Chat store implementationpackages/sdks/svelte/src/stores/config.ts— Config storepackages/sdks/svelte/src/index.ts— Package exports
免费技能或插件可能存在安全风险,如需更匹配、更安全的方案,建议联系付费定制