Ainative Svelte Sdk

---

name: ainative-svelte-sdk description: 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.

---

@ainative/svelte-sdk

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}
  

    {msg.role}: {msg.content}
  
{/each}
{#if $chat.isLoading}
  
Thinking...
{/if}
{#if $chat.error}
  
Error: {$chat.error.message}
{/if}
 e.key === 'Enter' && send()} />
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 implementation

packages/sdks/svelte/src/stores/config.ts — Config store

packages/sdks/svelte/src/index.ts — Package exports