Ainative Sdk Quickstart

Get started with AINative SDKs in under 5 minutes. Use when (1) Setting up AINative for the first time, (2) Choosing between React/Next.js/Svelte/Vue SDKs, (...

Security Scan

This is an instruction-only quickstart for AINative SDKs and the contents are coherent with that purpose; it mostly directs normal npm/npx usage and environment-variable configuration.

Purpose & Capability

Name/description (AINative SDK quickstart) matches the SKILL.md: it shows how to get an API key, install SDK packages, and make a first API call for React/Next/Svelte/Vue. It does not request unrelated credentials or unusual system access.

Instruction Scope

The instructions stay within SDK setup scope (npm install, npx zerodb init, env vars, and example code). They do mention the zerodb init command writing an MCP config to .claude/mcp.json (or cursor/mcp.json) and show using AINATIVE_API_KEY and NEXT_PUBLIC_AINATIVE_API_KEY — which is expected for a quickstart but worth noting because NEXT_PUBLIC_* keys are client-exposed.

Install Mechanism

No formal install spec in the skill bundle (instruction-only). The doc instructs running npm install and npx zerodb init; this is normal for a quickstart but running npx executes remote package code from npm, so users should verify the zerodb-cli package/repo before running.

Credentials

The skill declares no required env vars (reasonable), but examples reference AINATIVE_API_KEY and NEXT_PUBLIC_AINATIVE_API_KEY. These are proportionate to the task, though exposing a secret via NEXT_PUBLIC_* will make it public to clients and may be inappropriate depending on key capabilities.

Persistence & Privilege

always is false and there is no install or code that requests persistent privileges or modifies other skills or system-wide settings. The skill is instruction-only and does not ask to be always-enabled.

Assessment

This skill is a standard quickstart: it shows npm installs, an npx command that auto-creates API keys and writes a local config, and uses environment variables. Before running anything (especially npx zerodb init): 1) Verify the zerodb-cli/ainative npm packages and their repository/homepage to ensure they are the official project; 2) Prefer creating API keys manually via the web console if you don't trust an automated CLI; 3) Do not put sensitive server keys in client-exposed env vars (NEXT_PUBLIC_*) unless the key is explicitly designed to be public/limited; and 4) Inspect any files written to your filesystem (e.g., .claude/mcp.json) to understand what credentials are stored and where.

1. Get an API Key (30 seconds)

# Auto-creates a project + API key, configures your IDE's MCP server
npx zerodb init

This outputs:

API Key: ak_...
Project ID: proj_...
MCP config written to .claude/mcp.json (or cursor/mcp.json)

Or create manually at https://app.ainative.studio → Settings → API Keys.

2. Choose Your SDK

Framework	Package	Hook/API
React	@ainative/react-sdk	useChat, useCredits
Next.js	@ainative/next-sdk	Server client + middleware
Svelte	@ainative/svelte-sdk	Svelte stores
Vue	@ainative/vue-sdk	Composables
Raw API	requests / fetch	REST directly

3. React

npm install @ainative/react-sdk

import { AINativeProvider, useChat } from '@ainative/react-sdk';

function App() {
  return (
    <AINativeProvider config={{ apiKey: 'ak_your_key' }}>
      <Chat />
    </AINativeProvider>
  );
}

function Chat() {
  const { messages, sendMessage, isLoading } = useChat({
    model: 'claude-3-5-sonnet-20241022',
  });

  return (
    <div>
      {messages.map((m, i) => <div key={i}>{m.role}: {m.content}</div>)}
      <button onClick={() => sendMessage([...messages, { role: 'user', content: 'Hello' }])}
              disabled={isLoading}>
        Send
      </button>
    </div>
  );
}

4. Next.js

npm install @ainative/next-sdk

// app/api/chat/route.ts
import { createServerClient } from '@ainative/next-sdk/server';

export async function POST(request: Request) {
  const { messages } = await request.json();
  const client = createServerClient({ apiKey: process.env.AINATIVE_API_KEY! });

  const result = await client.chat.completions.create({
    model: 'claude-3-5-sonnet-20241022',
    messages,
    stream: true,
  });

  return new Response(result.body, {
    headers: { 'Content-Type': 'text/event-stream' },
  });
}

5. Svelte

npm install @ainative/svelte-sdk

<script>
  import { createChatStore, setAINativeConfig } from '@ainative/svelte-sdk';

  setAINativeConfig({ apiKey: 'ak_your_key' });
  const chat = createChatStore({ model: 'claude-3-5-sonnet-20241022' });
</script>

{#each $chat.messages as msg}
  <p><b>{msg.role}:</b> {msg.content}</p>
{/each}
<button on:click={() => chat.sendMessage([...$chat.messages, { role: 'user', content: 'Hi' }])}>
  Send
</button>

6. Vue

npm install @ainative/vue-sdk

<script setup>
import { useChat } from '@ainative/vue-sdk';
import { provideAINative } from '@ainative/vue-sdk';

provideAINative({ apiKey: 'ak_your_key' });
const { messages, sendMessage, isLoading } = useChat({ model: 'claude-3-5-sonnet-20241022' });
</script>

<template>
  <div v-for="(msg, i) in messages" :key="i">{{ msg.role }}: {{ msg.content }}</div>
  <button @click="sendMessage([...messages, { role: 'user', content: 'Hi' }])" :disabled="isLoading">
    Send
  </button>
</template>

7. Environment Variables

# .env
AINATIVE_API_KEY=ak_your_key
NEXT_PUBLIC_AINATIVE_API_KEY=ak_your_key  # Next.js client-side

References

• packages/sdks/react/ — React SDK source
• packages/sdks/nextjs/ — Next.js SDK source
• packages/sdks/svelte/ — Svelte SDK source
• packages/sdks/vue/ — Vue SDK source
• packages/zerodb-cli/ — zerodb init source