AbstractUIC
AbstractUIC is the web UI kit of AbstractFramework's browser apps: React components (a chat panel, provider and model pickers, gateway sign-in, an About dialog, an automations panel), small Web Components, 21 themes, and a Node.js gateway session proxy. AbstractCode web, AbstractObserver, AbstractFlow, AbstractContinuum and AbstractEntity are built from it, and you can build your own web app on a gateway the same way. Packages are published on npm under @abstractframework.
npm i @abstractframework/panel-chat @abstractframework/ui-kitHost-driven building blocks
The components import nothing from a host app: data and callbacks flow in from the page that uses them. The chat controller replays a run the way every framework client does: it pages through the run's ledger from a cursor, then follows the live stream from the gateway.
Who builds on it
AbstractCode web depends on ui-kit, panel-chat, app-server and two monitors. The Observer, Flow, Continuum and Entity use app-server and compile ui-kit and panel-chat in from source. The AbstractGateway web console mounts ui-kit islands (top-bar actions, appearance dialog), and the AbstractCore web console takes its themes from ui-kit.
React and Web Components
React packages for chat, pickers, dialogs and monitors; <monitor-gpu> and <monitor-memory> as Web Components for any page; console islands for pages that are not React apps.
A server side too
@abstractframework/app-server serves your app under the gateway's /apps/<id>/, parses the shared launch flags, and exchanges the gateway token for an HttpOnly cookie session, so the browser never stores the token.
Install only what you need
| Package | What it provides |
|---|---|
@abstractframework/ui-kit 0.1.16 | Theme tokens (21 themes), AfSelect and provider/model pickers, the gateway connect modal and connection hook, top bar, drawer and appearance dialog, the About dialog and identity helpers, tool policy editor, critical action dialog, steer composer, voice hook (streaming TTS, push-to-talk), automations panel, schedule dialog and typed gateway client |
@abstractframework/panel-chat 0.1.19 | Chat thread, message cards, composer, Markdown and JSON rendering, an app assistant panel, workflow chat with streamed replies, "Schedule this…" and the "from automation" badge |
@abstractframework/app-server | The Node server side: mounting under /apps/<id>/, shared launch flags, the local gateway pointer, the gateway session proxy (token to HttpOnly cookie, CSRF, URL pinning) |
@abstractframework/monitor-flow | Agent-cycle trace viewer with a ledger adapter |
@abstractframework/monitor-active-memory | Knowledge graph and active memory explorer (ReactFlow) |
@abstractframework/monitor-gpu | GPU utilization widget, <monitor-gpu> |
@abstractframework/monitor-memory | Host RAM and device memory widget, <monitor-memory> |
A web app on your gateway
Import the theme tokens once, then the CSS and components of the packages you use. On the server side, one proxy gives your page a gateway session.
import "@abstractframework/ui-kit/theme.css";
import "@abstractframework/panel-chat/panel_chat.css";
import { ChatComposer, ChatThread } from "@abstractframework/panel-chat";import http from "node:http";
import { createGatewaySessionProxy } from "@abstractframework/app-server";
const gatewayProxy = createGatewaySessionProxy({
appId: "my-app",
defaultGatewayUrl: process.env.ABSTRACTGATEWAY_URL || "http://127.0.0.1:8080",
});
const server = http.createServer(async (req, res) => {
const pathname = new URL(req.url || "/", "http://127.0.0.1").pathname;
if (gatewayProxy.handle(req, res, pathname)) return;
if (pathname === "/healthz") {
res.writeHead(200, { "Content-Type": "text/plain; charset=utf-8" });
res.end("ok");
return;
}
res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
res.end("not found");
});
server.listen(3000);npm i @abstractframework/monitor-gpu
<!-- after registerMonitorGpuWidget() -->
<monitor-gpu base-url="http://localhost:8080" tick-ms="1500" history-size="20" mode="icon"></monitor-gpu>