https://github.com/sichengchen/wasser-ui
Generative UI infrastructure for agent-driven applications. Bring your own components and stack.
https://github.com/sichengchen/wasser-ui
gen-ui generative-ui generative-user-interface
Last synced: 27 days ago
JSON representation
Generative UI infrastructure for agent-driven applications. Bring your own components and stack.
- Host: GitHub
- URL: https://github.com/sichengchen/wasser-ui
- Owner: sichengchen
- License: mit
- Created: 2026-05-11T17:12:45.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-05-12T19:54:55.000Z (about 2 months ago)
- Last Synced: 2026-05-12T21:30:00.866Z (about 2 months ago)
- Topics: gen-ui, generative-ui, generative-user-interface
- Language: TypeScript
- Homepage:
- Size: 513 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Wasser UI
[](https://www.npmjs.com/package/@wasser-ui/core)
Wasser UI is a generative UI toolkit for agent-driven applications.
Applications expose their own components through a Wasser UI registry. Wasser UI
uses that registry to compile prompts, parse model output, verify Schema UI,
render verified UI, apply patches, and consume streaming UI updates.
## Packages
Install the framework
renderer your application uses:
```sh
npm install @wasser-ui/core@alpha @wasser-ui/runtime@alpha @wasser-ui/prompt@alpha @wasser-ui/react@alpha
```
Optional packages:
```sh
npm install @wasser-ui/vue@alpha
npm install @wasser-ui/svelte@alpha
npm install @wasser-ui/angular@alpha
npm install @wasser-ui/adapter-shadcn@alpha
npm install @wasser-ui/devtools@alpha
```
- `@wasser-ui/core`: registries, Schema UI protocol parsing, verification,
semantic patches, stream state, and diagnostics.
- `@wasser-ui/react`: React rendering for `VerifiedSchemaUI`, runtime binding,
safe fallbacks, and stream rendering.
- `@wasser-ui/vue`: Vue rendering for `VerifiedSchemaUI`, runtime binding, safe
fallbacks, and stream rendering.
- `@wasser-ui/svelte`: Svelte snippet and HTML rendering for
`VerifiedSchemaUI`, runtime binding, safe fallbacks, and stream rendering.
- `@wasser-ui/angular`: Angular rendering for `VerifiedSchemaUI`, runtime
binding, safe fallbacks, and stream rendering.
- `@wasser-ui/runtime`: state, query, action, mutation, permission, and runtime
event registries.
- `@wasser-ui/prompt`: prompt compilers for document, patch, stream, and repair
flows.
- `@wasser-ui/adapter-shadcn`: (optional) shadcn registry entries and render
bindings.
- `@wasser-ui/devtools`: serializable inspection models for registries, Schema
UI, verification, patches, streams, runtime events, prompts, and render
bindings.
## How It Works
1. Define a registry of user-owned components.
2. Register runtime capabilities for data, actions, mutations, and state.
3. Compile prompts from the same registry and runtime capabilities.
4. Parse model output as a Wasser document, patch, or JSONL stream.
5. Verify the output against the registry and runtime description.
6. Render `VerifiedSchemaUI` with React, Vue, Svelte, Angular, or inspect it with
DevTools.
Raw model output is always untrusted. Rendering starts only after verification
returns a `VerifiedSchemaUI`.
## Basic Usage
```ts
import { createWasserRegistry, defineWasserComponent, verifyDocument } from "@wasser-ui/core";
import { createWasserRuntime } from "@wasser-ui/runtime";
import { compileDocumentPrompt } from "@wasser-ui/prompt";
import { z } from "zod";
const CustomerTable = defineWasserComponent({
description: "Displays customers with status, revenue, and owner.",
propsSchema: z
.object({
dataRef: z.literal("queries.customers.data"),
})
.strict(),
children: "none",
prompt: {
props: [
{
name: "dataRef",
description: "Registered customer query data reference.",
required: true,
allowedValues: ["queries.customers.data"],
},
],
},
});
const registry = createWasserRegistry({
components: {
CustomerTable,
},
});
const runtime = createWasserRuntime();
runtime.queries.register({
id: "customers",
dataRef: "queries.customers.data",
handler: async () => api.customers.list(),
});
const prompt = compileDocumentPrompt({
registry,
runtime: runtime.describe(),
userIntent: "Show the customer list.",
});
const result = verifyDocument(modelOutput, {
registry,
runtime: runtime.describe(),
});
if (result.ok) {
render(result.ui);
} else {
showDiagnostics(result.diagnostics);
}
```
React rendering consumes verified UI:
```tsx
import { WasserRenderer, WasserRuntimeProvider } from "@wasser-ui/react";
;
```
Vue rendering consumes the same verified UI contract:
```ts
import { h } from "vue";
import { WasserRenderer, WasserRuntimeProvider } from "@wasser-ui/vue";
h(WasserRuntimeProvider, { runtime, registry }, () => h(WasserRenderer, { ui: verifiedUi }));
```
Svelte rendering exposes snippets and server HTML helpers:
```svelte
import { createWasserRenderer } from "@wasser-ui/svelte";
const renderer = createWasserRenderer({ ui: verifiedUi, runtime, registry });
{@render renderer()}
```
Angular rendering consumes the same verified UI contract:
```ts
import { provideWasserRuntime } from "@wasser-ui/angular";
bootstrapApplication(AppComponent, {
providers: [provideWasserRuntime({ runtime, registry })],
});
```
```html
```
## Documentation
- [Guides](./docs/guides/README.md): task-focused usage guides.
- [Reference](./docs/reference/README.md): public API and protocol references.
## Development
```bash
vp install
vp check
vp test
vp run -r build
```
The root `ready` script runs check, tests, and builds:
```bash
vp run ready
```