建立集成 DeepSeek R1 的 VS Code 扩展
本文中,我们将探索如何从零开始构建一个 VS Code 扩展,将 DeepSeek R1(一个低成本的开源推理模型)集成到我们的编辑器中,以创建一个自定义的 AI 助手。
DeepSeek R1 简介
DeepSeek R1 是一个功能强大的 AI 模型,因其卓越的性能和开源性质而广受欢迎。然而,使用网页界面会有一个隐患:您的提示、按键和数据将被发送到中国。为了避免这一点,我们可以本地运行该模型,从而消除对互联网连接的需求。
生成项目并构建扩展
要开始构建我们的扩展,我们需要使用官方的 VS Code 启动模板生成一个项目。运行 npx
命令将引导我们回答一系列问题,我们可以选择默认选项。
项目生成后,我们可以找到 extension.ts
文件,该文件导入了全局 VS Code 对象。此对象提供了对整个 VS Code API 的访问,使我们能够自定义编辑器。
自定义扩展
我们可以通过注册命令来开始自定义扩展。在本例中,我们将创建一个名为 "hom" 的命令,该命令在执行时显示错误消息。
测试和调试扩展
要测试和调试我们的扩展,我们可以使用调试器。运行调试器时,将打开一个新的 VS Code 窗口,其中安装了我们的扩展。我们可以打开命令面板并运行我们的命令以查看错误消息。
将 DeepSeek R1 集成到扩展中
要将 DeepSeek R1 集成到我们的扩展中,我们将使用一个名为 Ollama 的工具。Ollama 允许我们下载并运行开源 AI 模型,包括 DeepSeek R1。
创建聊天对话框的面板
我们将创建一个面板来包含聊天对话框,这将使我们能够直接在编辑器中与 DeepSeek R1 互动。
定义聊天对话框的 HTML
我们将定义聊天对话框的 HTML,其中包括一个文本区域和一个按钮。HTML 内的 JavaScript 代码将处理与 DeepSeek R1 的互动。
监听消息并流式传输响应
我们将监听用户的消息并流式传输 DeepSeek R1 的响应。这将使我们能够实时显示响应,逐句显示。
结论
在本文中,我们学习了如何从零开始构建一个 VS Code 扩展,将 DeepSeek R1 集成到我们的编辑器中,以创建一个自定义的 AI 助手。我们涵盖了生成项目、自定义扩展、测试和调试、集成 DeepSeek R1、创建聊天对话框的面板、定义 HTML 以及监听消息和流式传输响应的过程。
通过这些知识,你现在可以自己构建一个自定义的 AI 增强 IDE。如果你想更深入地学习编程,支持我的工作,考虑升级为 Fireship.io 的专业会员。你将获得各种基于项目的课程,并且最重要的是,你将建立一个基础,以理解中国的 AI 神秘高手在为你编写代码时实际在做什么。感谢阅读,我们下次见!