Skip to content
OpenChamber
↑↓Navigate ↵Open escClose

Example

These three files are a working extension. It connects a GitHub token, lists your repositories, and lets you attach one to the chat. Copy them into a folder, then change the API and the list for your own provider. For the manifest fields and installing, see Build an extension; for every method, see Host API.

package.json:

{
  "name": "my-repos",
  "version": "1.0.0",
  "private": true,
  "openchamber": {
    "apiVersion": 1,
    "contributes": {
      "panel": { "id": "my-repos", "name": "Repos", "icon": "github", "entry": "panel/index.html" },
      "attach": "panel",
      "integration": {
        "name": "GitHub (token)",
        "description": "Lists your repositories.",
        "token": {
          "apiOrigin": "https://api.github.com",
          "account": { "path": "/user", "name": "login" },
          "scheme": "bearer"
        }
      }
    }
  },
  "dependencies": { "@openchamber/sdk": "^1.24.0" }
}

panel/index.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>html, body { margin: 0; height: 100%; } #root { height: 100%; padding: 12px; box-sizing: border-box; }</style>
  </head>
  <body>
    <div id="root"></div>
    <script src="main.js"></script>
  </body>
</html>

panel/main.ts:

import { connectHost, HostRequestError } from "@openchamber/sdk";
import { applyHostReady, mountBanner, mountEmpty, mountList, mountSpinner } from "@openchamber/sdk/ui";


type Repo = { full_name: string; html_url: string; description: string | null };


const host = connectHost();
const root = document.querySelector("#root")!;
let mounted: Array<{ dispose: () => void }> = [];


const clear = () => {
  for (const block of mounted) block.dispose();
  mounted = [];
};


let generation = 0;
const paint = async (connected: boolean) => {
  const currentGeneration = ++generation;
  clear();
  if (!connected) {
    mounted.push(mountEmpty(root, {
      title: "Not connected",
      body: "Paste a GitHub token in Settings → Integrations → GitHub (token).",
    }));
    return;
  }
  const spinner = mountSpinner(root, { label: "Loading repositories" });
  mounted.push(spinner);
  try {
    const result = await host.request({ method: "GET", path: "/user/repos", query: { per_page: "30", sort: "updated" } });
    if (currentGeneration !== generation) return;
    spinner.dispose();
    if (result.status !== 200) {
      mounted.push(mountBanner(root, { tone: "error", title: `GitHub answered ${result.status}` }));
      return;
    }
    const repos = JSON.parse(result.body) as Repo[];
    mounted.push(mountList(root, {
      items: repos.map((repo) => ({ id: repo.full_name, title: repo.full_name, subtitle: repo.description ?? undefined })),
      onSelect: (id) => {
        const repo = repos.find((item) => item.full_name === id);
        if (repo) void host.attach({ providerId: "my-repos", id: repo.full_name, title: repo.full_name, url: repo.html_url });
      },
    }));
  } catch (error) {
    if (currentGeneration !== generation) return;
    spinner.dispose();
    const text = error instanceof HostRequestError ? `${error.code}: ${error.message}` : String(error);
    mounted.push(mountBanner(root, { tone: "error", title: "Request failed", body: text }));
  }
};


host.onReady((ctx) => {
  applyHostReady(ctx, document.documentElement);
});
let previousConnection: string | undefined;
host.onConnection((connection) => {
  const key = JSON.stringify(connection);
  if (key === previousConnection) return;
  previousConnection = key;
  void paint(connection.connected);
});

For Git URL installs and updates, commit the built panel/main.js alongside the HTML and manifest. OpenChamber does not install npm dependencies or build TypeScript when installing an extension. Commit the lockfile, keep node_modules/ in .gitignore, and bundle browser dependencies into the IIFE. To ship an update, bump the extension’s own package.json version, rebuild, commit, and push. In Settings → Extensions, choose Update. A URL pinned to a Git tag stays on that tag.

Build it from the folder with bunx openchamber-guest-bundle panel/main.ts panel/main.js, then add the folder at Settings → Extensions. Five more examples (every UI control, a task list with actions and a slash command, a local service, a config file editor, a tools-only package) are at github.com/openchamber/openchamber/tree/main/packages/sdk/examples.