mlola-ui 1.11.0 → 1.12.0

package/README.md

@@ -48,6 +48,7 @@ Tailwind's preflight in either import order.
 | `migrate [path…] [--write] [--json]` | move a shadcn/ui project's props, toasts and icons to Mlola, and list what needs a person |
 | `render check <file \| -> [--json]` | check A2UI messages an agent composed against the Mlola Render catalog; exits 1 on an error |
 | `render catalog [--schema]` | print the Mlola Render catalog as the guide an agent reads, or as the A2UI catalog |
+| `render prompt [--tool] [--page-theme]` | print the system prompt for a model you call yourself: every answer a surface, or (`--tool`) a tool the model calls when one helps; `--page-theme` leaves themes to the page |
 | `login <token>` | save a Mlola Pro token (from /account) for this user |
 | `logout` | forget the saved token |
 
@@ -171,6 +172,26 @@ comes back to the agent as their next message, with A2UI's action. The A2UI
 catalog is `mlola-ui/render/catalog` and
 https://ui.mlola.com/a2ui/catalog/v1.
 
+With a model you call yourself, `mlola-ui/render/ai` is what goes around the
+call: the system prompt, a reader for what the model answers (as it streams,
+and however it wrapped the JSON), and the loop that hands a refused reply
+back with its errors. Mlola never calls a model and holds no key:
+
+```js
+import { composeRender } from "mlola-ui/render/ai";
+
+const { valid, messages, turns } = await composeRender({
+  rules,
+  request: "A form to book a table for tonight",
+  generate: ({ system, messages }) => callYourModel(system, messages), // answers with the model's text
+});
+```
+
+`renderSystemPrompt`, `renderTool`, `createRenderReader`, `readRenderReply`,
+`checkRenderReply` and `renderRepairPrompt` are the parts, for a stream, a
+tool call or a loop of your own. `npx mlola-ui render prompt` prints the
+prompt for a server in another language.
+
 To draw surfaces yourself: `npx mlola-ui add render-surface` in React, or
 `@mlola-ui/behavior/render` on a page without a framework. See
 https://ui.mlola.com/docs/render.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mlola-ui",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "mcpName": "io.github.mlolahq/mlola-ui",
   "description": "Source-copy CLI that writes framework-free Mlola UI items into your project",
   "type": "module",
@@ -14,6 +14,10 @@
       "types": "./registry/render.d.ts",
       "default": "./registry/render.js"
     },
+    "./render/ai": {
+      "types": "./registry/render-ai.d.ts",
+      "default": "./registry/render-ai.js"
+    },
     "./render/rules": {
       "types": "./src/render-rules.d.ts",
       "default": "./registry/render-rules.json"

package/registry/catalog.json

@@ -53,6 +53,7 @@
     "model-compare",
     "prompt-playground",
     "generative-ui",
+    "render-pro",
     "transcript"
   ],
   "blocks": [
@@ -836,6 +837,21 @@
         "render"
       ]
     },
