尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

VSCode中配置Claude Code与DeepSeek API实现图文编程助手

VSCode中配置Claude Code与DeepSeek API实现图文编程助手 1. 从“封号”到“续命”一个开发者的工具链重构之路最近两个月我的两个 Max 20 账号接连被封这感觉就像你刚装修好的房子还没住热乎房东就通知你明天必须搬走。对于重度依赖 AI 辅助编程的我来说这不仅仅是失去了一个工具更是打乱了整个工作流和思考习惯。在短暂的“戒断反应”后我开始寻找替代方案最终将目光锁定在了 VSCode 插件Claude Code和国产大模型DeepSeek的 API 上。经过一番折腾这套组合拳用起来异常丝滑代码补全、解释、重构、Debug 样样精通响应速度和理解深度都让我惊喜。但很快一个不大不小的问题浮出水面Claude Code 默认配置下无法将图片内容作为上下文发送给 DeepSeek 模型。这意味着当我截取一段报错截图、或者想分析 UI 设计稿时这个强大的助手就“瞎”了。这显然不行今天这篇文章我就来分享一下如何打通这“最后一公里”让 Claude Code DeepSeek 的组合真正实现“图文并茂”的智能辅助。简单来说我们即将搭建的这套环境其核心价值在于用一个完全免费、高度可定制、且性能强悍的本地化 AI 编程助手替代那些可能不稳定或有使用限制的云端服务。它特别适合像我一样对代码质量有要求、又希望工作流不被外部因素打断的开发者、技术博主或学生。整个过程涉及 VSCode 插件配置、API 密钥管理以及一个关键的中转服务设置我会把每一步的原理、踩过的坑和最终验证有效的方案都详细拆解给你。2. Claude Code 插件不只是 Claude 的客户端很多人第一次听说 Claude Code会以为它是 Anthropic 公司官方出的 Claude 插件。其实不然它是一个由社区开发者维护的开源项目最大的特点就是“模型无关”和“高度可配置”。你可以把它理解为一个功能强大的、运行在你本机 VSCode 里的 AI 助手前端而后端对接哪个模型完全由你决定。2.1 为什么选择 Claude Code 而非其他插件在 VSCode 的插件市场里AI 编程助手插件层出不穷比如 GitHub Copilot、Codeium、Tabnine 等。我选择 Claude Code 主要基于以下几点考量完全免费与开源Claude Code 本身不收取任何费用其代码托管在 GitHub 上你可以审查它的所有行为这对于处理敏感的代码和 API Key 来说至关重要。相比之下Copilot 等是订阅制服务。极致的灵活性它支持通过配置自定义的 OpenAI API 兼容端点。这意味着任何提供了 OpenAI 格式 API 的模型服务无论是官方的 GPT、开源的 Llama 通过 Ollama 暴露的接口还是像 DeepSeek、智谱 AI 这样的国内服务只要它们遵循或兼容 OpenAI 的 API 规范都能被 Claude Code 调用。这打破了模型供应商的绑定。贴近原生的交互体验它的交互方式设计得非常“VSCode”右键菜单、命令面板 (CtrlShiftP)、内联对话窗用起来没有割裂感。特别是它的“解释代码”、“生成测试”、“查找 Bug”等预设技能Skill能极大提升效率。安装过程非常简单在 VSCode 的扩展商店搜索 “Claude Code” 即可。安装后你会在侧边栏看到一个狐狸头像的图标点开它真正的配置之旅才刚刚开始。2.2 初始配置与第一个“坑”API 端点的选择安装好 Claude Code 后点击插件图标它会提示你进行配置。核心配置项在插件的设置里VSCode 设置 - 扩展 - Claude Code。这里你会遇到第一个关键选择API Provider。Claude Code 默认提供了几个选项如OpenAI,Anthropic,Azure等。但我们的目标是 DeepSeek它并不在默认列表中。这时你需要选择Custom或OpenAI。这里我强烈建议选择OpenAI。原因在于DeepSeek 的 API 在设计上高度兼容 OpenAI 的 v1 版本接口规范。选择OpenAI这个 ProviderClaude Code 会使用标准的 OpenAI 库来发起请求兼容性最好。选择OpenAI后需要填写以下几个核心配置API Key: 这里填入你在 DeepSeek 开放平台申请的 API Key。Model: 填入 DeepSeek 支持的模型名称例如deepseek-chat。这是最容易出错的地方之一一定要去 DeepSeek 的官方文档确认最新的模型名。Base URL:这是整个配置的灵魂所在也是第一个大坑的源头。你不能直接填写 DeepSeek 的官方端点如https://api.deepseek.com。因为 Claude Code 在构建请求时对于“上传文件”这类多部分表单数据multipart/form-data的处理可能与 DeepSeek 官方接口的预期有细微差别直接对接大概率会收到400 Bad Request或415 Unsupported Media Type错误具体表现就是图片无法识别。那么Base URL到底该填什么答案是一个兼容 OpenAI 文件上传格式的 API 中转服务地址。这个服务的作用是“翻译”它接收 Claude Code 发出的、符合某种格式的文件上传请求然后将其转换成 DeepSeek 官方 API 能理解的格式再将 DeepSeek 的回复原样返回。接下来我们就来搭建这个关键的“翻译官”。3. 搭建 API 中转站解决图片识别的关键桥梁为了解决图片上传的兼容性问题我们需要一个中间层服务。社区里已经有现成的优秀开源项目来解决这个问题例如one-api或针对特定模型的API 转发代理。这里我以部署一个简单的、专用于 DeepSeek 文件上传转发的 Node.js 服务为例来揭示其中的原理和步骤。你也可以使用更成熟的一键部署方案。3.1 核心原理请求格式的“翻译”我们先来看看问题出在哪。当你在 Claude Code 中拖入一张图片时Claude Code 会试图构造一个类似 OpenAI 的createMessage请求其中图片可能以base64编码嵌入在content中或者作为multipart/form-data的附件上传。而 DeepSeek 的官方/chat/completions接口对于图片的处理方式可能有自己的要求例如可能需要特定的type字段指明是image_url并且对图片格式、大小有规定。我们的中转服务需要做以下几件事拦截 Claude Code 发往Base URL的请求。解析请求体特别是处理其中的图片数据。将图片数据转换成 DeepSeek API 要求的格式例如将base64数据转换为可访问的临时 URL或者重新组装multipart请求。将转换后的请求转发至真正的 DeepSeek 官方端点 (https://api.deepseek.com)。将 DeepSeek 的响应原封不动地返回给 Claude Code。3.2 实战部署一个简单的 Express 转发服务以下是一个极度简化的示例用于说明原理。在生产环境中你需要考虑错误处理、日志、鉴权、并发限制等。首先确保你的系统安装了 Node.js ( 18) 和 npm。创建项目并初始化mkdir deepseek-proxy cd deepseek-proxy npm init -y npm install express axios multer form-data创建主服务文件server.jsconst express require(express); const axios require(axios); const multer require(multer); const FormData require(form-data); const fs require(fs); const path require(path); const app express(); const port 3000; // 你可以改用 8080 或其他端口 // 配置 multer 处理内存存储对于小图片或磁盘存储 const storage multer.memoryStorage(); const upload multer({ storage: storage }); // 你的 DeepSeek API Key可以从环境变量读取更安全 const DEEPSEEK_API_KEY 你的-DeepSeek-API-Key; const DEEPSEEK_BASE_URL https://api.deepseek.com; // 处理 Claude Code 发来的 /v1/chat/completions 请求 app.post(/v1/chat/completions, upload.any(), async (req, res) { try { console.log(收到请求内容类型, req.headers[content-type]); // 构建转发给 DeepSeek 的请求头 const headers { Authorization: Bearer ${DEEPSEEK_API_KEY}, Content-Type: application/json, // 最终发给 DeepSeek 的是 JSON }; let deepseekRequestBody {}; // 场景1请求体是 JSON可能包含 base64 图片 if (req.headers[content-type]?.includes(application/json)) { deepseekRequestBody req.body; // 这里可能需要解析 req.body.messages将其中可能的 base64 图片格式转换为 DeepSeek 接受的格式 // 例如OpenAI 格式可能是 { type: image_url, image_url: { url: data:image/png;base64,... } } // DeepSeek 可能需要 { type: image_url, image_url: { url: https://temp.url } }这就需要你先上传 base64 到一个临时图床 console.log(收到JSON请求体直接转发需处理图片转换); } // 场景2请求体是 multipart/form-dataClaude Code 上传文件常用 else if (req.headers[content-type]?.includes(multipart/form-data)) { // req.body 包含文本字段req.files 包含文件 const messages JSON.parse(req.body.messages || []); const model req.body.model || deepseek-chat; // 处理上传的文件图片 const processedMessages await Promise.all(messages.map(async (msg) { if (msg.content Array.isArray(msg.content)) { const newContent []; for (const item of msg.content) { if (item.type image_url) { // 如果已经是 URL 格式保留 newContent.push(item); } // 这里是一个关键转换逻辑示例 // 假设 Claude Code 用了一种特殊方式传文件我们需要找到对应的文件对象 // 实际情况更复杂需要根据 Claude Code 实际发送的数据结构来解析 console.log(发现图片内容项需转换:, item); // 简化处理暂时跳过复杂转换假设能直接使用 newContent.push(item); } return { ...msg, content: newContent }; } return msg; })); deepseekRequestBody { model: model, messages: processedMessages, stream: req.body.stream true || req.body.stream true, // ... 其他参数 }; console.log(转换后的请求体:, JSON.stringify(deepseekRequestBody, null, 2)); } // 转发请求到 DeepSeek const response await axios.post( ${DEEPSEEK_BASE_URL}/chat/completions, deepseekRequestBody, { headers: headers, responseType: stream } // 保持流式响应 ); // 将 DeepSeek 的响应头如 Content-Type和流式数据传回给 Claude Code res.set(response.headers); response.data.pipe(res); } catch (error) { console.error(转发请求时出错:, error.message); if (error.response) { // 将上游错误信息返回 console.error(DeepSeek 响应错误:, error.response.status, error.response.data); res.status(error.response.status).json(error.response.data); } else { res.status(500).json({ error: { message: Internal proxy server error } }); } } }); app.listen(port, () { console.log(DeepSeek API 中转服务运行在 http://localhost:${port}); console.log(请在 Claude Code 的 Base URL 中填写: http://localhost:${port}/v1); });注意以上代码是一个高度简化的原理演示直接使用可能无法工作。实际开发中你需要精确分析 Claude Code 发出的请求格式和 DeepSeek 接受的格式。一个更可行的方案是使用社区已经验证过的开源代理项目。使用成熟方案lobe-chat 的 API 代理与其自己从头造轮子不如使用现成的。例如lobe-chat项目提供了一个功能完善的模型服务代理。你可以部署它的后端并将其配置为支持 DeepSeek 和文件上传。访问lobe-chat的 GitHub 仓库按照文档部署后端服务支持 Docker 一键部署。在它的模型配置中添加 DeepSeek 作为一个自定义的模型供应商填写正确的Endpoint和API Key。该后端服务会自动处理不同前端包括 Claude Code的请求适配。部署成功后你会得到一个代理地址如https://your-proxy.com。此时在 Claude Code 的Base URL中填入https://your-proxy.comAPI Key可以填写你在代理后端设置的密钥或者留空如果代理后端已经配置了 DeepSeek 的密钥。无论采用自建还是现成方案目标都是得到一个稳定的、能正确处理图片上传的 API 端点。将这个端点地址填入 Claude Code 的Base URL就完成了最关键的一步。4. DeepSeek API 的配置与模型选择解决了通道问题我们来看看“燃料”本身——DeepSeek API。它的配置相对直接但也有一些细节需要注意。4.1 获取 API Key 与计费须知首先你需要前往 DeepSeek 开放平台注册账号并获取 API Key。过程与其他云服务类似。需要特别注意 DeepSeek 的计费策略它为新用户提供了免费的额度这对于个人开发者和小规模使用来说非常友好。务必在后台查看你的余额和使用情况避免超额。它的计费单位通常是按 Token 数量输入输出计算价格相比国际主流模型有显著优势。4.2 模型选择V4 Flash 还是 V4 Pro在 Claude Code 的Model配置栏你需要填写具体的模型名称。根据网络热词和官方文档DeepSeek 主要推荐两个模型deepseek-v4-flash响应速度极快适合对延迟要求高的场景如代码补全、实时对话。在大多数编程辅助任务上表现已经足够出色性价比高。deepseek-v4-pro能力更强的旗舰模型在复杂推理、长篇代码生成和深度分析上表现更优但速度可能稍慢价格也更高。我的选择建议是从deepseek-v4-flash开始。对于日常的代码解释、补全、小范围重构和 Debug它的速度和准确性已经能带来非常好的体验。只有在处理非常复杂的系统设计、需要模型进行长链条推理时再考虑切换到v4-pro。你可以在 Claude Code 的设置里随时切换模型名进行测试。4.3 常见 API 错误与排查在配置过程中你可能会遇到一些 API 错误热词里也提到了不少API error: 400 type must be in [enabled, disabled, auto]这通常是请求体中某个参数的枚举值不正确。检查你的中转服务或 Claude Code 是否传递了非法的type值。确保转发给 DeepSeek 的请求体格式完全符合其 API 文档。API error: 400 this models maximum context length is ...上下文长度超限。DeepSeek 模型有固定的上下文窗口如 128K Tokens。如果你在对话中积累了过多的代码和历史消息就会触发这个错误。解决方案是在 Claude Code 中开启“新会话”或者手动清理一些过往消息。有些中转服务或客户端支持自动截断或总结历史。API error: Connection closed mid-response连接在响应过程中被关闭。这可能是网络不稳定、代理服务器超时、或者 DeepSeek 服务端偶尔的问题。可以尝试重试或者检查你的中转服务是否有超时设置过短。Unable to connect to API (ECONNRESET)无法连接到 API连接被重置。检查你的Base URL是否正确网络是否能通以及本地运行的代理服务是否在监听指定端口。大部分错误都可以通过“检查请求格式、核对 API Key、确认模型名、查看网络连通性”这个流程来定位。5. 终极测试与优化让图片对话成为日常当一切配置就绪是时候进行终极测试了。打开 Claude Code 的聊天面板尝试拖入一张图片。你可以选择代码报错截图将终端里的错误信息截图拖进去问它“这个错误是什么意思如何解决”UI 设计稿或网页截图拖入一个界面截图问它“用 HTML/CSS 实现这个布局的大致思路是什么”图表或架构图拖入一张系统架构图让它解释其中的组件关系。如果配置正确Claude Code 会将图片上传到你的中转服务中转服务将其转换后发给 DeepSeekDeepSeek 的视觉模型会理解图片内容并将分析结果通过对话返回。你会看到它的回复中包含了对你图片内容的准确描述和分析。5.1 性能与稳定性调优用上之后还可以做一些优化来提升体验设置上下文管理在 Claude Code 的设置中可以配置最大上下文长度和历史消息数量。避免无限制积累导致 API 调用缓慢或超限。利用 Skills技能Claude Code 预置了很多实用的技能比如“Explain this code”解释代码、“Find bugs”找 Bug、“Write tests”写测试。针对图片你可以自定义或寻找社区分享的、用于分析图片的 Skill一键触发对当前截图的分析。网络延迟如果你自建的中转服务部署在海外而你在国内可能会感到延迟。考虑将服务部署在离你更近的区域或者使用国内云服务商。使用lobe-chat等成熟方案时选择亚洲或国内的服务器节点部署。成本监控定期查看 DeepSeek 平台的使用量和费用。虽然便宜但养成监控习惯总是好的。5.2 我踩过的“坑”与心得Base URL 的路径陷阱最初我在Base URL里填的是http://localhost:3000结果一直报错。后来才明白Claude Code 会在你提供的 Base URL 后面自动拼接/v1/chat/completions。如果你的代理服务监听在根路径就需要填http://localhost:3000/v1。这个细节卡了我将近一个小时。图片格式与大小不是所有图片格式都能被完美支持。常见的 PNG、JPG 没问题但一些罕见的格式或者过大的图片如 10MB 以上的截图可能会导致处理失败。建议先压缩截图。流式响应中断在早期测试中偶尔会遇到回答到一半突然停止的情况。这通常是网络波动或代理服务缓冲区设置问题。确保你的中转服务正确处理了stream: true参数并将数据流完整地传递回来。不要泄露 API Key自建中转服务时千万不要把 DeepSeek 的 API Key 硬编码在客户端代码里。应该通过环境变量或配置文件来管理并且确保你的代理服务本身有基本的访问控制比如简单的 Token 验证防止被他人滥用。回过头看从两个主力账号被封的窘迫到摸索出这套完全自主可控的解决方案整个过程虽然有些折腾但收获巨大。最大的感受是依赖单一商业服务是有风险的而开源生态和 API 的标准化给了我们强大的灵活性和掌控力。Claude Code DeepSeek 这个组合不仅在功能上满足了我日常开发的需求在成本和隐私方面也更令人安心。现在我可以毫无顾忌地对着代码截图提问这种“图文并茂”的编程体验终于又回来了。如果你也受困于类似的问题或者单纯想尝试一个更自由、更强大的本地化 AI 编程助手不妨按照上面的思路动手试试。
返回列表