Gemini CLI Web 实现

最新推荐文章于 2025-12-27 19:25:02 发布

原创

最新推荐文章于 2025-12-27 19:25:02 发布 · 1.1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端

Gemini CLI Web简化版：基于Core包的智能Web扩展架构详解

项目地址：https://github.com/lovelyqun/gemini-cli-web.git

前言

在AI应用开发领域，如何将强大的命令行工具转化为易用的Web应用是一个常见挑战。本文将深入分析 packages/web-simple 的实现，这是一个基于 Gemini CLI Core 包构建的Web扩展，展示了如何优雅地复用现有核心逻辑，快速构建功能完整的Web AI助手。

整体架构设计

核心设计理念

web-simple 采用了"薄Web层 + 重核心复用"的架构设计：

┌─────────────────────────────────────────┐
│                前端层                    │
│  ┌─────────────┐  ┌─────────────────┐   │
│  │  HTML/CSS   │  │  WebSocket客户端 │   │
│  └─────────────┘  └─────────────────┘   │
└─────────────────────────────────────────┘
                    │
                    │ WebSocket/HTTP
                    ▼
┌─────────────────────────────────────────┐
│              Express服务层               │
│  ┌─────────────┐  ┌─────────────────┐   │
│  │  REST API   │  │  WebSocket服务   │   │
│  └─────────────┘  └─────────────────┘   │
└─────────────────────────────────────────┘
                    │
                    │ 直接调用
                    ▼
┌─────────────────────────────────────────┐
│          @google/gemini-cli-core        │
│  ┌─────────────┐  ┌─────────────────┐   │
│  │   Config    │  │  GeminiClient   │   │
│  │ ToolRegistry│  │  工具执行引擎    │   │
│  └─────────────┘  └─────────────────┘   │
└─────────────────────────────────────────┘

这种设计的优势在于：

最大化代码复用：Web层仅负责协议转换，所有AI逻辑都复用CLI的core包
功能一致性：Web版本与CLI版本具有完全相同的AI能力
易于维护：核心功能更新自动惠及Web版本

核心代码实现

1. 服务器初始化与配置集成

服务器启动时，最关键的步骤是初始化Gemini配置：

async function initializeGeminiConfig() {
   
   
    try {
   
   
        const cwdDir = process.env.CWD || process.cwd();
        
        // 检查环境变量
        if (!process.env.GEMINI_API_KEY) {
   
   
            throw new Error('GEMINI_API_KEY 环境变量未设置');
        }

        // 创建会话ID
        currentSessionId = generateSessionId();
        
        // 创建文件发现服务
        const fileService = new FileDiscoveryService(cwdDir);

        // 核心配置参数
        const configParams = {
   
   
            sessionId: currentSessionId,
            embeddingModel: DEFAULT_GEMINI_EMBEDDING_MODEL,
            targetDir: cwdDir,
            debugMode: process.env.DEBUG === 'true',
            // 启用核心工具集合
            coreTools: ['LSTool','ReadFileTool','ReadManyFilesTool', 
                       'WriteFileTool', 'EditTool', 'GrepTool','GlobTool', 
                       'ShellTool','WebFetchTool','WebSearchTool','MemoryTool'],
            approvalMode: ApprovalMode.YOLO, // Web环境自动执行
            fileDiscoveryService: fileService,
            model: process.env.GEMINI_MODEL || DEFAULT_GEMINI_MODEL,
            maxSessionTurns: 100,
            noBrowser: true
        };

        // 创建并初始化配置实例
        geminiConfig = new Config(configParams);
        await geminiConfig.initialize();
        await geminiConfig.refreshAuth(AuthType.USE_GEMINI);

        return true;
    } catch (error) {
   
   
        console.error('❌ 初始化Gemini配置失败:', error.message);
        return false;
    }
}

核心要点分析：

直接复用Config类：通过 @google/gemini-cli-core 的 Config 类，Web应用获得了与CLI完全相同的配置能力
工具集成：通过 coreTools 参数启用文件操作、Shell执行、Web搜索等工具
适配Web环境：设置 approvalMode: ApprovalMode.YOLO 实现自动执行，避免Web环境中的交互提示

2. 实时流式响应处理

Web版本的核心亮点是支持实时流式响应，让用户能看到AI的思考过程：

async function handleWebSocketChat(ws, connectionId, data) {
   
   
    const {
   
    message } = data;
    
    // 获取核心组件
    const client = geminiConfig.getGeminiClient();
    const toolRegistry = await geminiConfig.getToolRegistry();
    
    try {
   
   
        const messageContent = [{
   
    text: message }];
        const prompt_id = `ws-${
     
     connectionId.slice(0, 8)}-${
     
     Date