@opentiny/genui-sdk-materials-vue-opentiny-vue

@opentiny/genui-sdk-materials-vue-opentiny-vue

A GenUI Vue materials package based on OpenTiny Vue, for schema-driven page generation and rendering.

Install

npm install @opentiny/genui-sdk-materials-vue-opentiny-vue @opentiny/genui-sdk-vue @opentiny/genui-sdk-core

Quick Start

Frontend Rendering

Inject materials via ConfigProvider:

import { GenuiConfigProvider, GenuiChat } from '@opentiny/genui-sdk-vue';
import { materials } from '@opentiny/genui-sdk-materials-vue-opentiny-vue/materials';

<GenuiConfigProvider :materials="materials">
  <GenuiChat />
</GenuiConfigProvider>

Generate LLM Prompt (Server)

import { genPrompt } from '@opentiny/genui-sdk-core';
import { materialsMeta } from '@opentiny/genui-sdk-materials-vue-opentiny-vue/meta';

const systemPrompt = genPrompt('Vue', materialsMeta, customConfig);

materialsMeta.wrapperComponent defaults to TinyCard.

Use miniMaterials / miniMaterialsMeta for a smaller set (forms/tables, no charts). Use plusMaterials / plusMaterialsMeta for full business pages (tree, dialog, timeline, etc.).

For Plus tier, import the plus entries instead:

import { GenuiConfigProvider, GenuiChat } from '@opentiny/genui-sdk-vue';
import { plusMaterials } from '@opentiny/genui-sdk-materials-vue-opentiny-vue/materials';
import { genPrompt } from '@opentiny/genui-sdk-core';
import { plusMaterialsMeta } from '@opentiny/genui-sdk-materials-vue-opentiny-vue/meta';

<GenuiConfigProvider :materials="plusMaterials">
  <GenuiChat />
</GenuiConfigProvider>

const systemPrompt = genPrompt('Vue', plusMaterialsMeta, customConfig);

API

Tiering

materials / miniMaterials / plusMaterials

Component registry mapping OpenTiny Vue components, used by the renderer to resolve nodes by componentName.

materialsMeta / miniMaterialsMeta / plusMaterialsMeta

Materials metadata, including:

• materials: Protocol descriptions for components / blocks / snippets
• wrapperComponent: Default wrapper component (TinyCard)
• whiteList: Whitelist of componentName values available to the LLM
• examples: Prompt example schemas (form / info / grid / tabs)
• rules: Extra constraint rules

Component library: @opentiny/vue-*.

More

• GenUI SDK
• Renderer Guide