Ambient UI

northbeamServices / checkout-api
OverviewMetricsDeploymentsDomainsSettings

Versions

2db5ed7Fix day dividers rendering twice18h ago
46cee28Sweep dead code from the composer2d ago
b3c2e39One SurfaceHeader across panels2d ago
5831257Fix the failed deploy: target the built distfailed4d ago
ebf2e21Manually deployed4d ago

Domains & routes

checkout-api.northbeam.devCustom domains —Routes —

Metrics Last 24 hours

Requests · 412kp95 latency · 84 msErrors · 0.02%

Next steps

Connect a custom domainBind a queue to retriesEnable trace sampling

Most products add AI by finding a spot for it: a chat tab, a sparkle button, a panel in the corner. Ambient UI does the opposite. The assistant sits above your product instead of inside it, so your screens stay yours.

It takes no space.

Your screens are already full. There is no chat tab to add and no column to give up. The assistant opens when you ask for it and goes away when you are done.

It knows where you are.

Each page tells the assistant what you are looking at. Ask about “this invoice” and it knows which one. You never paste a screenshot or explain your screen first.

It answers with real things.

Not a wall of text. A code change you can apply. A command with its output. Links into your own data. Made from the same components as the rest of your product.

It looks like your product.

The assistant has no colours, fonts or motion of its own. It borrows yours. Change your theme and it changes with it.

One assistant, five shapes

Sometimes you want to ask one quick question. Sometimes you want to work alongside it for an hour. It is the same assistant either way. It just changes shape to match how much room the moment is worth.

Orb

Resting. A small character parked at the edge of the page, doing nothing until you call it.

northbeamServices / checkout-api
OverviewMetricsDeploymentsDomainsSettings

Versions

2db5ed7Fix day dividers rendering twice18h ago
46cee28Sweep dead code from the composer2d ago
b3c2e39One SurfaceHeader across panels2d ago
5831257Fix the failed deploy: target the built distfailed4d ago
ebf2e21Manually deployed4d ago

Domains & routes

checkout-api.northbeam.devCustom domains —Routes —

Metrics Last 24 hours

Requests · 412kp95 latency · 84 msErrors · 0.02%

Next steps

Connect a custom domainBind a queue to retriesEnable trace sampling

Spotlight

One box that searches your product and asks the assistant. It is ⌘K, rebuilt for a product that has AI in it.

northbeamServices / checkout-api
OverviewMetricsDeploymentsDomainsSettings

Versions

2db5ed7Fix day dividers rendering twice18h ago
46cee28Sweep dead code from the composer2d ago
b3c2e39One SurfaceHeader across panels2d ago
5831257Fix the failed deploy: target the built distfailed4d ago
ebf2e21Manually deployed4d ago

Domains & routes

checkout-api.northbeam.devCustom domains —Routes —

Metrics Last 24 hours

Requests · 412kp95 latency · 84 msErrors · 0.02%

Next steps

Connect a custom domainBind a queue to retriesEnable trace sampling

Panel

A conversation that stays open while you work. Answers stack up, so you can look back at what you asked.

northbeamServices / checkout-api
OverviewMetricsDeploymentsDomainsSettings

Versions

2db5ed7Fix day dividers rendering twice18h ago
46cee28Sweep dead code from the composer2d ago
b3c2e39One SurfaceHeader across panels2d ago
5831257Fix the failed deploy: target the built distfailed4d ago
ebf2e21Manually deployed4d ago

Domains & routes

checkout-api.northbeam.devCustom domains —Routes —

Metrics Last 24 hours

Requests · 412kp95 latency · 84 msErrors · 0.02%

Next steps

Connect a custom domainBind a queue to retriesEnable trace sampling

Dock

The panel pinned to one side, full height. Your page makes room for it instead of hiding behind it.

northbeamServices / checkout-api
OverviewMetricsDeploymentsDomainsSettings

Versions

