注：首发于8月3日，公众号：kate人不错
引言
Claude Artifact推出后，很多开发者都在产品里加上了HTML的预览功能，知名的有Poe里的Preview，但基于React的预览产品还比较少。
LlamaCoder简介
今天，Together AI的开发者推出了LlamaCoder，值得体验。
界面与技术栈
LlamaCoder的界面很美观，使用方式一目了然。
LlamaCoder左侧编辑框支持实时修改
技术栈如下
CodeSandbox集成
比较特别的是，它用到了Codesandbox。
CodeSandbox 是什么？CodeSandbox 是一个在线的代码编辑器和原型设计平台，专为 Web 应用开发而设计。它允许开发者在浏览器中编写代码、创建项目并即时预览结果，无需任何本地设置。
CodeSandbox 的主要特点：
- 即时启动：无需复杂的环境配置，打开浏览器即可开始编码。
- 实时预览：边写代码边看效果，大大提高开发效率。
- 丰富的模板：提供多种流行框架的启动模板，如 React，Vue，Angular 等。
- 协作功能：支持实时多人协作，非常适合远程团队和结对编程。
- 版本控制：内置 Git 支持，轻松管理代码版本。
LlamaCoder的优势
在使用Claude Artifact里遇到的一个很大问题是，可以下载的React项目文件一般是tsx，你需要和Claude要求，它才能给你更多相关文件，在本地运行比较麻烦。
在CodeSandbox可以直接将文件打包下载下来。
编程能力限制
首先，需要明白LlamaCoder只支持React项目，还不支持第三方组件的导入，不支持HTML生成，但是因为LlamaCoder是开源的，你可以自己调整。
如果你体验的时候，出现错误
Something went wrong.Cannot assign to read only property 'message' of object 'SyntaxError:/App.tsx: Unexpected token（1:0）
那是因为生成的结果里第一句出现了”I’m a React engineer, and I was asked to create a React component….”
这在Open Interpreter里使用一些模型，出现了“`导致运行不成功是一样的道理。
可以编辑代码，删除第一句话。
提示词策略
我很好奇它的提示词，简单问了下，它就直接告诉我了。
对应的文字：
我可以帮助您创建React组件，例如表单、导航栏、轮播图、弹窗、下拉菜单等等。请告诉我您需要什么样的组件，我将使用TypeScript和Tailwind类来创建它。
请提供组件的详细需求，例如：
* 组件的名称和用途
* 组件需要接收什么样的props
* 组件需要有什么样的状态和交互
* 组件需要什么样的样式和布局
我将根据您的需求创建一个完整的React组件，并确保它可以独立运行。
个人使用体验
环保小测试
儿童电脑界面
计算器
便利贴
关键流程
LlamaCoder使用了比Claude Artifact更优雅的图片占位符。
LlamaCoder vs Claude Artifact
体验之后，我个人感觉，受制于llama 3.1 405B的编程能力比Claude Artifact弱，上面体验的例子都没有在Claude Artifact里生成得好，鉴于它是开源项目，可以将模型改成Claude 3.5 Sonnet再运行，它和Codesandbox的结合，下载项目文件后，会让本地运行方便很多。
未来升级
LlamaCoder作者也在GitHub仓库预告了接下来的升级：
- 为updateCode添加新路由，只发送最新生成的代码和修改请求
- 通过仅从组件库（如shadcn）导入来生成更一致的应用程序
- 尝试解决npm库的问题，研究Claude Artifacts和其他工具是如何处理的
- 修复bug：如果用户编辑代码后进行更改，系统不使用编辑后的代码
- 保存先前版本，使用户可以在生成的版本之间来回切换
- 直接应用代码差异，而不是要求模型从头开始生成代码
- 添加上传功能，如上传截图让系统以此为起点
- 支持不同类型的应用程序（不仅限于React）和脚本，例如Python
结语
LlamaCoder作为一个新兴的AI编程工具，虽然在某些方面还不如Claude Artifact，但其开源特性和与CodeSandbox的集成为它带来了独特优势。
随着计划中的升级实施，相信LlamaCoder会变得更加强大和易用。
希望这些工具和技巧能帮助你实现更多创意想法。
别忘了分享你的作品，让我们一起在 AI 应用开发的道路上共同进步！
