diff --git a/docs/renderers.md b/docs/renderers.md
index 98e2fd60..be4556cd 100644
--- a/docs/renderers.md
+++ b/docs/renderers.md
@@ -38,7 +38,42 @@ A2UI JSON → Renderer → Native Components → Your App
npm install @a2ui/lit
```
-TODO: Add a quickstart guide
+##### Usage
+```typescript
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { v0_8 } from '@a2ui/lit';
+// Import UI components registry
+import '@a2ui/lit/ui';
+
+@customElement('my-app')
+export class MyApp extends LitElement {
+ // 1. Create a MessageProcessor
+ #processor = v0_8.Data.createSignalA2uiMessageProcessor();
+
+ // 2. Feed it messages (e.g., from your transport)
+ handleMessage(message: v0_8.Types.ServerToClientMessage) {
+ this.#processor.processMessages([message]);
+ }
+
+ render() {
+ // 3. Render the surfaces
+ return html`
+ ${repeat(
+ this.#processor.getSurfaces(),
+ ([id]) => id,
+ ([id, surface]) => html`
+
+ `
+ )}
+ `;
+ }
+}
+```
**Angular:**
@@ -46,7 +81,32 @@ TODO: Add a quickstart guide
npm install @a2ui/angular
```
-TODO: Add a quickstart guide
+##### Usage
+```typescript
+import { Component, inject } from '@angular/core';
+import { MessageProcessor, Surface } from '@a2ui/angular';
+import { Types } from '@a2ui/lit/0.8';
+
+@Component({
+ selector: 'app-root',
+ template: `
+ @for (surface of processor.surfaces(); track surface.id) {
+
+ }
+ `,
+ imports: [Surface],
+ standalone: true
+})
+export class AppComponent {
+ // 1. Inject the MessageProcessor
+ protected processor = inject(MessageProcessor);
+
+ // 2. Feed it messages
+ handleMessage(message: Types.ServerToClientMessage) {
+ this.processor.processMessages([message]);
+ }
+}
+```
**Flutter:**
@@ -54,7 +114,21 @@ TODO: Add a quickstart guide
flutter pub add flutter_genui
```
-TODO: Add a quickstart guide
+##### Usage
+See the [GenUI Quickstart](https://docs.flutter.dev/ai/genui/get-started) for a complete tutorial.
+
+```dart
+// 1. Define your widgets
+class MyWidgetFactory extends WidgetFactory {
+ // ... map A2UI types to Flutter widgets
+}
+
+// 2. Use the GenUiArea
+GenUiArea(
+ messageStream: myMessageStream,
+ widgetFactory: MyWidgetFactory(),
+)
+```
## Adding custom components to a renderer
diff --git a/docs/transports.md b/docs/transports.md
index 992de634..f0d35a5d 100644
--- a/docs/transports.md
+++ b/docs/transports.md
@@ -56,19 +56,47 @@ You can use any transport that sends JSON:
**HTTP/REST:**
```javascript
-// TODO: Add an example
+const response = await fetch('/api/agent', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(clientEventMessage)
+});
+
+if (response.ok) {
+ const serverMessages = await response.json();
+ // Pass messages to your A2UI renderer
+ processor.processMessages(serverMessages);
+}
```
**WebSockets:**
```javascript
-// TODO: Add an example
+const socket = new WebSocket('ws://localhost:8080');
+
+socket.addEventListener('open', () => {
+ socket.send(JSON.stringify(clientEventMessage));
+});
+
+socket.addEventListener('message', (event) => {
+ const serverMessage = JSON.parse(event.data);
+ // Pass individual message to your A2UI renderer
+ processor.processMessages([serverMessage]);
+});
```
**Server-Sent Events:**
```javascript
-// TODO: Add an example
+const eventSource = new EventSource('/api/agent/stream');
+
+eventSource.onmessage = (event) => {
+ const serverMessage = JSON.parse(event.data);
+ // Pass individual message to your A2UI renderer
+ processor.processMessages([serverMessage]);
+};
```
```
diff --git a/renderers/lit/package.json b/renderers/lit/package.json
index 6cc360cb..321baf0c 100644
--- a/renderers/lit/package.json
+++ b/renderers/lit/package.json
@@ -30,7 +30,7 @@
},
"wireit": {
"copy-spec": {
- "command": "mkdir -p src/0.8/schemas && cp ../../specification/0.8/json/*.json src/0.8/schemas",
+ "command": "node scripts/copy-schemas.js",
"files": [
"../../specification/0.8/json/*.json"
],
@@ -105,4 +105,4 @@
"markdown-it": "^14.1.0",
"signal-utils": "^0.21.1"
}
-}
+}
\ No newline at end of file
diff --git a/renderers/lit/scripts/copy-schemas.js b/renderers/lit/scripts/copy-schemas.js
new file mode 100644
index 00000000..b84b341e
--- /dev/null
+++ b/renderers/lit/scripts/copy-schemas.js
@@ -0,0 +1,32 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const srcDir = path.resolve(__dirname, '../../../specification/0.8/json');
+const destDir = path.resolve(__dirname, '../src/0.8/schemas');
+
+console.log(`Copying schemas from ${srcDir} to ${destDir}...`);
+
+if (!fs.existsSync(destDir)) {
+ fs.mkdirSync(destDir, { recursive: true });
+}
+
+try {
+ const files = fs.readdirSync(srcDir);
+ let count = 0;
+ for (const file of files) {
+ if (file.endsWith('.json')) {
+ const srcFile = path.join(srcDir, file);
+ const destFile = path.join(destDir, file);
+ fs.copyFileSync(srcFile, destFile);
+ count++;
+ }
+ }
+ console.log(`Successfully copied ${count} schema files.`);
+} catch (err) {
+ console.error('Error copying schemas:', err);
+ process.exit(1);
+}