你是否曾为Cursor的智能对话和代码应用功能所折服?今天,我将为你介绍一款基于Avalonia开发的GPT客户端 - ChatBox,它不仅支持Agent功能,还能实现类似Cursor的代码应用能力。让我们一起来探索这个令人兴奋的开源项目吧!

强大功能演示:用AI打造微信对话界面

为了展示ChatBox的实力,我们将使用它配合GPT-4模型,从零开始创建一个vite + React + TypeScript的项目,并实现一个简单的微信对话界面。整个过程将展示AI如何帮助我们创建项目、编写代码、检查错误并进行修复。

第一步:项目初始化与基础功能实现

首先,我们向AI发出如下指令:

你是一个专业的react工程师
1. 请帮我在D:\\data下面创建一个名称webchat的vite react的ts项目模板
2. 请使用vscode打开这个项目
3. 请帮我对这个项目安装antd组件库
4. 请帮我npm i初始化项目依赖
5. 请基于以上的代码,实现一下功能
   - 一个基本微信界面
   - 需要有基本的左边好友对话列表
   - 输入框 发送按钮
   - 对话列表等功能

6. 然后对代码构建检查代码错误,修复错误

AI不仅完成了项目的创建和初始化,还帮我们实现了基础的微信界面功能。在遇到错误时,它还主动进行了修复:

第二步:界面优化

接下来,我们要求AI进一步优化界面布局:

请在优化界面布局

AI给出了详细的优化建议,包括使用Flexbox调整布局、调整区域大小比例、提升整体视觉设计等。

第三步:细节完善

最后,我们针对一些细节问题进行了优化:

默认的宽度body有问题,请优化,并且发送按钮应该要优化样式

AI不仅提供了优化后的App.css和App.tsx代码,还详细解释了每一处改动的原因。

经过这三轮优化后,我们得到了一个功能完整、界面美观的微信对话界面:

ChatBox的核心魔力:Cursor式的代码应用

ChatBox的一大亮点是它实现了类似Cursor的代码应用功能。当AI提供代码时,它会使用特定的Markdown格式:

用户只需点击"应用代码"按钮,ChatBox就会智能地将新代码与原有文件内容进行比对,并让AI决定如何最佳地修改现有文件。这一功能大大简化了代码集成过程,提高了开发效率。

开源的力量:加入ChatBox社区

ChatBox项目现已开源,我们诚挚邀请你加入这个充满创新的社区:

• GitHub仓库: https://github.com/AIDotNet/ChatBox
• QQ群: 961090189
• 微信: wk28u9123456789

通过探索源码,你可以深入了解ChatBox是如何实现Agent功能的。我们期待你的Star、贡献,以及在技术交流群中的精彩讨论!

结语

ChatBox为我们展示了AI辅助编程的无限可能。它不仅仅是一个Cursor的开源替代品,更是一个充满潜力的平台,等待着像你这样的开发者去探索和扩展。现在,就让我们一起加入ChatBox的旅程,共同推动AI编程助手的发展吧!