@chai-ui/vue (英语)
Chai UI for Vue:用于输入和输出表面的滴入组件
generative-media apps:一个即时作曲家,一个媒体对即时分析器,一个结果卡和一个
编辑卡片,其中人工智能作品由Fal.ai、OpenRouter、Vercel所建并连接
AI网关或你自己的引擎. 一切都被控制着: 你拥有国家
v-model,组件就让它.
这些组件与 @chai-ui/react
财务报告和审定财务报表 @chai-ui/svelte, (中文(简体) ),
同样的行为。 三层都是薄的
@chai-ui/core 并运行一个共用测试套房,包括WCAG 2.2 AA
检查(轴、键盘和焦点).
用它来建还是用编码剂来指向它? 读取
DESIGN.md (包裹中)用于使用规则,
和文档网站 llms.txt 页:1
aPI (英语). 打开密码盒 chai-ui.com/docs (英语)
在React、Vue和Svelte之间切换.
安装
pnpm add @chai-ui/vue @chai-ui/core @chai-ui/tokens
Vue 3.5或后期,包括了Nuxt. 无"柴"具体建设设置.
// main.ts: tokens first, then the component styles that read them
import "@chai-ui/tokens/css";
import "@chai-ui/vue/style.css";
您的字体
style.css 装入"机器人","材料设计"3的打字机. 如果你的应用有它
自定义字体, 导入 @chai-ui/vue/style-without-fonts.css 改为:
相同的样式,没有Roboto),并将组件指向您的字体:
:root { --chai-type-family-material: "Your Font", system-ui, sans-serif; }
黑暗主题
组件有一个黑暗的主题。 选入: 设置 data-chai-theme="dark"
打开 <html>,或者在任何元素上,以及其中的每个组件开关.
<html data-chai-theme="dark">
柴不照系统设置,因为你的应用决定了
其主题。 随之而来,凌驾于单一的颜色和黑暗的价值观之上
他们自己在
@chai-ui/tokens 读取。 。 。 .
快开始
<!-- App.vue -->
<template>
<ChaiProvider><Create /></ChaiProvider>
</template>
<!-- Create.vue -->
<script setup lang="ts">
import { computed, ref } from "vue";
import { Composer, ResultCard, createFalEngine, useComposer } from "@chai-ui/vue";
const engine = createFalEngine();
const value = ref("");
const { run, submit, cancel, enhance, enhancing } = useComposer({ engine });
const busy = computed(() => run.value?.results.some((r) => r.status === "queued" || r.status === "running") ?? false);
async function onEnhance(prompt: string) {
value.value = await enhance.value!(prompt);
}
</script>
<template>
<Composer v-model="value" :submitting="busy" :enhancing="enhancing" @submit="submit" @abort="cancel" @enhance="onEnhance" />
<ResultCard v-if="run" :results="run.results" :prompt="run.request.prompt" @action="() => {}" />
</template>
在建立供货商之前先试一下 别管了 engine 财务报告和审定财务报表
ChaiProvider: 然后每件事物都运行在内置模拟上,没有网络
电话和没有钥匙.
Vue 名称
道具是React的 有Vue的约定:
| 反应 | 阴道 |
|---|---|
value + 键 onChange | v-model |
x + 键 onXChange | v-model:x,比如说. v-model:attachments, (中文(简体) ), v-model:model-id, (中文(简体) ), v-model:regions |
onSubmit, (中文(简体) ), onAction, (中文(简体) ), onEnhance, (中文(简体) ), onAbort | @submit, (中文(简体) ), @action, (中文(简体) ), @enhance, (中文(简体) ), @abort |
useComposer 编号 : useMediaAnalyzer 钩子 | 可堆叠返回 refs; 通过更改选项的获取器 |
<EditCard {...edit} /> | edit'一个接一个地块,与 @update:active-version 财务报告和审定财务报表 @update:regions |
SidePanel是因为 open + 键 onOpenChange, (中文(简体) ), logo 财务报告和审定财务报表 footer | v-model:open,则 #logo 财务报告和审定财务报表 #footer 槽数(footer 也获取文本) |
作曲器芯片或菜单项 icon | 构成部分 |
有些控件只用收听器显示, 如 React: 优化按钮
与 @enhance中,请停止 @abort模式菜单中 @update:model-id。 。 。 .
锁上酒吧? 设定 menu-placement="above" 对于固定在下方的栏
屏幕,或 "below" 一个固定到顶端, 所以每个菜单打开
输入页面。 左出,这是 "auto":每个菜单都符合它的位置.
包裹里有什么
Composer: 即时、附件、使用大小写、模型和方正度 菜单,包含建议的模型,快速优化,自动选择路由, 停止并重试.MediaAnalyzer+ 键useMediaAnalyzer: 媒体在,a 即时发射.ResultCard: 一个提示的结果, 页面,有选票,重试, 下载、分享、细节、流出文本和质量检查标记(来自 您的后端,或者选入法官:useComposer({ judgeModel, judgeChecks })) (中文(简体) ).- 分析:
@event每个组成部分都报告 人会看到,一个ChaiEvent每个分析工具:@event="(e) => posthog.capture(e.name, e.properties)"。 。 。 . EditCard: 标明有自己指示的区域,以及每个区域 编辑为新版本.SidePanel: 页面旁边的面板, 有作曲家及其 答案,关于页面的问题(可选入)page-context,显示为 可移动芯片)或其他任何东西,带有即时提示,推取或重叠,以及 无论是哪一方。 和React一样的道具,用v-model:open· ;#logo财务报告和审定财务报表#footer插槽 。 见反应 README的"一个侧面板"用于细节.useComposer, (中文(简体) ),ChaiProvider,则Toggle, (中文(简体) ),SearchMenu财务报告和审定财务报表Pagination组件.- 引擎和类型来自
@chai-ui/core,再出口.
您的 API 密钥留在您的服务器上
引擎调用您服务器上的一条路由, 它添加了密钥 。 在 Nuxt 中 :
// server/api/chai/[...path].ts
import { createChaiHandler } from "@chai-ui/core/server";
const chai = createChaiHandler();
export default defineEventHandler((event) => chai.handle(toWebRequest(event)));
准备 FAL_KEY, (中文(简体) ), OPENROUTER_API_KEY 或者说 AI_GATEWAY_API_KEY 在您的服务器上。 其他服务器,
财务报告和审定财务报表 authorize 财务报告和审定财务报表 allowedModels 用于生产,在
@chai-ui/core 读取。 。 。 .
没有服务器路由
在没有服务器路径的桌面应用程序( Tauri, Electron) 中, 写入引擎
他们都跑到你的应用程序的后端 传过来
useComposer({ engine: desktopEngine }) 转至
<ChaiProvider :reasoning-engine="desktopEngine">编辑
@chai-ui/core 读取
有个Tauri的例子,语音输入,还有Stop在那里做什么.