Maquette Maker

A web application that generates complete HTML/CSS/JavaScript applications from natural language prompts using the DeepSeek-V3 model. Built with React, TypeScript, and Vite.

Features

• AI-Powered Generation: Describe what you want, get a working web application
• Live Preview: See your generated application rendered in real-time
• Iterative Refinement: Modify and improve your app through conversation
• One-Click Deploy: Deploy directly to Hugging Face Spaces
• Remix Support: Fork and modify existing deployed applications
• Multiple AI Providers: Support for various inference providers (Novita, SambaNova, Fireworks, etc.)

Tech Stack

Frontend:

• React 18 with TypeScript
• Vite for build tooling
• TailwindCSS for styling

Backend:

• Node.js with Express
• Hugging Face Inference API
• Hugging Face Hub SDK for deployments

AI Model:

• DeepSeek-V3-0324

Installation

git clone [email protected]:floflo777/maquette-maker.git
cd maquette-maker
npm install

Configuration

Create a .env file based on .env.example:

cp .env.example .env

Required environment variables:

Variable	Description
DEFAULT_HF_TOKEN	Hugging Face API token with inference-api and write-repos scopes
OAUTH_CLIENT_ID	(Optional) HF OAuth client ID for user authentication
OAUTH_CLIENT_SECRET	(Optional) HF OAuth client secret
REDIRECT_URI	(Optional) OAuth callback URL

Development

Start the development server:

npm run dev

The application will be available at http://localhost:5173.

Production

Build for production:

npm run build
node server.js

Or use Docker:

docker build -t maquette-maker .
docker run -p 3000:3000 --env-file .env maquette-maker

Usage

1. Enter a description of the application you want to create
2. The AI generates HTML/CSS/JavaScript code
3. Preview the result in the live preview panel
4. Refine by adding more instructions
5. Deploy to Hugging Face Spaces when satisfied

API Endpoints

Endpoint	Method	Description
/api/ask-ai	POST	Generate or modify code from a prompt
/api/deploy	POST	Deploy the application to HF Spaces
/api/remix/:user/:repo	GET	Load an existing Space for remixing
/api/@me	GET	Get current authenticated user

Project Structure

maquette-maker/
├── src/
│   ├── components/
│   │   ├── App.tsx           # Main application component
│   │   ├── ask-ai/           # Prompt input component
│   │   ├── preview/          # Live preview iframe
│   │   ├── header/           # Navigation header
│   │   └── settings/         # Provider settings
│   └── main.tsx
├── utils/
│   ├── providers.js          # AI provider configurations
│   ├── consts.ts             # Default HTML template
│   └── types.ts              # TypeScript definitions
├── middlewares/
├── server.js                 # Express backend
├── Dockerfile
└── vite.config.ts

License

MIT