Embed AAS extraction in your app

Quick start

Drop the loader script + a container <div> into your page, then call AasStudio.openExtract() with a session token your backend mints (see Step 2).

<script src="https://aas-studio.eu/embed.js"></script>
<div id="aas-extract"></div>
<script>
  AasStudio.openExtract({
    sessionToken: '${SESSION_TOKEN}', // see Step 2
    container: '#aas-extract',
    onResult: (envelope) => {
      console.log('Asset:', envelope.result.assetIdShort)
      // POST envelope.result to your backend / pipeline.
    },
    onError: (err) => console.error(err.code, err.message),
  })
</script>

1. Generate an API key

Sign in to /studio, open Settings → API Keys, and create a key prefixed sk_aas_. Treat it like any production secret — store in your server env, never in client-side code or git.

2. Mint a session token from your backend

Your backend POSTs to /api/v1/embed/session with the API key in the Authorization header. The response includes a sessionToken bound to (your-user-id, the parent-frame origin, 15-min expiry). Pass it to the frontend — never the API key.

curl -X POST https://aas-studio.eu/api/v1/embed/session \
  -H "Authorization: Bearer $AAS_STUDIO_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"origin":"https://your-app.com"}'

# Response
{
  "sessionToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkFBUy1FTUJFRCJ9...",
  "expiresAt":   "2026-05-09T20:32:11.000Z",
  "embedUrl":    "https://aas-studio.eu/embed/extract?session=..."
}

Node.js / serverless example:

import { AasStudioClient } from '@aas-studio/sdk'
const aas = new AasStudioClient({ apiKey: process.env.AAS_STUDIO_API_KEY! })

// In your /api/aas-session handler:
const res = await fetch('https://aas-studio.eu/api/v1/embed/session', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.AAS_STUDIO_API_KEY}`,
    'Content-Type':  'application/json',
  },
  body: JSON.stringify({ origin: 'https://your-app.com' }),
}).then(r => r.json())

return Response.json({ sessionToken: res.sessionToken })

3. Render the iframe

Once your client has the session token, hand it to the loader. The iframe verifies the parent-frame origin matches the token claim before rendering the upload UI — a token leak alone isn’t enough to use the widget on a site that wasn’t whitelisted at mint time.

<script src="https://aas-studio.eu/embed.js"></script>
<div id="aas-extract" style="max-width:480px"></div>
<script>
  AasStudio.openExtract({
    sessionToken: window.MY_SESSION_TOKEN,
    container:    '#aas-extract',
    theme:        'light',          // 'light' | 'dark'
    accent:       '#5860f6',        // optional — match your brand
    onResult:     handleExtraction,
    onError:      handleError,
    onCancel:     handleCancel,
  })
</script>

postMessage events

The loader script translates iframe messages into your callbacks (onResult, onError,onCancel). For raw postMessage consumption (e.g. integration outside the loader), the iframe emits these events scoped to theaas-studio: namespace:

Theming

Pass theme and accent to match your product chrome. The wizard inherits no AAS Studio branding by default — typography is system fonts, no logo, no footer.

• theme: 'light' (default) or 'dark'
• accent: any CSS color string for primary buttons / highlights

Security model

• The iframe URL contains the session token, never your sk_aas_ key. Your backend is the only place that ever sees the API key.
• Session tokens are HMAC-signed (server-side EMBED_SESSION_SECRET) and bound to (your-user-id, parent-frame origin, expiry). They’re scoped to extraction only — a leaked token can’t call /v1/merge,/v1/search-datasheets, or any other public endpoint.
• Default TTL is 15 minutes; cap is 1 hour. Mint a new token per user-session in your app — don’t cache them client-side past one extraction flow.
• The wizard verifies window.location.ancestorOrigins client-side before rendering the upload UI. If your iframe is reloaded inside a different parent (e.g. clickjacking attempt), the upload control never appears.