coffee：使用AI构建和迭代React UI速度提高10倍


该项目的目的不仅仅是一个漂亮的演示，而是一个可以编写生产质量代码并与之交互的人体工学工具。

特征

  • 适用于任何 React 代码库，包括 Next.js、Remix 等。
  • 对于大多数标准 UI 组件来说足够可靠
  • 支持最简单的 prop 类型（数据、回调等）
  • 使用相同的 DX 编辑现有组件以及从头开始创建新组件
  • 生成干净、可维护的代码
  • 这就是人工智能辅助代码生成的未来发展方向

Coffee 使用 Docker 来确保它运行的任何代理代码都是完全隔离的。 Coffee目前是用Python实现的（但是你不需要接触Python来使用Coffee），并且代码生成代理相对简单。

当您运行 Coffee 时，它​​将侦听源目录中 js/jsx/ts/tsx 文件的更改，如果检测到 <Coffee> JSX 组件，它将开始它的魔力！

<Coffee parameter={parameter}>
  Here is where you put your prompt that Coffee will use to generate the first
  version of your desired component.

  This is the same type of prompt that you'd use with any LLM like ChatGPT, so
  feel free to get creative and apply your favorite prompt engineering tricks.

  Finally, you can also pass in any parameters you want from your parent component
  by simply adding them as demonstrated above.
</Coffee>


每次保存源文件时，Coffee 都会查看是否有任何 <Coffee> 组件需要酝酿（如果它们是新的，或者它们的道具或提示已更新）。对于代理找到的每个 <Coffee> 组件，Coffee 都会将您的父组件代码、任何现有的子组件代码、提示和任何自定义配置传递给 OpenAI 聊天完成 API，以便生成目标组件的新版本。

您的应用程序可能会在第一次保存后立即显示错误，因为 Coffee 代理尚未将 Coffee 组件写入其中。这是正常现象，在咖啡代理有时间冲泡该组件后就会消失。

在构建组件后对其进行迭代也同样简单：

<Coffee parameter={parameter}>
  To edit and update the brewed component, all you need to do is replace the prompt with
  your desired changes. For instance, "make the button background darker".
</Coffee>

目前酿造过程有点慢，但我们正在研究多种方法来使其速度显着加快。
最后，一旦您对酿造的组件感到满意，您可以将 pour="ComponentName.tsx" 属性添加到您的 <Coffee> 组件并保存文件，这将自动用生成的组件替换 <Coffee> 组件。

export function Example() {
  return (
    <Coffee
      title="Click Me"
      onClick={() => console.log('clicked')}
      pour="MyButton.tsx"
    >
      Whatever you prompted Coffee to generate
    </Coffee>
  )
}

在此示例中，我们添加了一个特殊的 pour 属性。当您保存此文件时，Coffee 会将此代码替换为以下内容：

import MyButton from './MyButton'

export function Example() {
  return (
    <MyButton title='Click Me' onClick={() => console.log('clicked')} />
  )
}

现在您拥有一个功能齐全、可重用的 React 组件，可以在生产中使用。

Coffee 最酷的部分是您可以像从头开始创建新组件一样轻松地编辑现有的 React 组件。