vue-lang

@openuidev/vue-lang

Vue 3 bindings for OpenUI Lang. Define model-renderable Vue components, generate prompts from those definitions, and render streamed OpenUI Lang in a Vue app.

Links: OpenUI Lang docs | GitHub repo

Install

npm install @openuidev/vue-lang
# or
pnpm add @openuidev/vue-lang

Peer dependencies: vue >=3.5.0

Overview

@openuidev/vue-lang brings the OpenUI Lang runtime to Vue:

1. Define Vue components that a model is allowed to call, with Zod schemas for props.
2. Generate prompts from the component library.
3. Render streamed output with <Renderer> as OpenUI Lang arrives.

Quick Start

1. Define a component

<script setup lang="ts">
import { defineComponent, type ComponentRenderProps } from "@openuidev/vue-lang";
import { z } from "zod";

const Greeting = defineComponent({
  name: "Greeting",
  description: "Displays a greeting message",
  props: z.object({
    name: z.string().describe("The person's name"),
    mood: z.enum(["happy", "excited"]).optional().describe("Tone of the greeting"),
  }),
  component: {
    setup(compProps: ComponentRenderProps<{ name: string; mood?: string }>) {
      return () => (
        <div class={compProps.props.mood === "excited" ? "text-xl font-bold" : ""}>
          Hello, {compProps.props.name}!
        </div>
      );
    },
  },
});
</script>

2. Create a library

import { createLibrary } from "@openuidev/vue-lang";

const library = createLibrary({
  components: [Greeting, Card, Table /* ... */],
  root: "Card", // optional default root component
});

3. Generate a system prompt

const systemPrompt = library.prompt({
  preamble: "You are a helpful assistant.",
  additionalRules: ["Always greet the user by name."],
  examples: ["<Greeting name='Alice' mood='happy' />"],
});

4. Render streamed output

<template>
  <Renderer
    :response="response"
    :library="library"
    :is-streaming="isStreaming"
    :on-action="handleAction"
  />
</template>

<script setup lang="ts">
import { Renderer } from "@openuidev/vue-lang";
</script>

API Reference

Component Definition

Export	Description
defineComponent(config)	Define a single component with a name, Zod props schema, description, and Vue renderer
createLibrary(definition)	Create a library from an array of defined components

Rendering

Export	Description
Renderer	Vue component that parses and renders OpenUI Lang output

RendererProps:

Prop	Type	Description
response	string | null	Raw OpenUI Lang text from the model
library	Library	Component library from createLibrary()
isStreaming	boolean	Whether the model is still streaming (disables form interactions)
onAction	(event: ActionEvent) => void	Callback when a component triggers an action
onStateUpdate	(state: Record<string, any>) => void	Callback when form field values change
initialState	Record<string, any>	Initial form state for hydration
onParseResult	(result: ParseResult | null) => void	Callback when the parse result changes
toolProvider	Record<string, Function> | McpClientLike | null	Tool provider for executing Query() and Mutation() tool calls
queryLoader	Component | VNode | null	Custom loading spinner / loader component shown during query loading
onError	(errors: OpenUIError[]) => void	Callback triggered with structured, LLM-friendly errors

Errors

ParseResult.meta.errors contains structured OpenUIError objects. Each error has a type discriminant (currently always "validation") and a code for consumer-side filtering:

Code	Meaning
missing-required	Required prop absent with no default
null-required	Required prop explicitly null with no default
unknown-component	Component name not found in the library schema
excess-args	More positional args passed than the schema defines

Errors do not affect rendering. The parser stays permissive and renders what it can. Use code to decide how to surface or log errors:

const result = parser.parse(output);
const critical = result.meta.errors.filter((e) => e.code === "unknown-component");

To check for unresolved references after streaming, inspect meta.unresolved:

if (result.meta.unresolved.length > 0) {
  console.warn("Unresolved refs:", result.meta.unresolved);
}

Composables

Use these inside component renderers to interact with the rendering context:

Composable	Description
useIsStreaming()	Whether the model is still streaming
useIsQueryLoading()	Whether any Query is currently fetching data
useRenderNode()	Render child element nodes
useTriggerAction()	Trigger an action event
useGetFieldValue()	Get a form field's current value
useSetFieldValue()	Set a form field's value
useSetDefaultValue()	Set a field's default value
useFormName()	Get the current form's name

Form Validation

Export	Description
useFormValidation()	Access form validation state
createFormValidation()	Create a form validation context
validate(value, rules)	Run validation rules against a value
builtInValidators	Built-in validators (required, email, min, max, etc.)

Types

import type {
  Library,
  LibraryDefinition,
  DefinedComponent,
  ComponentRenderer,
  ComponentRenderProps,
  ComponentGroup,
  PromptOptions,
  RendererProps,
  RenderNodeResult,
  SubComponentOf,
  ActionEvent,
  ElementNode,
  ParseResult,
  LibraryJSONSchema,
} from "@openuidev/vue-lang";

Tool Provider Support (Queries & Mutations)

OpenUI Lang connects to your backend through tools. You can register a toolProvider to handle data fetching (Query()) and updates (Mutation()) natively in Vue:

<template>
  <Renderer
    :response="response"
    :library="library"
    :tool-provider="toolProvider"
    :query-loader="SpinnerComponent"
    :on-error="handleErrors"
  />
</template>

<script setup lang="ts">
import { Renderer } from "@openuidev/vue-lang";
import SpinnerComponent from "./Spinner.vue";

const toolProvider = {
  async get_server_health(args: Record<string, unknown>) {
    const res = await fetch(`/api/health`);
    return res.json();
  },
  async create_ticket(args: Record<string, unknown>) {
    const res = await fetch(`/api/tickets`, {
      method: "POST",
      body: JSON.stringify(args)
    });
    return res.json();
  }
};

function handleErrors(errors: any[]) {
  console.error("OpenUI Errors:", errors);
}
</script>

JSON Schema Output

Libraries can also produce a JSON Schema representation of their components:

const schema = library.toJSONSchema();
// schema.$defs["Card"]     → { properties: {...}, required: [...] }
// schema.$defs["Greeting"] → { properties: {...}, required: [...] }

Documentation

• OpenUI Lang guide
• Language specification
• Source on GitHub

License

MIT