2db5ed7Fix day dividers rendering twice18h ago
46cee28Sweep dead code from the composer2d ago
b3c2e39One SurfaceHeader across panels2d ago
5831257Fix the failed deploy: target the built distfailed4d ago
ebf2e21Manually deployed4d ago

Domains & routes

checkout-api.northbeam.devCustom domains —Routes —

Metrics Last 24 hours

Requests · 412kp95 latency · 84 msErrors · 0.02%

Next steps

Connect a custom domainBind a queue to retriesEnable trace sampling

History

Everything you have asked here. It fills the screen but stays see-through, because the work underneath is why you opened it.

northbeamServices / checkout-api
OverviewMetricsDeploymentsDomainsSettings

Versions

2db5ed7Fix day dividers rendering twice18h ago
46cee28Sweep dead code from the composer2d ago
b3c2e39One SurfaceHeader across panels2d ago
5831257Fix the failed deploy: target the built distfailed4d ago
ebf2e21Manually deployed4d ago

Domains & routes

checkout-api.northbeam.devCustom domains —Routes —

Metrics Last 24 hours

Requests · 412kp95 latency · 84 msErrors · 0.02%

Next steps

Connect a custom domainBind a queue to retriesEnable trace sampling

Customize

Make it yours

The Foundation on this site is live, not a picture of one. Pick a different accent or a tighter spacing step and every component on every page redraws while you watch, the assistant included. Save, and it is your theme.

Built on the foundations of the stack you already use

Tailwind CSSshadcn/ui

What it is built on

Design architecture

The assistant is not the point. It is the proof. Underneath it is a design system that stopped being a list of what you have, and became something that decides what happens when one of those things changes.

The change

You set values, you do not style components

Someone shows you a product and says “make it feel like that”. The usual answer is to go and adjust components until it looks close. Here you pick from a short menu instead: an accent colour, a grey, a corner radius, a spacing step, a type scale, an icon set, how motion feels. Save, and everything in the product follows. The menu is short on purpose. If it cannot express something, that is the system doing its job.

The engine

Design and code read from the same values

Your codebase and your Figma file are two different places, and they start drifting apart the day you make them. Underneath both there is one data layer: the tokens. Figma already has variables as a concept — colours for light and dark, spacing, radius — so the same Tailwind scales your code uses are written into them, and the Foundation points at those. Change a value, run the sync, and Figma follows without anyone redrawing anything.

Pulling a design out of Figma and into code is a well-travelled road. This is the return trip: not just writing variables, but wiring them to a short menu of choices, so one save re-themes both sides at once. The point is not tidiness. It is that design and engineering end up naming the same things the same way.

Take it

The whole layer, in one command

The code lands in your repo, not in node_modules. You can open it and change it, because a system you cannot change is not really yours. It is built on shadcn/ui and Tailwind CSS, so it fits with what you already have.

npx shadcn add @ambientui/ambient-layer

Register the namespace once and every command stays short:

npx shadcn registry add @ambientui=https://lumenridge.github.io/ambientui/r/{name}.json

Take the components

The parts you can see. They land in your repo as code you own.

The whole ambient layer

Everything this page just showed you: the orb, the spotlight, the panel, the dock and the history, plus the wiring that lets a page tell it where you are.

npx shadcn add @ambientui/ambient-layer

One component

Just the piece you need — the reasoning panel, the tool timeline, the diff. 31 to choose from, each documented with what it is and is not for.

npx shadcn add @ambientui/reasoning-panel

Adopt the architecture

The part that decides how everything looks.

A design system to build inside

The Foundation: the short menu of values everything else reads from — colour, grey, corners, spacing, type, motion. You can take this on its own, with no assistant attached.

npx shadcn add @ambientui/foundation

The rules your AI works under

The rules your AI reads before it writes anything, and three reviewer roles it can take on. This is the part nobody else ships.

npx shadcn add @ambientui/governance