Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.airglow.cc/llms.txt

Use this file to discover all available pages before exploring further.

Every Airglow showcase is a real app whose code lives in the public SDK. The fastest way to ship something useful is to fork the showcase closest to what you want and let your coding agent retarget it.
Done means a copy of an existing showcase has been retargeted to your page or workflow, and the new app appears where you wanted it.

​
What “customize existing” means

Instead of starting from a blank app, you start from a working one. You pick a showcase whose shape matches what you want to build — same kind of page, same kind of result — and ask your coding agent to retarget the page match, the DOM-reading logic, and the prompt while keeping the panel layout and interaction model. You will need:
  • Airglow installed and running (see Quick start).
  • A coding agent attached to the airglow-sdk workspace.
  • A clear destination: the page you want the customized app to run on, and a short description of what you want it to do there.

​
Pick a starting point

Every showcase has a shape — a panel layout, an interaction model, a server function. Match the shape of your target idea, not the topic.
ShowcaseShape worth borrowing
HN SummaryPublic page → list view → server picks N items + summarizes each.
Gmail CalendarPrivate page → single record → server extracts structured fields.
GitHub QACode-shaped page → free-form question → grounded answer with sources.
LinkedIn ResearchProfile page → notes with talking points and questions.
Ads ManagerTable view → review-style suggestions with evidence.
If your idea is “read a table on a page and summarize what to look at next,” Ads Manager is your starting point — even if the table isn’t ads.

​
Steps

​
1. Copy the showcase folder

Each showcase lives under airglow-apps/<showcase-name>/. Make a sibling copy under a new name and keep the original around for reference. 
cp -R airglow-apps/hn-summary airglow-apps/lobsters-summary
Rename the folder to what your customized app actually does, not what it was forked from.

​
2. Write a customization brief

A good brief tells the agent what to keep and what to change. Lean on the original shape. 
Take the HN Summary app under airglow-apps/lobsters-summary.
Make it work on lobste.rs instead of news.ycombinator.com.
Same panel layout, same five-story summary, but use the
lobste.rs DOM structure for the visible story list.
Keep the same Claude model and .env secret.
This brief reuses everything that already works (the panel, the count, the model, the secret) and changes only what has to change (the page match and the DOM-reading logic).

​
3. Let the agent edit in place

The agent should change three things and leave the rest alone:
FileTypical change
manifest.jsonNew matches glob for the target page; new app name.
userscripts/main.tsNew DOM selectors for the visible story list.
server/<name>.tsUsually unchanged — same model, same shape.
If the agent rewrites the panel layout or the server function from scratch, push back: “Keep the existing panel and server function. Only change what the new page requires.”

​
4. Reload and check on the new page

Restart the local server, reload the extension, and open the target page. 
pnpm airglow dev
The customized app appears on the new target page, uses the new page’s content, and matches the result shape of the original showcase.

​
5. Iterate on the diffs, not the whole app

Now that the app runs, the work is reading the new page correctly. Iterate on selectors and edge cases — not on the panel, the model, or the server contract. 
The story list on lobste.rs uses .story instead of .athing.
Update the userscript to read the visible .story rows.
Leave everything else alone.

​
Best practices

  • Match the shape, not the topic. A finance dashboard customization of Ads Manager is fine; the shape (table → reviewable suggestions) is what carries.
  • Rename early. A folder still named hn-summary becomes confusing the moment its target page is no longer Hacker News.
  • Tell the agent what to leave alone. “Keep the panel and the server function” is as important as “change the DOM selectors.”
  • Diff against the original. If you forget what you changed, run git diff airglow-apps/hn-summary airglow-apps/lobsters-summary to see exactly what’s different.

​
If it does not work

CaseFix
The customized app does not appear on the new pageCheck the matches glob in the new app’s manifest.json covers the page URL.
The app appears but reads nothingThe userscript selectors still target the original page’s DOM. Ask the agent to update them.
Both the original and the customized app fire on the same pageTighten the matches glob on one of them.
The agent rewrote the whole appRoll back with git checkout airglow-apps/<your-app> and re-prompt with a stricter “keep X, change Y” brief.
For more cases, open Troubleshooting.

​
Next

  • Showcases — browse the starting points.
  • One-shot app — write from scratch instead of forking.
  • SDK draft — the manifest, runtime contexts, and SDK API your customized app will touch.