前端核弹：初试用 v0.dev 聊天做 UI

听说 <https://v0.dev> 改版了，加强了 ai 聊天的能力，昨天试着做了个 todo list 玩了一下，完成度相当高啊，而且可以定制化，比如我做的这个，就是用聊天的方式，让 ai 给我生成一个 ui 组件，然后我再稍微调整一下，就可以用了，下一步准备用 cursor 开发 api 和 oauth 。

## 先看看效果

<https://cf-next-todo.pages.dev/>

部署在 cloudflare ，目前不登录可以使用，数据保存在 `localStorage`。

[代码 Github Repo]( https://github.com/falconchen/cf-next-todo)


## 使用

- 创建项目
```
npm create cloudflare@latest -- cf-next-todo --framework=next
```

- 安装 v0.dev 聊天做好的 ui 组件：

可能有多个组件，所以可能执行需要多次:
比如我的是 `todo-list`，`regist-form`，`login-form`
```

npx shadcn@latest add "https://v0.dev/chat/b/组件 1token"
npx shadcn@latest add "https://v0.dev/chat/b/组件 2token"
npx shadcn@latest add "https://v0.dev/chat/b/组件 3token"
```

- 修改 src/app/page.js

```
import { TodoList } from '@/components/todo-list'

export default function Home() {
  return (
    <main className="container mx-auto px-4">
      <TodoList />
    </main>
  )
}
```

- 部署到 cloudflare
```
npm run deploy
```

请问 op 用的是免费版还是付费版？

我看 pricing 里说，免费版可以用 chat ，每个月 200 credits ，但是又说这些 credits Does not apply to v0.dev/chat

这个到底是免费用户能不能用 chat

结合 todo-list ，regist-form ，login-form 这三个组件的时候，需要改对应的代码的吧

这个基于 shadcn 的界面过于简单了，完成度也不高...下次建议发到程序员节点，而不是这个节点。