【原生 JS】支持加密的浏览器端 BYOK AI SDK，助力 Vibe Coding

VibeAI v5.4.0：一行代码实现工业级 BYOK 架构，纯前端 AI 开发新范式

为什么你需要 VibeAI？

在实际开发中，我们发现轻量级AI应用 （如英语学习助手、内容分类工具）常面临三个困境：

厂商锁定 ：低代码平台提供前端 callLLM() 接口，但强制绑定后端/特定供应商（Vendor Lock-in），切换模型成为幻想。
密钥裸奔 ：API Key 直接存入 localStorage，对一切浏览器插件几乎不设防。
后端复杂度陷阱：为调用 API 需部署服务器、处理 CORS、维护数据库，小项目变成大工程。

在我们实际开发的英语作文双评系统中，使用VibeAI后，AI集成相关代码（HTML+JS）从200+行减少到110行，且无需后端支持。

🔐 技术剖析：Web Crypto API 的深度实践

浏览器原生API即可保证安全。VibeAI 直接使用 Web Crypto API 实现加密，避免引入额外依赖。

核心加密流程

javascript 复制代码

    // class VibeSecurity
    static async deriveKey(password) {
      const mat = await crypto.subtle.importKey(
        "raw", 
        new TextEncoder().encode(password),
        "PBKDF2", 
        false, 
        ["deriveKey"]
      );
      return crypto.subtle.deriveKey(
        { name: "PBKDF2", salt: new TextEncoder().encode("vaic-v5-salt"), iterations: 100000, hash: "SHA-256" },
        mat,
        { name: "AES-GCM", length: 256 },
        false,
        ["encrypt", "decrypt"]
      );
    }

10 万次 PBKDF2 迭代：显著增加暴力破解成本
256 位 AES-GCM：提供完整性验证
内存级解密：密钥仅在用户输入 Master Password 后短暂存在于内存，页面关闭自动清除

⚠️ 安全边界声明 ：本方案无法防止 用户在公共设备使用弱密码（如123456），也无法防护 恶意脚本劫持内存或 XSS 攻击------这与所有前端方案一致。开发者需自行确保 Master Password 强度。

代码对比：VibeAI vs 自定义实现

项目	VibeAI v5.4	自定义实现（裸奔版）	价值
AI集成代码	110行	210行	减少心智负担
模型选择界面	✅ 自动获取+美观列表	❌ 仅能输入model code	提升用户体验
安全机制	✅ 加密存储	❌ 无	增强安全性
流式响应处理	✅ 多类型支持（thought/content/usage）	⚠️ 需手写判断	增强一致性
智能诊断	✅ URL/Key 格式自动检测	❌ 报错只能反复尝试	提升用户体验
配置迁移	✅ 一键导出/导入	❌ 无	方便平台迁移

VibeAI 将安全网关 （加密/配置管理）和AI逻辑 （流式处理）封装，使开发者聚焦业务逻辑。模型选择界面（含自动获取模型列表）是自定义实现无法简单复现的。

即便只实现基础功能 ，自定义方案仍需额外 100+ 行代码 ；而要达到 VibeAI 的安全性和灵活性水平，则往往需要 500+ 行代码。

AI 辅助编码：你需要提供什么文件？

在使用VibeAI进行AI辅助编码时，只需提供 README.md：

https://unpkg.com/vibe-ai-c@5.4.0/README.md

🛠️ 完整使用指南

1. 引入必要的依赖

html 复制代码

    <!-- 添加到 <head> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.1/github-markdown.min.css">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

2. 初始化 SDK

html 复制代码

    <script type="module">
      import { vibeAI } from 'https://unpkg.com/vibe-ai-c@5.4.0';
      
      // 初始化配置中心（UI自带加密逻辑）
      vibeAI.init({ setupBtnId: 'setup-btn' });
    </script>

3. 绑定模型选择器

html 复制代码

    <select id="model-select"></select>
    <script>
      vibeAI.bindSelect('model-select');
    </script>

4. 处理AI流式响应

html 复制代码

    async function chat() {
      const inst = vibeAI.getInstance('model-select');
      const stream = inst.streamChat({
        messages: [{ role: 'user', content: 'Hello' }]
      });

      for await (const chunk of stream) {
        if (chunk.type === 'thought') {
          console.log('思考中:', chunk.delta);
        }
        if (chunk.type === 'content') {
          updateUI(chunk.delta); // 渲染Markdown内容
        }
      }
    }

