VSCode集成Claude API实战：打造智能编程助手的完整方案

8次阅读

没有评论

共计 3599 个字符，预计需要花费 9 分钟才能阅读完成。

在典型开发场景中，程序员需要频繁执行以下操作：

复制代码片段到浏览器
打开 Claude 网页界面
粘贴并等待响应
将结果复制回 IDE

这种上下文切换导致：

平均每次交互耗时增加 15-20 秒
开发流被打断造成注意力分散
历史对话难以追溯

优势：
实现简单，HTTP 协议栈成熟
无状态特性适合短平快交互
调试工具丰富（Postman 等）
劣势：
长对话需维护上下文状态
流式响应实现复杂

优势：
天然支持双向通信
流式响应体验更佳
连接复用减少握手开销
劣势：
需要处理连接状态
消息顺序保证机制复杂
部分企业网络限制 WS 协议

// package.json 片段
{
  "activationEvents": ["onCommand:claude.query"],
  "contributes": {
    "commands": [{
      "command": "claude.query",
      "title": "Ask Claude",
      "category": "AI"
    }],
    "configuration": {
      "title": "Claude API",
      "properties": {
        "claude.apiKey": {
          "type": "string",
          "default": "","description":"OAuth2 client secret"
        }
      }
    }
  }
}

// auth.ts
import * as vscode from 'vscode';
import axios from 'axios';

const AUTH_URL = 'https://api.claude.ai/oauth/token';
const TOKEN_KEY = 'claude_credentials';

class AuthManager {
  private context: vscode.ExtensionContext;

  constructor(context: vscode.ExtensionContext) {this.context = context;}

  async getToken(): Promise<string> {const stored = this.context.globalState.get<{token:string,expires:number}>(TOKEN_KEY);

    if (stored && stored.expires > Date.now()) {return stored.token;}

    const newToken = await this.refreshToken();
    return newToken;
  }

  private async refreshToken(): Promise<string> {const config = vscode.workspace.getConfiguration('claude');
    const clientSecret = config.get<string>('apiKey');

    try {
      const response = await axios.post(AUTH_URL, {
        grant_type: 'client_credentials',
        client_secret: clientSecret
      });

      const expires = Date.now() + (response.data.expires_in * 1000);
      const credentials = {
        token: response.data.access_token,
        expires
      };

      await this.context.globalState.update(TOKEN_KEY, credentials);
      return credentials.token;
    } catch (error) {vscode.window.showErrorMessage('Authentication failed');
      throw error;
    }
  }
}

// client.ts
interface ClaudeMessage {
  role: 'user' | 'assistant';
  content: string;
}

class ClaudeClient {private messageHistory: ClaudeMessage[] = [];
  private MAX_HISTORY = 10;

  constructor(private auth: AuthManager) {}

  /**
   * 发送查询请求
   * @param prompt 用户输入
   * @param context 代码上下文
   */
  async query(prompt: string, context?: string): Promise<string> {
    try {const token = await this.auth.getToken();
      const messages = this.buildMessages(prompt, context);

      const response = await axios.post(
        'https://api.claude.ai/v1/complete',
        {messages},
        {headers: { Authorization: `Bearer ${token}` },
          timeout: 30000
        }
      );

      this.updateHistory({
        role: 'assistant',
        content: response.data.completion
      });

      return response.data.completion;
    } catch (error) {if (axios.isAxiosError(error)) {throw new Error(`API Error: ${error.response?.status}`);
      }
      throw error;
    }
  }

  private buildMessages(prompt: string, context?: string): ClaudeMessage[] {
    const userMessage: ClaudeMessage = {
      role: 'user',
      content: context ? `${context}\n\n${prompt}` : prompt
    };

    return [...this.messageHistory.slice(-this.MAX_HISTORY), userMessage];
  }

  private updateHistory(message: ClaudeMessage): void {this.messageHistory.push(message);
    if (this.messageHistory.length > this.MAX_HISTORY * 2) {this.messageHistory = this.messageHistory.slice(-this.MAX_HISTORY);
    }
  }
}

实现 LRU 缓存最近 5 次对话
使用 vscode.GlobalState 持久化存储
对代码片段进行 SHA256 哈希作为缓存键

// 流式响应示例
async function streamResponse(prompt: string) {
  const response = await axios.post(
    'https://api.claude.ai/v1/stream',
    {prompt},
    {
      responseType: 'stream',
      headers: {Authorization: `Bearer ${token}` }
    }
  );

  return new Promise<string>((resolve) => {
    let fullResponse = '';
    response.data.on('data', (chunk) => {const text = chunk.toString();
      fullResponse += text;
      vscode.window.setStatusBarMessage(text);
    });

    response.data.on('end', () => {resolve(fullResponse);
    });
  });
}