+    {
+      "name": "render-pro",
+      "type": "registry:ui",
+      "title": "Render Pro",
+      "description": "Draws the interface an agent composed from the Mlola Render Pro catalog: every free component, plus charts and a data grid a person can edit",
+      "category": "ai-agents",
+      "tags": [
+        "agent",
+        "a2ui",
+        "generative",
+        "render",
+        "chart",
+        "data grid"
+      ]
+    },
     {
       "name": "transcript",
       "type": "registry:ui",

package/registry/index.json

@@ -2,7 +2,7 @@
   "$schema": "./schema/registry-index.schema.json",
   "schemaVersion": 2,
   "name": "mlola-ui",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",
@@ -179,8 +179,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0",
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0",
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -241,7 +241,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -403,7 +403,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -495,7 +495,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [],
       "variants": [],
@@ -548,7 +548,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/motion": "^1.11.0"
+        "@mlola-ui/motion": "^1.12.0"
       },
       "options": [
         {
@@ -716,8 +716,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0",
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0",
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -786,7 +786,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [],
       "variants": [],
@@ -841,7 +841,7 @@
         "modal"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [],
       "variants": [],
@@ -905,8 +905,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0",
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0",
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -995,7 +995,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [],
       "variants": [],
@@ -1220,8 +1220,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0",
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0",
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -1372,7 +1372,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [],
       "variants": [],
@@ -1423,7 +1423,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0"
       },
       "options": [
         {
@@ -1801,7 +1801,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0"
       },
       "options": [],
       "variants": [],
@@ -1854,8 +1854,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0",
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0",
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -1933,8 +1933,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0",
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0",
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -2080,7 +2080,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0"
       },
       "options": [
         {
@@ -2148,7 +2148,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0"
       },
       "options": [
         {
@@ -2308,7 +2308,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0"
       },
       "options": [
         {
@@ -2440,7 +2440,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -2528,8 +2528,8 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0",
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0",
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -2684,7 +2684,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0"
       },
       "options": [
         {
@@ -2761,7 +2761,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0"
       },
       "options": [
         {
@@ -2843,7 +2843,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -2915,7 +2915,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -2985,7 +2985,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [],
       "variants": [],
@@ -3183,8 +3183,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0",
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0",
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -3273,7 +3273,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [],
       "variants": [],
@@ -3328,7 +3328,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [],
       "variants": [],
@@ -3391,7 +3391,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -3462,7 +3462,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -3581,8 +3581,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0",
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0",
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [],
       "variants": [],
@@ -3646,7 +3646,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0"
       },
       "options": [
         {
@@ -3733,8 +3733,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0",
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0",
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [],
       "variants": [],
@@ -3808,7 +3808,7 @@
         "sheet"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [],
       "variants": [],
@@ -3931,7 +3931,7 @@
         "button"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -4035,8 +4035,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0",
-        "@mlola-ui/icons": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0",
+        "@mlola-ui/icons": "^1.12.0"
       },
       "options": [
         {
@@ -4128,7 +4128,7 @@
         "toggle"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.11.0"
+        "@mlola-ui/behavior": "^1.12.0"
       },
       "options": [
         {
@@ -4155,7 +4155,7 @@
           "path": "packages/components/render-surface/render-surface.tsx",
           "target": "{{aliases.components}}/render-surface.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-3L4CcYBHjwb1QyKGCygC4NEPL4TajSZiNcMzy4Uf0IM="
+          "integrity": "sha256-nW48kYLXoa3eeGZQ7gXMD/bTNH9MDeJlWyl1zzrvDwo="
         }
       ],
       "themeContract": {

package/registry/render-ai.d.ts

@@ -0,0 +1,94 @@
+/** Types for Mlola Render with your own model (ai.js). See docs/render.md. */
+import type { RenderResult, RenderRules } from "./render.js";
+
+export interface RenderPromptOptions {
+  /** "lines" (the default): every answer is a surface, as A2UI messages one to a line. "tool": the model answers in words and calls a tool when a surface helps. */
+  output?: "lines" | "tool";
+  /** "surface" (the default): the model may name one of the catalog's themes. "page": it sets none, and the surface takes the theme of the page it is shown on. */
+  theme?: "surface" | "page";
+  /** The tool's name when `output` is "tool"; "render_ui" when left out. Give `renderTool` the same one. */
+  tool?: string;
+}
+
+/** What to tell the model, as its system prompt: how to answer, then the catalog's guide. */
+export function renderSystemPrompt(rules: RenderRules, options?: RenderPromptOptions): string;
+
+/** A tool in the shape every provider's tool calling is built from. */
+export interface RenderTool {
+  name: string;
+  description: string;
+  inputSchema: {
+    type: "object";
+    properties: { messages: { type: "string"; description: string } };
+    required: ["messages"];
+  };
+}
+
+/** The tool a model calls to show a surface. Its messages travel as one string: read them with `checkRenderReply`. */
+export function renderTool(options?: { name?: string }): RenderTool;
+
+/** The messages read from a reply, or the error that stopped the read (and then no messages). */
+export interface RenderReply {
+  messages: unknown[];
+  error: string | null;
+}
+
+export interface RenderReader {
+  /** Takes the next piece of the model's text and answers with the messages it completed. */
+  push(chunk: string): unknown[];
+  /** Every message of the reply, or what was wrong with it: a piece that is not JSON, a message cut off, too much text, or no message at all. */
+  end(): RenderReply;
+}
+
+/** Reads A2UI messages out of a model's text as it arrives: JSON Lines, an array, one object, a code fence around them, or {"messages": […]}. */
+export function createRenderReader(rules: RenderRules): RenderReader;
+
+/** Reads a whole reply: the model's text, a tool call's arguments, or messages already parsed. */
+export function readRenderReply(reply: unknown, rules: RenderRules): RenderReply;
+
+export interface CheckedReply {
+  /** True when the reply may be drawn. */
+  valid: boolean;
+  /** The messages to draw; empty unless `valid`. */
+  messages: unknown[];
+  /** The check's result. A reply that could not be read, or that shows nothing, is one error at the path "". */
+  result: RenderResult;
+  /** What to tell the model when the reply was refused: the next user message, or the tool's answer. Null when `valid`. */
+  repair: string | null;
+}
+
+/** Reads a reply and checks it against the catalog. */
+export function checkRenderReply(reply: unknown, rules: RenderRules): CheckedReply;
+
+/** What to tell the model about a reply the check refused. */
+export function renderRepairPrompt(result: RenderResult): string;
+
+export interface RenderTurn {
+  role: "user" | "assistant";
+  content: string;
+}
+
+export interface ComposeRenderOptions {
+  /** The catalog: mlola-ui/render/rules. */
+  rules: RenderRules;
+  /** Calls your model with this system prompt and these turns, and answers with its text. */
+  generate: (call: { system: string; messages: RenderTurn[]; attempt: number }) => string | Promise<string>;
+  /** What the person asked for, or the conversation so far, ending with the person's turn. */
+  request: string | RenderTurn[];
+  /** Your own system prompt, with `renderSystemPrompt(rules)` in it. Left out, that prompt alone. */
+  system?: string;
+  /** Passed to `renderSystemPrompt` when `system` is left out. */
+  theme?: "surface" | "page";
+  /** How many times the model is asked, from 1 to 10. 3 when left out. */
+  attempts?: number;
+}
+
+export interface ComposedRender extends CheckedReply {
+  /** How many times the model was asked. */
+  attempts: number;
+  /** The conversation with the model's replies and the corrections in it, to continue from. */
+  turns: RenderTurn[];
+}
+
+/** Asks your model for a surface until one passes the check, or the attempts run out. */
+export function composeRender(options: ComposeRenderOptions): Promise<ComposedRender>;