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) C...

Security Scan

The SKILL.md describes a Svelte SDK that legitimately needs an AINative API key, but the skill metadata declares no required environment variables — a coherence gap that looks like sloppy or incomplete packaging and should be clarified before trusting/installation.

Purpose & Capability

The name/description (Svelte SDK for adding AI chat) match the instructions: creating Svelte stores, calling an AINative chat endpoint, and recommending server routes. The functionality described plausibly requires an AINative API key and outbound network access to api.ainative.studio.

Instruction Scope

SKILL.md stays within the stated purpose: it shows installing the npm package, setting configuration with import.meta.env, and a recommended server route that posts to https://api.ainative.studio/v1/public/chat/completions. It also explicitly warns not to expose API keys client-side, which is appropriate. No instructions request unrelated files, credentials, or system state.

Install Mechanism

This is an instruction-only skill with no install spec and no bundled code—lowest-risk delivery. It instructs using npm to install @ainative/svelte-sdk (expected for a JS SDK) but does not perform any downloads itself.

Credentials

SKILL.md references two environment variables (VITE_AINATIVE_API_KEY for client builds and AINATIVE_API_KEY for server-side use) but the skill metadata lists no required env vars or primary credential. The SDK legitimately needs at least a server API key; the metadata omission is an incoherence that reduces transparency and should be corrected. Otherwise the credentials requested in the docs are proportional to the purpose.

Persistence & Privilege

The skill is not always-enabled, does not request elevated persistence, and contains no instructions to modify other skills or agent settings. Autonomous invocation is allowed (platform default) but there is no extra privilege requested.

What to consider before installing

This skill's docs look like a normal Svelte SDK, but the metadata omitted the environment variables that the docs require. Before installing or wiring this into production: (1) verify the npm package and publisher (is @ainative/svelte-sdk actually published under the expected owner?), (2) inspect the package source/repository and package contents to confirm there is no unexpected behavior, (3) ensure you only store the real API key server-side (AINATIVE_API_KEY in SvelteKit $env/static/private) and never embed private keys in client bundles (VITE_ keys are public-facing), (4) confirm the API host (https://api.ainative.studio) is correct and trusted, and (5) ask the skill publisher to update the skill metadata to declare the required environment variables (at minimum AINATIVE_API_KEY) so automated tooling and reviewers have accurate information. If you cannot inspect the package source or confirm the publisher, treat the package as higher risk and avoid exposing sensitive keys.

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

<!-- src/lib/Chat.svelte -->
<script lang="ts">
  import { createChatStore } from '@ainative/svelte-sdk';

  const chat = createChatStore({
    model: 'claude-3-5-sonnet-20241022',
  });

  let input = '';

  async function send() {
    if (!input.trim()) return;
    const userMsg = { role: 'user' as const, content: input };
    input = '';
    await chat.sendMessage([...$chat.messages, userMsg]);
  }
</script>

{#each $chat.messages as msg}
  <div class="message {msg.role}">
    <strong>{msg.role}:</strong> {msg.content}
  </div>
{/each}

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

{#if $chat.error}
  <p class="error">Error: {$chat.error.message}</p>
{/if}

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

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