OpenTiny NEXT

Appearance

快速开始 ​

本文将帮助你快速上手 GenUI SDK，通过 GenuiChat 组件快速开始使用生成式 UI。

GenuiChat 是一个集成的对话组件，内部已经封装了会话管理、流式返回、生成状态等功能，是最简单的使用方式。

初始化项目 ​

首先，创建一个新的 Vue 项目：

bash
npm create vue@latest genui-chat

按照默认提示进行项目初始化。

安装依赖 ​

进入项目目录并安装 GenUI SDK：

bash
cd genui-chat
npm install @opentiny/genui-sdk-vue

改造项目 ​

修改 src/main.js 或 src/main.ts ​

删除 Vue 初始化工程引入的样式：

js
import './assets/main.css'; 

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

修改 src/App.vue ​

使用 GenuiChat 组件：

vue
<script setup lang="ts">
import { GenuiChat } from '@opentiny/genui-sdk-vue';
</script>

<template>
  <GenuiChat />
</template>

<style>
body,
html {
  padding: 0;
  margin: 0;
}
#app {
  position: fixed;
  width: 100vw;
  height: 100vh;
}
.tiny-config-provider {
  height: 100%;
}
</style>

启动项目 ​

运行以下命令启动开发服务器：

bash
npm run dev

现在你可以在浏览器中看到 GenUI Chat 界面了！

配置 GenuiChat ​

你可以通过url 、 model 和 temperature 属性配置大模型参数：

vue
<script setup lang="ts">
import { ref } from 'vue'; 
import { GenuiChat } from '@opentiny/genui-sdk-vue';

const url = 'https://your-chat-backend/api'; 
const model = ref('deepseek-v3.2'); 
const temperature = ref(0.7); 
</script>

<template>
  <GenuiChat> 
  <GenuiChat :url="url" :model="model" :temperature="temperature" />  
</template>

通过 GenuiConfigProvider 配置主题 ​

你可以使用 GenuiConfigProvider 组件为 GenuiChat 配置主题。目前内置了三个主题。 三个主题共四个选项：

  • 'dark'：深色主题
  • 'lite'：清新主题
  • 'light'：浅色主题
  • 'auto'：自动跟随浏览器

默认值为 'light'。

基础用法 ​

使用 GenuiConfigProvider 包裹 GenuiChat 组件：

vue
<script setup lang="ts">
import { ref } from 'vue';
import { GenuiChat } from '@opentiny/genui-sdk-vue'; 
import { GenuiChat, GenuiConfigProvider } from '@opentiny/genui-sdk-vue'; 

const url = 'https://your-chat-backend/api';
const model = ref('deepseek-v3.2');
const temperature = ref(0.7);
</script>

<template>
  <GenuiConfigProvider theme="dark">
    <GenuiChat :url="url" :model="model" :temperature="temperature" />
  </GenuiConfigProvider>
</template>

配置空插槽 ​

为了让界面在没有对话的时候更加美观和友好，可以通过empty插槽配置欢迎语或推荐场景。

vue
<template>
  <GenuiConfigProvider theme="dark">
    <GenuiChat :url="url" :model="model" :temperature="temperature" />
    <GenuiChat :url="url" :model="model" :temperature="temperature">    
      <template #empty>
        <div class="empty-text">欢迎使用生成式UI</div>
      </template>
    </GenuiChat>
  </GenuiConfigProvider>
</template>

添加样式

css
.empty-text { 
  height: 100%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font-size: 30px; 
}

完整示例 ​

结合配置和主题的完整示例：

vue
<script setup lang="ts">
import { ref } from 'vue';
import { GenuiChat, GenuiConfigProvider } from '@opentiny/genui-sdk-vue';

const url = 'https://your-chat-backend/api';
const model = ref('deepseek-v3.2');
const temperature = ref(0.7);
const theme = ref<'dark' | 'lite' | 'light' | 'auto'>('dark');
</script>

<template>
  <GenuiConfigProvider :theme="theme">
    <GenuiChat :url="url" :model="model" :temperature="temperature">    
      <template #empty>
        <div class="empty-text">欢迎使用生成式UI</div>
      </template>
    </GenuiChat>
  </GenuiConfigProvider>
</template>

<style>
body,
html {
  padding: 0;
  margin: 0;
}
#app {
  position: fixed;
  width: 100vw;
  height: 100vh;
}
.tiny-config-provider {
  height: 100%;
}
.empty-text {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}
</style>

完成以上步骤后，即可开始体验生成式 UI 了 使用 Renderer 组件示例

其他相关文档 ​