ai-web-generator

ai-web-generator is a full‑stack AI‑powered web application generator. Users describe the app they want in natural language, refine it through chat, and the system generates runnable web applications (HTML, multi‑file sites, or full Vue projects) that can be previewed, deployed, and downloaded.

Features

End‑User Features

• Create applications from a natural language prompt
• Chat‑driven refinement with streaming responses
• Live preview of the generated website
• Personal app list with search and pagination
• Edit app name and continue refinement
• Delete apps you no longer need
• Deploy apps and get a public URL
• Download generated code as a ZIP archive

Admin Features

• Global app list with filtering and search
• Edit any app (name, cover, priority, etc.)
• Delete any app
• Mark apps as featured for highlighting

AI & Workflow Features

• Multiple generation modes:
  • Single HTML page
  • Multi‑file static site (HTML/CSS/JS)
  • Full Vue 3 project (Vite + Vue Router + Pinia)
• LangChain4j integration for chat, streaming, and tools
• LangGraph4j workflows for multi‑step generation:
  • Image collection
  • Prompt enhancement
  • Code generation
  • Code quality checks
  • Project building
• Prompt safety guardrails and per‑user rate limiting

Integrations & Infrastructure

• MySQL (via MyBatis‑Flex) for apps, users, and history
• Redis for caching and chat/session storage
• Selenium + WebDriverManager for website screenshots
• Oracle Cloud Infrastructure Object Storage for screenshots/assets
• Pexels API integration for stock images

Architecture Overview

Backend (Spring Boot)

• Java 21 / Spring Boot 3 application
• Entry point: com.intelijake.aiwebgenerator.AiWebGeneratorApplication
• Key packages:
  • controller – REST APIs (apps, users, chat history, static resources, health)
  • ai – AI services, factories, guardrails, tools
  • langgraph4j – code generation workflows and graph nodes
  • core – code parsing, saving, and project building
  • service, mapper, model – domain logic and persistence
  • generator – DB‑driven code generator (MyBatis‑Flex)
  • config – Redis, LLM models, OCI object storage, etc.

The backend exposes REST endpoints and Server‑Sent Events (SSE) for streaming code generation. Generated code is written under a configurable output root directory and served for preview, deployment, and download.

Frontend (Vue 3 + Vite)

• Located in ai-web-generator-frontend/
• Vue 3 + TypeScript SPA with Ant Design Vue
• Uses Axios for HTTP, Pinia for state, Vue Router for routing
• Consumes backend APIs under /api and SSE endpoint /api/app/chat/gen/code
• Detailed frontend docs: ai-web-generator-frontend/README.md

Tech Stack

Backend

• Java 21, Spring Boot 3
• MyBatis‑Flex + MySQL
• Redis (cache + session)
• LangChain4j (chat, streaming, image models, routing models)
• LangGraph4j (workflow orchestration)
• springdoc‑openapi + Knife4j
• Selenium, WebDriverManager
• OCI Java SDK (Object Storage)

Frontend

• Vue 3 + TypeScript
• Vite
• Ant Design Vue
• Vue Router 4, Pinia
• Axios, ESLint, Prettier

Project Structure (simplified)

.
├── pom.xml
├── src/
│   ├── main/java/com/intelijake/aiwebgenerator/
│   │   ├── AiWebGeneratorApplication.java
│   │   ├── controller/
│   │   ├── ai/
│   │   ├── langgraph4j/
│   │   ├── core/
│   │   ├── service/, mapper/, model/
│   │   └── generator/
│   └── main/resources/
│       ├── application.yml
│       ├── application-local.yml
│       └── prompt/
└── ai-web-generator-frontend/
    ├── package.json
    └── README.md

Getting Started

Prerequisites

• Java 21+
• Maven 3.8+
• Node.js 18+ (20+ recommended)
• MySQL database (e.g. ai_web_generator)
• Redis instance
• LLM / API keys (OpenAI or compatible, Gemini if used, Pexels, OCI)

Configure the Backend

Configuration files live under src/main/resources/:

• application.yml – base config
• application-local.yml – local development profile (default spring.profiles.active=local)

Update, at minimum:

• spring.datasource.* – MySQL URL, username, password
• spring.data.redis.* – Redis host/port/db/password
• langchain4j.* – API keys and model names
• oci.object-storage.* – region, namespace, bucket, config file, profile
• pexels.api-key – Pexels API key

Security note: Move secrets out of versioned YAML in your own setup (environment variables or a secrets manager).

Run the Backend

From the repository root:

mvn spring-boot:run

With the local profile, the backend typically runs at:

• Base URL: http://localhost:8124
• API base path: http://localhost:8124/api

Run the Frontend

From the frontend directory:

cd ai-web-generator-frontend
npm install
npm run dev

The Vite dev server runs at http://localhost:5173 and proxies /api to http://localhost:8124.

Open the App

• Frontend UI: http://localhost:5173
• Backend API (example): http://localhost:8124/api/health (if configured)

Usage Overview

1. Go to the home page.
2. Enter a prompt describing the application you want.
3. The app is created and you are redirected to the chat page.
4. Chat with the AI; code is generated and streamed via SSE.
5. Preview updates live, deploy the app, or download the code as a ZIP.

Development

Backend

mvn test

You can also run individual tests (for example, AiCodeGenServiceTest) via your IDE or Maven.

Frontend

cd ai-web-generator-frontend
npm run build   # type check, compile, minify
npm run lint    # lint and auto-fix
npm run format  # format source

License

This project is open‑source under the MIT License.

• Copyright (c) 2024–2025 wh01sjake
• See the LICENSE file for the full text.

Contributing

1. Fork this repository.
2. Create a feature branch: git checkout -b feature/my-feature.
3. Commit your changes with clear messages.
4. Push your branch and open a Pull Request.