# prompt2Project

**Repository Path**: zxb4467/prompt2Project

## Basic Information

- **Project Name**: prompt2Project
- **Description**: AI智能生成前端框架,自定义选择组件、AI辅助生成新增的组件的建议
- **Primary Language**: Python
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2020-08-26
- **Last Updated**: 2025-11-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# prompt2Project · 智能项目(前端)生成器

prompt2Project is a full-stack toolkit that helps teams describe desired frontend projects in natural language and receive a ready-to-run React or Vue starter. The system combines AI-assisted requirement analysis, curated templates, and project scaffolding to streamline internal application bootstrapping.

prompt2Project（智能项目生成器）是一套全栈工具链，支持团队用自然语言描述目标前端项目，并快速获得可运行的 React 或 Vue 启动工程。系统将 AI 需求分析、精选模板与脚手架流程结合，显著缩短内部项目的启动时间。

## Highlights · 项目亮点

- Multi-step project configuration wizard with AI-powered component recommendations（多步骤配置向导，结合 AI 推荐基础与扩展组件）
- FastAPI backend that orchestrates requirement analysis, template rendering, and project packaging（基于 FastAPI 的后端，负责需求分析、模板渲染与项目打包）
- React + Vite frontend showcasing generated layouts, menu previews, and download flows（React + Vite 前端界面，支持生成结果预览与项目下载）
- Extensible template system supporting React and Vue starter files, router setup, and environment configs（可扩展模板体系，覆盖 React/Vue 组件、路由及环境配置）
- Automated project zipping with download endpoints for frictionless handoff（自动化打包与下载接口，便于一键交付项目骨架）

## Project Structure · 项目结构

- `backend/` FastAPI service, generation engine, and project models（FastAPI 服务端、项目生成引擎及数据模型）
- `my-react-app/` React TypeScript UI for configuring and downloading generated projects（用户配置与下载生成项目的 React TS 前端；生成器支持 React 与 Vue）
- `templates/` Tokenized code templates copied into new projects (React, Vue, env files, CSS)（带占位符的代码模板，涵盖 React、Vue、环境文件等）
- `scripts/` Utility automation for analysis, menu generation, and dynamic project management（自动化脚本，负责分析、菜单生成与项目管理）
- `generated_projects/` Output directory for completed scaffolds (ignored from version control)（生成项目的输出目录，版本库忽略）

## Getting Started · 快速开始

### Prerequisites · 环境要求

- Python 3.11+
- Node.js 18+ with pnpm
- Docker（可选，用于容器部署）
- Moonshot 与 DeepSeek API 密钥（启用 AI 推荐时需要）

### Backend Setup · 后端启动

```bash
cd backend
python -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install -r requirements.txt
uvicorn app.main:app --host 0.0.0.0 --port 8000 --reload
```

Environment variables live in `backend/.env` (ignored by git). Copy `backend/.env.example` if provided and populate credentials locally.

环境变量保存在 `backend/.env`（已被 Git 忽略），可复制 `backend/.env.example` 后在本地补充真实配置。

### Frontend Setup · 前端启动

```bash
cd my-react-app
pnpm install
pnpm dev
```

The React app runs on Vite’s default port (`5173`). Update `VITE_API_BASE_URL` in `.env` to point at your backend if it is not proxied.

前端默认在 `5173` 端口运行，如未使用代理请在 `.env` 中配置 `VITE_API_BASE_URL` 指向后端。

## Key Workflows · 核心流程

- **Fetch Metadata:** Frontend dispatches `fetchProjectTypes`, `fetchUIFrameworks`, and `fetchBaseComponents` to populate dropdown options（前端调用 `fetchProjectTypes`、`fetchUIFrameworks`、`fetchBaseComponents` 填充下拉选项）
- **Requirement Analysis:** `analyzeRequirements` thunk calls the backend, which forwards requests to configured LLM APIs and returns suggested components（`analyzeRequirements` 异步任务会调用后端，再转发至配置的 LLM 接口获取组件推荐）
- **Project Generation:** `POST /api/v1/generate-project` assembles template variables, copies files under `templates/code_templates`, writes `.env.*`, and returns filesystem location（`POST /api/v1/generate-project` 组装模板变量、复制模板文件、生成 `.env.*` 并返回生成目录）
- **Download Project:** `GET /api/v1/download-project/{name}` packages the generated directory into a zip for user download（`GET /api/v1/download-project/{name}` 将生成目录打包为 zip 供下载）

## Template Tokens · 模板占位符

Template files under `templates/code_templates/**` use `{{TOKEN}}` placeholders along with block conditionals such as `{{#DEV_PROXY}}...{{/DEV_PROXY}}`. During generation the backend fills tokens from `ProjectConfig` values, enabling conditional routing, proxy, and layout setup.

`templates/code_templates/**` 下的模板使用 `{{TOKEN}}` 及 `{{#DEV_PROXY}}...{{/DEV_PROXY}}` 等条件块，生成时由后端根据 `ProjectConfig` 自动替换，实现路由、代理、布局等条件化配置。

## Development Tips · 开发提示

- Keep `.env` and `.env.docker` out of version control; use `.env.example` artifacts for documented defaults（`.env`、`.env.docker` 仅保留在本地，版本库中使用 `.env.example` 说明默认变量）
- Run `pnpm lint` / `pnpm test` in `my-react-app` and `pytest` in `backend` before raising PRs（提交前请运行前端 `pnpm lint` / `pnpm test` 以及后端 `pytest`）
- When extending templates, prefer ASCII encoding and document new tokens in `templates/code_templates/README.md`（扩展模板时保持 ASCII 编码，并在 `templates/code_templates/README.md` 中记录新占位符）
- Use the OpenSpec process (`openspec/`) for significant feature proposals to keep specs and implementation aligned（涉及重大功能时请使用 `openspec/` 流程保持规格与实现一致）

## Deployment · 部署说明

The repository ships with `docker-compose.yml` and individual `Dockerfile`s for both backend and frontend (`my-react-app`). Update runtime environment variables via your CI/CD secret manager, mount generated artifacts as needed, and expose ports 8000 (API) and 80/5173 (frontend) depending on deployment strategy.

仓库提供 `docker-compose.yml` 及前后端独立 `Dockerfile`。请在 CI/CD 中配置运行时环境变量，按需挂载生成文件，并根据部署策略开放 8000（API）与 80/5173（前端）端口。

## License · 许可

This project is licensed under the Apache License 2.0. Refer to `LICENSE` for full terms.

本项目采用 Apache License 2.0 许可，完整条款请参考 `LICENSE` 文件。