Skip to main content

Svelte SDK

Reactive stores for Svelte and SvelteKit applications.

npm install @ainative/svelte-sdk

Requires: Svelte 4.0+ or Svelte 5.0+

Setup​

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

setAINativeConfig({
  apiKey: 'your-api-key',
  projectId: 'your-project',
});

createChat​

<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​

<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 in +page.server.ts or +server.ts files:

// 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​

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

Next Steps​