模型选择器

一个可搜索的命令面板,用于在聊天界面中选择 AI 模型。

Model Selector 组件提供了一个可搜索的命令面板界面,用于选择 AI 模型。它基于 cmdk 库构建,提供了一个带有搜索功能的键盘可导航界面。

使用 CLI 安装

AI Elements Vue
shadcn-vue CLI
npx ai-elements-vue@latest add model-selector

手动安装

将以下代码复制并粘贴到同一文件夹中。

ModelSelector.vue
ModelSelectorTrigger.vue
ModelSelectorContent.vue
ModelSelectorDialog.vue
ModelSelectorInput.vue
ModelSelectorList.vue
ModelSelectorEmpty.vue
ModelSelectorGroup.vue
ModelSelectorItem.vue
ModelSelectorShortcut.vue
ModelSelectorSeparator.vue
ModelSelectorLogo.vue
ModelSelectorLogoGroup.vue
ModelSelectorName.vue
index.ts
<script setup lang="ts">
import { Dialog } from '@repo/shadcn-vue/components/ui/dialog'
</script>

<template>
  <Dialog v-bind="$attrs">
    <slot />
  </Dialog>
</template>

特性

  • 可搜索界面,带有键盘导航
  • 跨模型名称的模糊搜索过滤
  • 按提供商分组的模型组织
  • 键盘快捷键支持
  • 空状态处理
  • 使用 Tailwind CSS 可自定义样式
  • 基于 cmdk 构建,具有出色的可访问性
  • 支持内联和对话框模式
  • 具有适当类型定义的 TypeScript 支持

Props

<ModelSelectorContent />

titlestring
'Model Selector'
模型选择器的标题。
classstring
应用于组件的额外类。

<ModelSelectorInput />

classstring
应用于组件的额外类。
providerstring
AI 提供商名称。支持主要提供商,如 "openai"、"anthropic"、"google"、"mistral" 等。
classstring
应用于组件的额外类。

<ModelSelectorLogoGroup />

classstring
应用于组件的额外类。

<ModelSelectorName />

classstring
应用于组件的额外类。