引言

Claude Artifact推出后，很多开发者都在产品里加上了HTML的预览功能，知名的有Poe里的Preview，但基于React的预览产品还比较少。

LlamaCoder简介

今天，Together AI的开发者推出了LlamaCoder，值得体验。

https://llamacoder.together.ai/

https://github.com/Nutlope/llamacoder

界面与技术栈

LlamaCoder的界面很美观，使用方式一目了然。

LlamaCoder左侧编辑框支持实时修改

技术栈如下

CodeSandbox集成

比较特别的是，它用到了Codesandbox。

CodeSandbox 是什么？CodeSandbox 是一个在线的代码编辑器和原型设计平台，专为 Web 应用开发而设计。它允许开发者在浏览器中编写代码、创建项目并即时预览结果，无需任何本地设置。

CodeSandbox 的主要特点：

1. 即时启动：无需复杂的环境配置，打开浏览器即可开始编码。
2. 实时预览：边写代码边看效果，大大提高开发效率。
3. 丰富的模板：提供多种流行框架的启动模板，如 React，Vue，Angular 等。
4. 协作功能：支持实时多人协作，非常适合远程团队和结对编程。
5. 版本控制：内置 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仓库预告了接下来的升级：

1. 为updateCode添加新路由，只发送最新生成的代码和修改请求
2. 通过仅从组件库（如shadcn）导入来生成更一致的应用程序
3. 尝试解决npm库的问题，研究Claude Artifacts和其他工具是如何处理的
4. 修复bug：如果用户编辑代码后进行更改，系统不使用编辑后的代码
5. 保存先前版本，使用户可以在生成的版本之间来回切换
6. 直接应用代码差异，而不是要求模型从头开始生成代码
7. 添加上传功能，如上传截图让系统以此为起点
8. 支持不同类型的应用程序（不仅限于React）和脚本，例如Python

结语

LlamaCoder作为一个新兴的AI编程工具，虽然在某些方面还不如Claude Artifact，但其开源特性和与CodeSandbox的集成为它带来了独特优势。

随着计划中的升级实施，相信LlamaCoder会变得更加强大和易用。

希望这些工具和技巧能帮助你实现更多创意想法。