v1.0 已发布 · 支持 React & Vue

AI 配置组件，
简单快速接入 AI

为你的应用一键接入 AI 配置能力，无需重复造轮子。

🚀 20+ 主流 AI 厂商 ⚡ 模型自动刷新 🔒 Key 安全存储 💾 配置持久化 🎨 支持深色模式

React Demo → Vue Demo → 立即使用 →

AI 配置

已连接

Provider

OpenAI

API Key

sk-••••••••••••••••••••J4xK

Model

gpt-4-turbo

AIConfigForm

✓ 20+ 内置 Provider · 支持自定义增删改覆盖
✓ API Key 安全存储 · 本地加密，永不上传
✓ 模型列表智能管理 · 离线静态 + 动态刷新
✓ 暗色模式 & 国际化 · 中英双语，主题跟随
✓ 丝滑交互动画 · 展开收起、悬停高亮、状态过渡

支持的 Provider

内置 20 个主流 AI 服务商，开箱即用

Provider	Base URL	API 格式	需要 Key	/models

为什么选择 AI Selector

专为现代 AI 应用设计的配置方案

零配置启动

npm install 后即可使用，无需繁琐的初始化配置。内置所有主流 AI 厂商的默认配置。

TypeScript 优先

完整的类型定义，享受代码提示与类型检查带来的开发体验提升。

Headless 架构

核心逻辑与 UI 解耦，你可以使用内置 UI 或完全自定义界面。

快速开始

三步完成接入

安装依赖

// React

                $ npm install
                @tombcato/ai-selector-react
              
// Vue

                $ npm install
                @tombcato/ai-selector-vue
              

引入组件与样式

// React
import { AIConfigForm } from '@tombcato/ai-selector-react';
import '@tombcato/ai-selector-react/style.css';
// Vue
import { AIConfigForm } from '@tombcato/ai-selector-vue';
                
import '@tombcato/ai-selector-vue/style.css';

使用组件 (直连模式)

<AIConfigForm
  proxyUrl="" // 留空即开启直连模式
  onSave={handleSave}
/>

AI 配置组件， 简单快速接入 AI