将 orvui 与 OpenUI 结合使用

# Vue renderer, compatible framework-independent core, and validation
pnpm add @openuidev/vue-lang@^0.4 @openuidev/lang-core@^0.4 zod

# Copy the orvui components to expose
npx shadcn-vue@2.8.2 add https://orvui.efu.me/r/button.json https://orvui.efu.me/r/animated-badge.json https://orvui.efu.me/r/number.json

import { h } from 'vue';
import { defineComponent, useTriggerAction, type ComponentRenderProps } from '@openuidev/vue-lang';
import { z } from 'zod/v4';
import { Button } from '@/components/orvui/motion/button';
import { AnimatedBadge } from '@/components/orvui/motion/animated-badge';
import { AnimatedNumber } from '@/components/orvui/motion/number';

const buttonProps = z.object({
  label: z.string(), action: z.string(),
  variant: z.enum(['primary', 'secondary', 'ghost', 'outline']).default('primary'),
  ripple: z.boolean().default(false),
});

// Declare props and renderNode: partial props arrive while the stream is open.
const OrvuiButton = defineComponent({
  name: 'Button',
  description: 'Spring-pressed action button; action continues the conversation.',
  props: buttonProps,
  component: {
    props: ['props', 'renderNode'],
    setup(input: ComponentRenderProps<z.infer<typeof buttonProps>>) {
      const triggerAction = useTriggerAction();
      return () => h(Button, {
        variant: input.props.variant, ripple: input.props.ripple,
        onClick: () => input.props.action && triggerAction(input.props.action),
      }, () => input.props.label ?? '');
    },
  },
});

const badgeProps = z.object({
  label: z.string(),
  status: z.enum(['neutral', 'info', 'success', 'warning', 'danger', 'loading']).default('neutral'),
  pulse: z.boolean().default(false),
});
const OrvuiBadge = defineComponent({
  name: 'Badge', description: 'Status pill; pulse indicates a live state.',
  props: badgeProps,
  component: {
    props: ['props', 'renderNode'],
    setup: (input: ComponentRenderProps<z.infer<typeof badgeProps>>) =>
      () => h(AnimatedBadge, { status: input.props.status, pulse: input.props.pulse },
        () => input.props.label ?? ''),
  },
});

const statProps = z.object({ label: z.string(), value: z.number() });
const OrvuiStat = defineComponent({
  name: 'Stat', description: 'One numeric metric that springs into view.',
  props: statProps,
  component: {
    props: ['props', 'renderNode'],
    setup: (input: ComponentRenderProps<z.infer<typeof statProps>>) => () =>
      h('div', { class: 'rounded-xl border border-border bg-card p-4' }, [
        h('p', { class: 'text-sm text-muted-foreground' }, input.props.label ?? ''),
        h(AnimatedNumber, { value: input.props.value ?? 0, class: 'text-2xl font-semibold' }),
      ]),
  },
});

const StackChild = z.union([OrvuiButton.ref, OrvuiBadge.ref, OrvuiStat.ref]);
const stackProps = z.object({ children: z.array(StackChild) });
const Stack = defineComponent({
  name: 'Stack', description: 'Vertical container with spaced children.',
  props: stackProps,
  component: {
    props: ['props', 'renderNode'],
    setup: (input: ComponentRenderProps<z.infer<typeof stackProps>>) => () =>
      h('div', { class: 'flex flex-col gap-3' }, [input.renderNode(input.props.children ?? [])]),
  },
});

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

export const orvuiLibrary = createLibrary({
  root: 'Stack',
  components: [Stack, OrvuiButton, OrvuiBadge, OrvuiStat],
  componentGroups: [
    { name: 'Layout', components: ['Stack'],
      notes: ['Every response has one Stack root.'] },
    { name: 'orvui motion', components: ['Button', 'Badge', 'Stat'],
      notes: ['Use a pulsing Badge for streaming status.',
        'Use one primary Button per response.'] },
  ],
});

// Generate a serializable schema at build time, outside the server bundle.
const spec = { ...orvuiLibrary.toSpec(), schema: orvuiLibrary.toJSONSchema() };

import { generateSystemPrompt, type LibrarySpec } from '@openuidev/lang-core';
import librarySpec from './generated/orvui-library.spec.json';

// Run the Vue library module in a build script, then save
// JSON.stringify({ ...orvuiLibrary.toSpec(), schema: orvuiLibrary.toJSONSchema() })
// to the file imported above. A parser schema alone is not a prompt library spec.
const instructions = generateSystemPrompt({ library: librarySpec as LibrarySpec });

// Adapter for your application's existing transport. This guide adds no backend.
export async function generate(
  messages: unknown[],
  streamModel: (input: { messages: unknown[]; instructions: string }) => AsyncIterable<string>,
) {
  const encoder = new TextEncoder();
  return new Response(new ReadableStream<Uint8Array>({
    async start(controller) {
      try {
        for await (const delta of streamModel({ messages, instructions })) {
          controller.enqueue(encoder.encode(delta));
        }
        controller.close();
      } catch (error) { controller.error(error); }
    },
  }), { headers: { 'Content-Type': 'text/plain; charset=utf-8' } });
}

<script setup lang="ts">
import { Renderer, type ActionEvent } from '@openuidev/vue-lang';
import { orvuiLibrary } from './orvui-library';

defineProps<{ response: string | null; isStreaming: boolean }>();
const emit = defineEmits<{ send: [message: string] }>();
function handleAction(event: ActionEvent) {
  emit('send', event.humanFriendlyMessage);
}
</script>

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