React组件生成器

UIG

AI驱动的React组件生成器，带有实时预览功能。

先决条件

• Node.js 18+
• npm

设置

1. 可选的 编辑 .env 并添加您的Anthropic API密钥：

ANTHROPIC_API_KEY=your-api-key-here

项目将在没有API密钥的情况下运行。将返回静态代码，而不是使用LLM生成组件。

2. 安装依赖项并初始化数据库

npm run setup

此命令将：

• 安装所有依赖项
• 生成Prisma客户端
• 运行数据库迁移

运行应用程序

发展

npm run dev

打开 http://localhost:3000

用法

1. 注册或以匿名用户身份继续
2. 描述你想在聊天中创建的React组件
3. 在实时预览中查看生成的组件
4. 切换到代码视图以查看和编辑生成的文件
5. 继续使用AI迭代以优化您的组件

特性

• 使用Claude生成AI驱动的组件
• 实时预览与热重新加载
• 虚拟文件系统（没有文件写入磁盘）
• 语法高亮显示和代码编辑器
• 注册用户的组件持久性
• 导出生成的代码

技术栈

• Next.js 15与应用路由器
• 反应19
• TypeScript
• 顺风CSS v4
• Prisma与SQLite
• 人猿克劳德AI
• Vercel AI SDK