官网 • Discord

Rapidpages

Rapidpages 是一个提示词（Prompt）优先的 IDE（集成开发环境），用于构建美观的页面。你只需描述你想要的 UI（用户界面），它便会使用你熟悉的技术栈生成该组件的代码（目前仅支持 React + Tailwind）。

https://github.com/rapidpages/rapidpages/assets/1308560/a7505448-bc0d-4035-9cff-39e8df5ecac9

快速开始

在本地运行 Rapidpages

git clone https://github.com/rapidpages/rapidpages.git && cd rapidpages

编辑 .env.example 文件以确保设置以下值：

• GITHUB_CLIENT_SECRET & GITHUB_CLIENT_ID: 你需要 创建一个 GitHub OAuth 应用 才能登录。对于 localhost，主页和授权回调 URL 分别使用 http://localhost:3000 和 http://localhost:3000/api/auth/callback/github。
• OPENAI_API_KEY: 你需要从 OpenAI 获取密钥。

在宿主机上运行 Rapidpages

创建数据库并运行应用程序

npm run db:push
npm run dev

在 Docker 上运行 Rapidpages

docker compose up -d
docker compose exec rapidpages npm run db:push

在云端运行 Rapidpages

你今天就可以开始在云端免费使用 Rapidpages。如果积分用完，欢迎随时在 Discord 上联系我们。

已知限制

目前，组件是一次性生成的。未来，此任务将分解为多个步骤，例如依赖检索和图标生成。这种多步骤流程将允许创建更复杂的 UI 元素。

许可证

更多信息请查看 LICENSE 文件。

Rapidpages 快速上手指南

简介

Rapidpages 是一个基于提示词（Prompt-first）的 IDE，用于构建美观的页面。你只需描述所需的 UI，它便会使用你熟悉的技术（目前仅支持 React + Tailwind）生成相应组件代码。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 系统要求：支持 Node.js 和 npm 的环境，或 Docker 环境。
• 前置依赖：
  • Git（用于克隆代码库）。
  • GitHub 账号（用于创建 OAuth 应用以登录）。
  • OpenAI 账号（用于获取 API Key）。

安装步骤

1. 克隆项目

git clone https://github.com/rapidpages/rapidpages.git && cd rapidpages

2. 配置环境变量

编辑 .env.example 文件，确保设置以下值：

• GITHUB_CLIENT_SECRET & GITHUB_CLIENT_ID：需要 创建 GitHub OAuth 应用。对于本地开发，主页地址设为 http://localhost:3000，授权回调 URL 设为 http://localhost:3000/api/auth/callback/github。
• OPENAI_API_KEY：从 OpenAI 获取密钥。

3. 运行应用

选择以下任一方式启动服务：

方式一：本地运行 创建数据库并启动应用：

npm run db:push
npm run dev

方式二：Docker 运行

docker compose up -d
docker compose exec rapidpages npm run db:push

基本使用

1. 启动服务后，在浏览器访问 http://localhost:3000。
2. 使用 GitHub 账号登录。
3. 在界面中描述您想要的 UI，系统将自动生成 React + Tailwind 代码。

云端选项：您也可以直接前往 Rapidpages 官网 免费使用云端版本。如果积分用完，可通过 Discord 联系团队。

注意事项

当前组件为一次性生成（One-shot），未来将优化为多步骤流程以支持更复杂的 UI 元素。