Quickstart

Install the SDK

npm install @uiap/web-sdk

Initialize UIAP

import { createUIAP } from "@uiap/web-sdk";

const uiap = createUIAP({
  app: {
    id: "my-app",
    version: "1.0.0",
    profile: "[email protected]",
  },
  transport: myTransport,
});

await uiap.start();

Annotate your UI

Add data-uiap-* attributes to your HTML elements:

<button
  data-uiap-id="video.submit"
  data-uiap-action="video.create"
  data-uiap-risk="confirm"
>
  Create Video
</button>

Or use programmatic bindings:

uiap.bindElement(document.querySelector("#submit"), {
  id: "video.submit",
  defaultAction: "video.create",
  risk: "confirm",
});

Register Actions

uiap.registerAction(
  {
    id: "video.create",
    kind: "domain",
    risk: { level: "confirm", tags: ["external_effect"] },
  },
  async (ctx) => {
    await app.actions.createVideo();
    return { status: "succeeded", sideEffectState: "applied" };
  }
);

Next Steps

• Read the Core Specification to understand the protocol
• Explore the SDK API for the full client API
• Learn Why UIAP? for the rationale behind the protocol