---
title: "Svelte SDK"
description: "Svelte stores and actions for chat completions and credit management"
canonical: "https://docs.ainative.studio/docs/sdks/svelte"
last-updated: "2026-10-03T21:47:10.764Z"
---

# Svelte SDK

Source: https://docs.ainative.studio/docs/sdks/svelte

> Svelte stores and actions for chat completions and credit management

# Svelte SDK

Reactive stores for Svelte and SvelteKit applications.

```bash
npm install @ainative/svelte-sdk
```

**Requires:** Svelte 4.0+ or Svelte 5.0+

## Setup

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

setAINativeConfig({
  apiKey: 'your-api-key',
  // Note: projectId is NOT a config option — pass it per ZeroDBClient call
});
```

## createChat

```svelte
<script>
  import { createChat } from '@ainative/svelte-sdk';

  const chat = createChat({
    model: 'meta-llama/llama-3.3-70b-instruct',
    systemPrompt: 'You are a helpful assistant.',
  });

  let input = '';

  async function send() {
    await chat.sendMessage(input);
    input = '';
  }
</script>

<div>
  {#each $chat.messages as msg}
    <p><strong>{msg.role}:</strong> {msg.content}</p>
  {/each}

  {#if $chat.isLoading}
    <p>Thinking...</p>
  {/if}

  <input bind:value={input} on:keydown={(e) => e.key === 'Enter' && send()} />
  <button on:click={send} disabled={$chat.isLoading}>Send</button>
</div>
```

## createCredits

```svelte
<script>
  import { createCredits } from '@ainative/svelte-sdk';

  const credits = createCredits();
</script>

<p>Balance: {$credits.balance} credits</p>
<p>Used: {$credits.usage} credits</p>
<button on:click={() => credits.refresh()}>Refresh</button>
```

## SvelteKit Server-Side

For server-side usage in SvelteKit, use the [TypeScript SDK](/docs/sdks/typescript) in `+page.server.ts` or `+server.ts` files:

```typescript
// src/routes/api/chat/+server.ts
import { AINative } from '@ainative/sdk';
import { AINATIVE_API_KEY } from '$env/static/private';

const client = new AINative({ apiKey: AINATIVE_API_KEY });

export async function POST({ request }) {
  const { messages } = await request.json();
  const response = await client.chat.completions.create({
    model: 'meta-llama/llama-3.3-70b-instruct',
    messages,
  });
  return new Response(JSON.stringify(response));
}
```

## TypeScript Types

```typescript
import type {
  AINativeConfig,
  Message,
  ChatCompletionResponse,
  CreditBalance,
  AINativeError,
  ChatState,
  CreditsState,
  ChatOptions,
  CreditsOptions,
} from '@ainative/svelte-sdk';
```

## Next Steps

- [Vue SDK](/docs/sdks/vue) — Vue 3 composables
- [React SDK](/docs/sdks/react) — React hooks and components
- [TypeScript SDK](/docs/sdks/typescript) — Core SDK for all APIs