← ClaudeAtlas

xapilisted

Use when integrating xAPI (Experience API / Tin Can) in a web app or server with @studiolxd/xapi — sending/querying statements, managing State/Activity Profile/Agent Profile documents, parsing launch URLs, handling Result errors, or wiring the client across React, Vue, Angular, Svelte, vanilla JS, or LRS server helpers.
studiolxd/skills · ★ 0 · Web & Frontend · score 72
Install: claude install-skill studiolxd/skills
# Using @studiolxd/xapi `@studiolxd/xapi` is a headless xAPI 1.0.3/2.0 client. A framework-agnostic core (`createXapiClient`) plus thin adapters, talking to **any** standards-compliant LRS. Built-in **in-memory mock LRS** runs without a real LRS. ## Pick the entry point - Vanilla / any framework: `import { createXapiClient, buildStatement, VERBS } from '@studiolxd/xapi'` - React: `import { XapiProvider, useXapiClient, useXapiStatus } from '@studiolxd/xapi/react'` - Vue: `import { useXapiClient } from '@studiolxd/xapi/vue'` - Angular (>=17): `import { provideXapi, XAPI } from '@studiolxd/xapi/angular'` - Svelte (>=4): `import { createXapiStore } from '@studiolxd/xapi/svelte'` - Implementing an LRS (server side): `import { … } from '@studiolxd/xapi/server'` - CDN `<script>`: global `window.Xapi` ## The golden rules 1. **Always check `.ok` before `.value`.** Every network method returns `Promise<Result<T, XapiError>>` — the API never throws. (Unlike SCORM, everything here is async: HTTP.) 2. **Build statements with `client.buildStatement()`** (or the standalone `buildStatement`): `verb`/`object` accept a plain IRI string, `id` (UUID) and `timestamp` (ISO 8601) are auto-generated, and the client's `defaults` (`actor`, `registration`, `context`) are merged in. An actor needs **exactly one** identifier: `mbox` | `mbox_sha1sum` | `openid` | `account`. 3. **Use the mock LRS for dev/tests:** `createXapiClient({ endpoint: 'https://mock.lrs/xapi', fetch: create