技术速递|5 分钟用 GitHub Copilot Agent Mode 创建 Copilot Chat 应用

作者:卢建晖 - 微软高级云技术布道师

排版:Alan Wang

上周 GitHub Copilot 发布了全新的 Agent Mode 模式,我们可以通过 GitHub Copilot Agent Mode 完成新应用的创建,或是根据新的需求在原有项目上添加功能。您可以通过 Visual Studio Code Insiders(1.98) 体验该功能。

开通 GitHub Copilot Agent Mode,需要通过 Visual Studio Code Insiders 设置开通 GitHub Copilot Agent Mode
在这里插入图片描述
之后您可以通过 Edit with GitHub Copilot,选择 Agent Mode 以及对应的模型。现在 GitHub Copilot Agent Mode 支持 GPT-4o、Claude 3.5 Sonnic,以及 Gemini。建议考虑 GPT-4o,因为它支持图片上传。
在这里插入图片描述
完成相关设置后,我们进入 Copilot 应用开发阶段。我们希望有一个 Facebook Messenger 风格的 Copilot Chat,所以我们找一张 Facebook Messenger 的截图作为需求。如图:
在这里插入图片描述
我们在 GitHub Copilot Mode + GPT-4o 场景下,把该图片作为附件添加进 GitHub Copilot 聊天窗。
在这里插入图片描述
输入以下 Prompt

"Generate a Python Flask application based on the content of the image"

可以看到,GitHub Copilot Agent Mode 协助我们生成了 Python + Flask 应用,我们可以检查生成文件并接受。

在这里插入图片描述
然后按照提示运行,我们会发现缺少元素、样式以及布局错误等。
在这里插入图片描述
我们可以通过 Prompt 进行调整,例如:

•	“Adjust page content based on image content, style, and layout”
•	“The chat window height and width are adaptive to the browser size, and the user picture is removed”

通过聊天我们可以成功得到满意的界面。接下来我们希望 AI 能根据现有代码进行调整。这是最基础的前端,当然,我们也可以根据自己的需要进行综合调整。
在这里插入图片描述
完成前端设定后,我们希望结合 GitHub Models 中的 o3-mini 来作为后端,但 GitHub Copilot 无法正确使用 Azure AI Inference SDK 调用 GitHub Models,我们可以用 Agent Mode 引用关联文档,提出新的需求并提供参考代码. 我把 GitHub Models 的 Python 参考代码放进项目文件夹内。
在这里插入图片描述
通过 Agent Mode 引用,使用以下 Prompt 进行添加:

"According to #file:demo.py Use GitHub Models as the backend to provide an API and call it using JavaScript"

这时,Agent Mode 会帮你在相应代码中添加相应的 GitHub Models 调用代码,我们只需接受即可。
在这里插入图片描述
注意:如果你希望获取 GITHUB_TOKEN,请通过 Get API Key 获取。

我们尝试运行一下,一个 Copilot Chat 应用就完成了。
在这里插入图片描述
GitHub Copilot Agent Mode 让 GitHub Copilot 用户能够更加快捷、便利地完成应用,也让非计算机用户能够更高效地完成原型或者应用构建。“人人能编程”的梦想不远矣。

资源

  1. 免费使用 GitHub Copilot

  2. 了解 GitHub Models

  3. 博客:GitHub Copilot: The agent awakens

### GitHub CopilotGitHub Copilot Chat 功能对比 #### GitHub Copilot 特性概述 GitHub Copilot 主要作为开发者的智能编码助手,在编写代码时提供实时建议和支持。通过分析上下文中的现有代码片段,Copilot 能够预测并自动生成后续代码行或整个函数实现[^1]。 - **编程辅助**:自动补全代码、推荐变量名以及语法结构。 - **多语言支持**:适用于多种主流编程语言如 Python, JavaScript 等。 - **IDE 集成**:紧密集成于 Visual Studio Code 编辑器内工作。 #### GitHub Copilot Chat 特性概述 相比之下,GitHub Copilot Chat 则更侧重于对话式的交互体验,允许开发者以自然语言形式提问有关技术难题或者寻求特定功能的帮助。它不仅限于简单的代码提示,而是能够理解复杂的需求描述,并给出详细的解决方案说明。 - **互动交流**:基于聊天界面进行双向沟通。 - **问题解答**:解释概念、调试指导及最佳实践分享。 - **跨平台适用**:除了 VSCode 外还可在其他环境中使用,比如 Web 浏览器。 #### 关键区别总结表 | 对比维度 | GitHub Copilot | GitHub Copilot Chat | |-----------| | 核心应用场景 | 实际编码过程中的即时帮助 | 技术咨询和疑难杂症处理 | | 用户交互方式 | 图形化编辑环境内的弹窗显示 | 类似 IM 的消息框 | | 输出内容特点 | 完整的代码段 | 文字性的解析加上可能附带少量示范代码 | ```python # 示例展示两者如何协同工作 def example_function(): # 使用 GitHub Copilot 获取代码建议 result = some_complex_operation() # 假设这里得到了来自 Copilot 的具体实现 while True: user_input = input("遇到任何问题可以询问 GitHub Copilot Chat:") if "help" in user_input.lower(): print("正在联系 GitHub Copilot Chat 寻求进一步协助...") break elif not user_input.strip(): continue else: try: eval(user_input) except Exception as e: print(f"执行失败: {e}. 可尝试向 GitHub Copilot Chat 请求帮助.") ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值