QUICK START

Get your first AStack integration running in under 5 minutes.

GET YOUR API KEY

INSTALL THE SDKS

# Client SDK (browser)
$ npm install @aether-stack-dev/client-sdk

# Server SDK (backend)
$ npm install @aether-stack-dev/developer-sdk

CREATE A SESSION (SERVER)

Your backend creates a session and generates a token for the client.

import { AStackSDK } from '@aether-stack-dev/developer-sdk';

const sdk = new AStackSDK({
  apiKey: process.env.ASTACK_API_KEY,
  apiEndpoint: process.env.ASTACK_API_ENDPOINT,
});

// Create session through the control plane
const { session, token, credentials } = await sdk.createSession('user_123');

// Return browser-safe session fields to your frontend
res.json({
  sessionId: session.id,
  sessionToken: token,
  gatewayUrl: credentials.gatewayUrl,
  gatewayWsUrl: credentials.gatewayWsUrl,
  rendererPlayerUrl: credentials.rendererPlayerUrl,
  expiresAt: credentials.expiresAt,
});

CONNECT FROM THE CLIENT

Your frontend connects to the UE-hosted gateway, embeds the renderer player, and starts a call.

import { AStackCSRClient } from '@aether-stack-dev/client-sdk';

const session = await fetch('/api/start-session', { method: 'POST' }).then(r => r.json());
const client = new AStackCSRClient({
  gatewayWsUrl: session.gatewayWsUrl,
  gatewayUrl: session.gatewayUrl,
  sessionToken: session.sessionToken,
  rendererPlayerUrl: session.rendererPlayerUrl,
});

await client.connect();

const player = document.querySelector('iframe#astack-renderer');
player?.setAttribute('src', client.getRendererPlayerUrl() ?? '');

client.on('transcript', (text) => {
  console.log('User said:', text);
});

client.on('response', (text) => {
  console.log('AI response:', text);
});

client.on('blendshapeUpdate', (blendshapes) => {
  // 52 ARKit blendshape values for avatar animation
});

await client.startCall();

REACT INTEGRATION

Use the React hook for a simpler integration.

import { useAStackCSR } from '@aether-stack-dev/client-sdk/react';

function CallUI({ session }) {
  const {
    gatewayStatus, rendererPlayerUrl, callStatus,
    transcript, response, connect, startCall, stopCall
  } = useAStackCSR({
    session,
  });

  return (
    <div>
      {rendererPlayerUrl && (
        <iframe title="AStack renderer" src={rendererPlayerUrl} />
      )}
      <p>Gateway: {gatewayStatus}</p>
      <p>Status: {callStatus}</p>
      <p>Transcript: {transcript}</p>
      <p>Response: {response}</p>
      <button onClick={() => connect().then(() => startCall())}>
        Start Call
      </button>
      <button onClick={stopCall}>Stop Call</button>
    </div>
  );
}

AStack Console

QUICK START

GET YOUR API KEY

INSTALL THE SDKS

CREATE A SESSION (SERVER)

CONNECT FROM THE CLIENT

REACT INTEGRATION

NEXT STEPS

CLIENT SDK REFERENCE

SERVER SDK REFERENCE