🌐 完整实现示例

html 复制代码

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>VibeAI 示例</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.1/github-markdown.min.css">
      <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    </head>
    <body>
      <!-- 配置按钮 -->
      <button id="setup-btn">⚙️ 配置</button>
      
      <!-- 模型选择 -->
      <select id="model-select"></select>
      
      <!-- 输入框 -->
      <input type="text" id="user-input" placeholder="输入你的问题...">
      <button id="send-btn">发送</button>
      
      <!-- AI响应区域 -->
      <div id="ai-response" class="markdown-body"></div>

      <script type="module">
        import { vibeAI } from 'https://unpkg.com/vibe-ai-c@5.4.0';

        vibeAI.init({ setupBtnId: 'setup-btn' });
        vibeAI.bindSelect('model-select');

        const sendBtn = document.getElementById('send-btn');
        const userInput = document.getElementById('user-input');
        const aiResponse = document.getElementById('ai-response');

        async function handleSend() {
          const content = userInput.value.trim();
          if (!content) return;
          
          // 清空输入框
          userInput.value = '';
          
          // 渲染用户消息
          aiResponse.innerHTML += `<div class="user-message">你: ${content}</div>`; // 注意真实开发应防止 XSS
          
          // 渲染AI响应容器
          aiResponse.innerHTML += `<div class="ai-message"><div class="thought"></div><div class="content"></div></div>`;
          
          const aiDiv = aiResponse.lastElementChild;
          const thoughtDiv = aiDiv.querySelector('.thought');
          const contentDiv = aiDiv.querySelector('.content');
          
          try {
            const inst = vibeAI.getInstance('model-select');
            const stream = inst.streamChat({
              messages: [{ role: 'user', content }]
            });
            
            for await (const chunk of stream) {
              if (chunk.type === 'thought') {
                thoughtDiv.classList.remove('hidden');
                thoughtDiv.innerText += chunk.delta;
              }
              if (chunk.type === 'content') {
                contentDiv.innerHTML = marked.parse(contentDiv.innerHTML + chunk.delta);
              }
            }
          } catch (e) {
            contentDiv.innerHTML = `<span class="error">错误: ${e.message}</span>`;
          }
        }

        sendBtn.addEventListener('click', handleSend);
        userInput.addEventListener('keypress', (e) => {
          if (e.key === 'Enter') handleSend();
        });
      </script>
    </body>
    </html>

💎 为什么是 VibeAI v5.4？

零依赖 ：28KB ESM 模块，不依赖 React/Vue
强安全性：Web Crypto API + 10 万次 PBKDF2
用户体验：模型列表自动获取、智能诊断
配置迁移：一键导出/导入加密配置

界面展示与落地实例：VibeCompare --- 英语作文双评仲裁

VibeCompare v5.4

我们随 SDK 提供了一个 VibeCompare 的开源案例。以下仅以英语作文双评为例，只要修改 System Prompt 即可复用至多场景。

该应用流程如下：

输入一篇英语作文。
两个模型共同给出评价。
按照一级至四级标题给文本"分块"，供相同流程/话题下的对比。
随时可调用第三个模型作为"裁判"，针对 A 和 B 的分歧点进行深度总结，告诉你哪种改法更合适。

这种"双核+裁判"的逻辑，只需调用 VibeAI 的 getInstance 即可省去至少四分之一的 AI 管理代码，无需手写复杂的异步编排。

软件界面一览

选择模型只需要将 <select> 绑定到 SDK 上。

VibeAI SDK 相关界面一览

加密存储、多供应商、导入导出，样样俱备

📌 总结：VibeAI 是什么？

VibeAI v5.4.0 是一个纯前端AI SDK，它通过Web Crypto API实现工业级加密，使开发者可以：

零后端实现多模型对比与仲裁

安全存储 API Key，避免裸奔

一行代码集成，110 行高级代码替代 210 行自定义的低级缺陷逻辑

智能诊断配置错误，减少调试时间

适合场景 ：英语学习、内容分类、AI 仲裁等无需后端的轻量级AI应用。

SDK 项目地址

代码地址 ：github.com/cup113/vibe...

CDN 引用 ：https://unpkg.com/vibe-ai-c@5.4.0