Renderer 组件 - 自定义 Components

自定义 Components 允许您注册自己的组件，配合相关提示词，LLM 可以在 schemaJson 输出对应组件后交由 Renderer（GenuiRenderer）渲染。

给组件传递自定义 Components

通过 customComponents 向 GenuiRenderer 组件传递自定义组件映射表。

示例：注册自定义组件

<template>
  <GenuiRenderer :content="content" :generating="generating" :customComponents="customComponents" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GenuiRenderer } from '@opentiny/genui-sdk-vue';
import UserProfile from './components/user-profile.vue';

const generating = ref(false);
const content = ref({});

const customComponents = {
  UserProfile: UserProfile,
};
</script>

创建自定义组件

自定义组件需要是一个标准的 Vue 组件：

<!-- user-profile.vue -->
<template>
  <div class="user-profile">
    <div class="avatar">
      <img v-if="avatar" :src="avatar" :alt="name" />
      <div v-else class="avatar-placeholder">{{ name?.[0] || 'U' }}</div>
    </div>
    <div class="user-info">
      <div class="user-name">{{ name }}</div>
      <div class="user-email">{{ email }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  name?: string;
  email?: string;
  avatar?: string;
}>();
</script>

<style scoped>
.user-profile {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin: 16px 0;
  background: #fff;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16px;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1890ff;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.user-email {
  font-size: 14px;
  color: #666;
}
</style>

在 Schema 中使用自定义组件

AI 生成的 Schema 可以直接使用你注册的自定义组件：

{
  "componentName": "UserProfile",
  "props": {
    "name": "John Doe",
    "email": "john@example.com",
    "avatar": "https://example.com/avatar.jpg"
  }
}

完整示例：

loading