diff --git a/benchmarks/README.md b/benchmarks/README.md index 39550d94d..61ee9bbb5 100644 --- a/benchmarks/README.md +++ b/benchmarks/README.md @@ -92,11 +92,11 @@ benchmarks/ `schema.json` and `system-prompt.txt` are generated by `library.toJSONSchema()` and `library.prompt()` in `@openuidev/react-ui`. If you add or change components, regenerate them: ```ts -import { defaultLibrary } from "@openuidev/react-ui"; +import { openuiLibrary } from "@openuidev/react-ui"; import { writeFileSync } from "fs"; -writeFileSync("schema.json", JSON.stringify(defaultLibrary.toJSONSchema(), null, 2)); -writeFileSync("system-prompt.txt", defaultLibrary.prompt()); +writeFileSync("schema.json", JSON.stringify(openuiLibrary.toJSONSchema(), null, 2)); +writeFileSync("system-prompt.txt", openuiLibrary.prompt()); ``` The parser (`createParser`) reads component definitions from the `$defs` section of this file to map positional arguments to named props. diff --git a/docs/app/(home)/components/FeaturesSection.tsx b/docs/app/(home)/components/FeaturesSection.tsx index ef33407a4..d7ed2ae90 100644 --- a/docs/app/(home)/components/FeaturesSection.tsx +++ b/docs/app/(home)/components/FeaturesSection.tsx @@ -19,12 +19,12 @@ interface Feature { const FEATURES: Feature[] = [ { title: "Performance Optimized", - description: "2.1x faster rendering than json-render", + description: "Up to 3.0x faster rendering than json-render", iconPath: svgPaths.p7658f00, }, { title: "Token efficient", - description: "52% lesser tokens than json-render", + description: "Up to 67.1% lesser tokens than json-render", iconPath: svgPaths.p2a8ddd80, }, { diff --git a/docs/app/docs/openui-lang/page.tsx b/docs/app/docs/openui-lang/page.tsx index a29e1e09b..83b82d5be 100644 --- a/docs/app/docs/openui-lang/page.tsx +++ b/docs/app/docs/openui-lang/page.tsx @@ -94,14 +94,14 @@ export default function OpenUILangOverview() { > A2UI {" "} - that uses ~52% fewer tokens than equivalent JSON structures. Define your component library + that uses up to 67.1% fewer tokens than equivalent JSON structures. Define your component library with Zod schemas and parse LLM responses into renderable components.

; + }, +}); +``` + +`triggerAction(userMessage, formName?, action?)` — the second and third arguments are optional. + +--- + +## Form state + +The `Renderer` tracks field values automatically. Components use `useSetFieldValue` and `useGetFieldValue` to read and write state. + +### Persistence + +Use `onStateUpdate` to persist field state (e.g. to a message in your thread store) and `initialState` to hydrate it on load. + +```tsx + { + // state is a raw Record of all field values + saveToBackend(state); + }} + initialState={loadedState} +/> +``` + +`onStateUpdate` fires on every field change. The state format is opaque — persist and hydrate it as-is. + +### Field hooks + +Use these inside `defineComponent` renderers: + +| Hook | Signature | Description | +| :------------------ | :------------------------------------------------------------------------------------------------- | :--------------------------------- | +| `useGetFieldValue` | `(formName: string \| undefined, name: string) => any` | Read a field's current value. | +| `useSetFieldValue` | `(formName: string \| undefined, componentType: string \| undefined, name: string, value: any, shouldTriggerSaveCallback?: boolean) => void` | Write a field value. | +| `useFormName` | `() => string \| undefined` | Get the enclosing form's name. | +| `useSetDefaultValue`| `(options: { formName?, componentType, name, existingValue, defaultValue, shouldTriggerSaveCallback? }) => void` | Set a default if no value exists. | + +--- + +## Validation + +Form fields can declare validation rules. The `Form` component provides a validation context via `useFormValidation`. + +```ts +interface FormValidationContextValue { + errors: Record; + validateField: (name: string, value: unknown, rules: ParsedRule[]) => boolean; + registerField: (name: string, rules: ParsedRule[], getValue: () => unknown) => void; + unregisterField: (name: string) => void; + validateForm: () => boolean; + clearFieldError: (name: string) => void; +} +``` + +Built-in validators include `required`, `minLength`, `maxLength`, `min`, `max`, `pattern`, and `email`. Custom validators can be added via `builtInValidators`. + +--- + +## Next Steps + + + + Full Renderer props reference. + + + Complete lang-react API. + + diff --git a/docs/content/docs/openui-lang/meta.json b/docs/content/docs/openui-lang/meta.json index 5606f63c0..2b2c934ed 100644 --- a/docs/content/docs/openui-lang/meta.json +++ b/docs/content/docs/openui-lang/meta.json @@ -9,6 +9,7 @@ "defining-components", "system-prompts", "renderer", + "interactivity", "---Advanced---", "specification", "benchmarks" diff --git a/docs/content/docs/openui-lang/quickstart.mdx b/docs/content/docs/openui-lang/quickstart.mdx index 2cc45f13f..dfb5c8cc3 100644 --- a/docs/content/docs/openui-lang/quickstart.mdx +++ b/docs/content/docs/openui-lang/quickstart.mdx @@ -1,6 +1,6 @@ --- title: Quick Start -description: Use the default library to render OpenUI Lang immediately. +description: Use the OpenUI library to render OpenUI Lang immediately. --- This is the fastest path: use `openuiLibrary` from `@openuidev/react-ui` and render LLM output with `@openuidev/lang-react`. diff --git a/docs/content/docs/openui-lang/standard-library.mdx b/docs/content/docs/openui-lang/standard-library.mdx index f1b264197..2ac59e108 100644 --- a/docs/content/docs/openui-lang/standard-library.mdx +++ b/docs/content/docs/openui-lang/standard-library.mdx @@ -1,6 +1,6 @@ --- title: Using the Standard Library -description: Use the built-in default library from @openuidev/react-ui. +description: Use the built-in OpenUI library from @openuidev/react-ui. --- OpenUI ships with a prebuilt `openuiLibrary` for common layouts, forms, content, and charts. @@ -11,7 +11,7 @@ OpenUI ships with a prebuilt `openuiLibrary` for common layouts, forms, content, npm install @openuidev/lang-react @openuidev/react-ui ``` -## Render with default library +## Render with OpenUI library ```tsx import "@openuidev/react-ui/components.css"; diff --git a/docs/content/docs/openui-lang/syntax.mdx b/docs/content/docs/openui-lang/syntax.mdx index 949b50e1b..b7ce890b2 100644 --- a/docs/content/docs/openui-lang/syntax.mdx +++ b/docs/content/docs/openui-lang/syntax.mdx @@ -38,7 +38,7 @@ cancelBtn = Button("Cancel", "action:cancel", "secondary") ## Rules - First statement is the entry point. -- For default library prompts, start with `root = Stack(...)`. +- For OpenUI library prompts, start with `root = Stack(...)`. - Arguments are positional, based on Zod key order. - Optional args can be omitted from the end. - Forward references are allowed. diff --git a/docs/lib/layout.shared.tsx b/docs/lib/layout.shared.tsx index 58740c198..dcd25bc8e 100644 --- a/docs/lib/layout.shared.tsx +++ b/docs/lib/layout.shared.tsx @@ -8,7 +8,7 @@ export const gitConfig = { export const siteConfig = { githubUrl: `https://github.com/${gitConfig.user}/${gitConfig.repo}`, - discordUrl: "https://discord.gg/ZeSTyHZTEV", + discordUrl: "https://discord.com/invite/Pbv5PsqUSv", }; export function baseOptions(): BaseLayoutProps { diff --git a/packages/create-openui-app/src/templates/openui-chat/src/app/page.tsx b/packages/create-openui-app/src/templates/openui-chat/src/app/page.tsx index db66d864a..b828b1d20 100644 --- a/packages/create-openui-app/src/templates/openui-chat/src/app/page.tsx +++ b/packages/create-openui-app/src/templates/openui-chat/src/app/page.tsx @@ -4,9 +4,9 @@ import "@openuidev/react-ui/styles/index.css"; import { openAIMessageFormat, openAIReadableStreamAdapter } from "@openuidev/react-headless"; import { FullScreen } from "@openuidev/react-ui"; -import { defaultLibrary, defaultPromptOptions } from "@openuidev/react-ui/genui-lib"; +import { openuiLibrary, openuiPromptOptions } from "@openuidev/react-ui/genui-lib"; -const systemPrompt = defaultLibrary.prompt(defaultPromptOptions); +const systemPrompt = openuiLibrary.prompt(openuiPromptOptions); export default function Home() { return ( @@ -24,7 +24,7 @@ export default function Home() { }); }} streamProtocol={openAIReadableStreamAdapter()} - componentLibrary={defaultLibrary} + componentLibrary={openuiLibrary} agentName="OpenUI Chat" />