First appLocal workflow

Quickstart

Build a small userscript-backed app locally, call the SDK, and verify the extension sees your app.

Start From GitHub

1Open GitHubGo to github.com/Airglow-up/Airglow-dev-kit. This is the public SDK beta repo and the right starting point for SDK apps.
2Clone the repoClone it locally, install dependencies, and keep your coding agent pointed at that checkout.
3Run the app serverUse pnpm airglow dev while you iterate on local SDK apps.

Clone and runbash

git clone https://github.com/Airglow-up/Airglow-dev-kit.git
cd Airglow-dev-kit
pnpm install
pnpm airglow dev

Load The Extension

1Open Chrome extensionsOpen chrome://extensions and turn on Developer mode.
2Load unpackedSelect the dev-kit extension/ folder. That folder must contain manifest.json at its root.
3Allow User ScriptsOpen the Airglow extension details page and enable Chrome's Allow User Scripts toggle. Userscript apps will not run until this is enabled.

Screenshot/GIF placeholder

Add a short animation here showing Developer mode, Load unpacked, selecting extension/, and enabling Allow User Scripts.

Create The App

Ask an agent for one visible userscript-backed app first. Keep the target page and success state concrete so the first run is easy to verify.

Example agent prompttext

Create a small Airglow SDK app called hn-page-brief.

Goal:
- Run on https://news.ycombinator.com/*
- Read the top 10 story titles from the page
- Add a compact Airglow panel at the top of the page
- Show the titles and a summarize button

Constraints:
- Use a userscript first; do not call chrome.* directly
- Use only the global airglow.* SDK for storage/logging/fetch/RPC
- Keep secrets server-side if you add an API call
- Make the first version easy to verify visually

Expected structuretext

airglow-apps/hn-page-brief/
  manifest.json
  userscripts/
    hn.ts
  ui/
    App.tsx        # optional after the userscript works
  server/
    summarize.ts  # optional for server-side model calls

manifest.jsonjson

{
  "id": "hn-tagger",
  "name": "HN Tagger",
  "version": "0.1.0",
  "description": "Tags Hacker News stories from a userscript",
  "userscripts": [
    {
      "file": "userscripts/hn.ts",
      "matches": ["*://news.ycombinator.com/*"]
    }
  ],
  "secrets": {
    "ANTHROPIC_API_KEY": { "label": "Anthropic API Key" }
  }
}

userscripts/hn.tsts

const titles = [...document.querySelectorAll(".titleline > a")]
  .slice(0, 20)
  .map((node) => node.textContent?.trim())
  .filter(Boolean);

const key = await airglow.storage.get<string>("ANTHROPIC_API_KEY");
const response = await airglow.fetch("https://api.anthropic.com/v1/messages", {
  method: "POST",
  headers: {
    "content-type": "application/json",
    "x-api-key": key ?? "",
    "anthropic-version": "2023-06-01",
  },
  body: JSON.stringify({
    model: "claude-3-5-haiku-latest",
    max_tokens: 512,
    messages: [{ role: "user", content: `Tag these titles: ${titles.join("\n")}` }],
  }),
});

if (!response.ok) {
  await airglow.log.warn("Anthropic request failed", { status: response.status });
  return;
}

const result = await response.json();
await airglow.storage.set("last-tags", result);

Add UI And RPC

UI and server RPC are optional. Use UI when the app needs a durable workflow surface. Use RPC when work needs server secrets, platform keys, or rate limits.

ui/App.tsxtsx

import { createRoot } from "react-dom/client";
import { useEffect, useState } from "react";

function App() {
  const [tags, setTags] = useState<any>(null);

  useEffect(() => {
    airglow.storage.get("last-tags").then(setTags);
  }, []);

  return (
    <main>
      <h1>HN Tagger</h1>
      <pre>{JSON.stringify(tags, null, 2)}</pre>
    </main>
  );
}

createRoot(document.getElementById("root")!).render(<App />);

server/tag.ts and client callts

// airglow-apps/hn-tagger/server/tag.ts
export default async function tag(payload: { titles: string[] }) {
  const apiKey = process.env.ANTHROPIC_API_KEY;
  if (!apiKey) {
    throw new Error("ANTHROPIC_API_KEY is not configured");
  }

  return {
    titles: payload.titles,
    generatedAt: new Date().toISOString(),
  };
}

// userscripts/hn.ts or ui/App.tsx
const result = await airglow.rpc("tag", { titles });

Verify Locally

1Start the dev-kit serverpnpm airglow dev serves local app manifests and artifacts while you iterate.
2Refresh the extensionUse the loaded extension/ folder and refresh it from chrome://extensions after extension-level changes.
3Open the target pageFor the example, open Hacker News and verify the userscript is registered for news.ycombinator.com.
4Check what happenedConfirm the visible page panel, then inspect the Airglow dashboard/logs for app load and SDK errors.