System Requirements Document for earthy-bronze

1. Introduction

PROJECT NAME: YOURAI STUDIO

PROJECT TYPE:

Independent AI-powered website and application builder.

Build a complete, fully functional, public AI website builder platform inspired by the concept of Hercules.app, but with completely original branding, design, source code, and architecture.

• Public platform available worldwide.

==================================================

1. CORE REQUIREMENTS

2. USER DASHBOARD

==================================================

Create a professional dashboard with:

==================================================

19. DEVELOPMENT PLAN

==================================================

Build the platform in the following phases.

2. System Overview

==================================================

==================================================

6. AI DEVELOPMENT WORKSPACE

Build a professional three-panel workspace.

The final result must be a fully independent AI application builder platform that I own and can operate without depending on Hercules.app.

Project name: earthy-bronze.

3. Functional Requirements

MAIN OBJECTIVE:

The platform must allow users to create websites and web applications by describing their ideas in natural language.

• User registration and login.

• User dashboard.

• Project management.

• AI development workspace.

• Settings and account management.

• Admin dashboard.

==================================================

3. LANDING PAGE

==================================================

Create a professional homepage containing:

• Original platform logo.

• Hero section.

• Main headline:

  "Turn Your Ideas Into Real Applications With AI"

• Large prompt input.

• Build My App button.

• Product demonstration.

• Features section.

• How It Works section.

• Pricing section explaining the free usage philosophy.

• FAQ.

• Footer.

==================================================

4. USER AUTHENTICATION

Implement:

• Email registration.

• Login.

• Password reset.

• Google authentication.

• Secure user sessions.

• User profiles.

• Account settings.

• Role-based permissions.

Create a professional dashboard with:

• Create New Project.

Create a professional dashboard with:

• Recent Projects.

• All Projects.

• Search Projects.

• Project thumbnails.

• Project history.

• Last modified date.

Create a professional dashboard with:

• Rename projects.

Create a professional dashboard with:

• Duplicate projects.

• Delete projects.

• Export projects.

Save all project information persistently.

LEFT PANEL:

• AI chat interface.

• Conversation history.

• Prompt input.

• Build mode.

• Plan mode.

• Debug mode.

• File upload.

• Image upload.

CENTER PANEL:

• Live application preview.

• Desktop preview.

• Tablet preview.

• Mobile preview.

• Refresh preview.

• Full-screen preview.

RIGHT PANEL:

• File explorer.

• Code editor.

• HTML files.

• CSS files.

• JavaScript files.

• TypeScript files.

• React components.

• Create files.

• Delete files.

• Rename files.

• Edit files.

7. AI GENERATION ENGINE

==================================================

This is the most important part.

Build a real AI development agent.

The AI must:

• Understand natural language.

• Analyze user requirements.

• Create application plans.

• Generate complete source code.

• Create frontend interfaces.

• Create backend logic.

• Generate database schemas.

• Install dependencies safely.

• Modify existing projects.

• Debug errors.

• Fix broken code.

• Run application builds.

• Preserve existing functionality.

• Explain changes to users.

• Stream responses in real time.

The AI must support continuous development through conversation.

Users should be able to say:

"Add a login page."

"Change the homepage design."

"Create an admin dashboard."

"Fix this error."

"Add a database."

"Make the application responsive."

The AI should modify the actual project files.

LOCAL AI:

• Ollama.

• Locally hosted open-source models.

CLOUD AI:

• vLLM.

• OpenAI-compatible APIs.

• Other configurable AI providers.

Required features:

• Provider selection.

• Model selection.

• API configuration.

• Streaming responses.

• Provider fallback.

• Error handling.

• Usage monitoring.

• Model availability checks.

9. AI MODEL MANAGEMENT

Create an AI settings page.

Allow administrators to:

• Add AI providers.

Allow the administrator to configure the default AI provider.

Allow users to connect their own AI provider when desired.

• Configure Ollama.

• Configure vLLM.

• Add model endpoints.

• Select default models.

• Test connections.

• Enable or disable providers.

• Monitor model availability.

• AI providers.

• Application settings.

• Deployment records.

Implement:

• Secure authentication.

Implement:

• Database migrations.

Implement:

• Persistent project storage.

Implement:

• Automatic saving.

Implement:

• File storage.

Implement:

• Version history.

Implement:

• Access control.

Each user must only access their own private projects.

==================================================

11. SECURE CODE EXECUTION

Create an isolated execution environment for every project.

Use Docker or another suitable sandbox technology.

• Isolated project environments.

Features:

• Restricted terminal access.

• Resource limits.

• CPU limits.

• Memory limits.

• Execution timeouts.

• Network restrictions.

• Dependency installation.

• Build execution.

• Development server.

• Live preview.

12. LIVE PREVIEW

==================================================

Implement a real-time preview system.

When the AI changes project files:

• Save changes.

• Rebuild when necessary.

• Refresh the preview.

• Display build errors.

• Allow users to test their applications.

Support desktop, tablet, and mobile preview modes.

13. PROJECT EXPORT

==================================================

Allow users to:

• Download complete projects as ZIP.

• Export source code.

• Download project assets.

• Run projects locally.

• Deploy projects independently.

• Access project documentation.

Users must retain ownership of their source code.

14. PUBLISHING SYSTEM

==================================================

Implement:

• Application publishing.

• Unique project URLs.

• Custom domain configuration.

• Deployment management.

• Update published applications.

• Deployment history.

15. ADMIN DASHBOARD

==================================================

Create a complete administrator panel.

Include:

• User management.

• AI provider management.

• Model configuration.

• Server monitoring.

• Storage monitoring.

16. FREE USAGE PHILOSOPHY

==================================================

Allow unlimited project creation.

17. SECURITY

==================================================

Implement:

• Secure authentication.

17. SECURITY

==================================================

Implement:

• Password hashing.

17. SECURITY

==================================================

Implement:

• Authorization.

17. SECURITY

==================================================

Implement:

• API protection.

17. SECURITY

==================================================

Implement:

• Rate limiting.

17. SECURITY

==================================================

Implement:

• Input validation.

17. SECURITY

==================================================

Implement:

• Secure file uploads.

PHASE 3:

AI chat interface and AI Gateway.

PHASE 4:

Actual AI code generation and file management.

PHASE 5:

Monaco Editor and live preview.

PHASE 6:

Ollama local AI integration.

PHASE 7:

vLLM cloud AI integration.

PHASE 8:

Secure code execution and sandboxing.

PHASE 9:

Project export and publishing.

4. User Personas

The platform serves two active human roles. This is not a closed persona catalog; additional roles may emerge as requirements are elaborated.

Builder journey. Register or sign in (email or Google), then describe the idea in the AI chat. The agent analyzes requirements, produces an application plan, and generates complete frontend interfaces and backend logic, streaming responses with provider fallback and error handling. The Builder reviews the plan, switches between Build, Plan and Debug modes as needed, and refines through follow-up prompts. On completion they export the project and run or deploy it independently, retaining ownership of the source code.

Administrator journey. Sign in with administrator permissions, open AI settings, add AI providers, and set the default provider that Builders use unless they connect their own. Monitor usage and model availability through the administrator panel.

Supporting actors (not personas). The AI generation engine and the configured AI providers act on behalf of these roles; they hold no independent goals or permissions.

5. Core User Flows

5.1 Register, sign in and manage the account

Actors: Visitor, registered user, administrator. Trigger: Visitor wants a private workspace.

1. Visitor registers with email or uses Google authentication; sessions are secured.
2. If credentials are lost, the user requests a password reset and completes it.
3. Signed-in user edits profile and account settings.
4. Role-based permissions determine what the user can reach; administrators additionally reach AI model management.

Result: Authenticated session scoped to the user's own private projects. Failure/recovery: Invalid credentials or expired sessions return the user to sign-in without exposing project data.

5.2 Discover the platform from the landing page

Actors: Visitor. Trigger: Visitor opens the homepage.

1. Visitor sees the original logo, hero section and headline "Turn Your Ideas Into Real Applications With AI".
2. Visitor reviews product demonstration, features, How It Works, pricing (free usage philosophy) and FAQ.
3. Visitor types an idea into the large prompt input and presses Build My App.

Result: Visitor is carried into registration/sign-in and then into project creation with the prompt retained. Continuation: Footer links provide supporting information.

5.3 Create a project from the dashboard

Actors: Registered user. Trigger: User selects Create New Project.

1. Dashboard shows Recent Projects, All Projects, search, thumbnails, project history and last modified date.
2. User creates a project (unlimited project creation) and names it.
3. User opens the project in the AI development workspace.

Result: New project appears in Recent and All Projects. Failure/recovery: Empty or failed creation leaves the dashboard unchanged and the user can retry.

5.4 Build or modify an application through conversation

Actors: User, AI development agent. Trigger: User submits a natural-language request in the left panel.

1. User chooses Build, Plan or Debug mode and optionally attaches files or images.
2. Agent analyzes requirements, produces an application plan, and generates complete source code including frontend interfaces and backend logic.
3. Agent modifies existing projects on request (e.g. "Add a login page", "Change the homepage design", "Create an admin dashboard", "Fix this error", "Add a database", "Make the application responsive") and explains each change.
4. Responses stream into the conversation; conversation history is retained for continuous development.
5. User inspects results in the center preview and right-panel file explorer/code editor.

Result: Updated project files with an explanation of changes. Failure/recovery: Provider fallback, error handling, model availability checks and usage monitoring keep the session usable; build errors surface in the preview.

5.5 Edit files and preview the application

Actors: User. Trigger: User reviews generated output.

1. In the right panel, user browses HTML, CSS, JavaScript, TypeScript and React component files and creates, renames, edits or deletes files.
2. Changes are saved automatically and version history is recorded.
3. Center panel refreshes the live preview; user switches between desktop, tablet and mobile modes, refreshes or goes full-screen.
4. When AI changes files, the system saves, rebuilds when necessary, refreshes the preview and displays build errors.

Result: Testable running application. Failure/recovery: Build errors are shown so the user can return to Debug mode.

5.6 Manage projects from the dashboard

Actors: User. Trigger: User needs to organize work.

1. User searches projects and opens one from Recent or All Projects.
2. User renames, duplicates or deletes a project.
3. Project history and last modified date update accordingly.

Result: Project list reflects the change. Failure/recovery: Destructive actions require confirmation; cancelled actions leave the project intact.

5.7 Export and publish a project

Actors: User. Trigger: User wants to run, own or share the application.

1. User exports the project: ZIP download, source code, assets, documentation.
2. User runs the project locally or deploys it independently; ownership of source code remains with the user.
3. Alternatively, user publishes the application and receives a unique project URL.

Result: Portable source or live published application. Failure/recovery: Export or publish errors are reported and can be retried.

5.8 Configure AI providers

Actors: Administrator, user. Trigger: Default provider is unsuitable or a user wants their own.

1. Administrator opens AI settings and adds providers, configures Ollama and vLLM, adds model endpoints, selects default models and the default provider, tests connections, enables/disables providers and monitors availability.
2. User optionally connects their own AI provider.
3. Workspace uses provider and model selection with API configuration, streaming responses, fallback and usage monitoring.

Result: Working provider configuration. Failure/recovery: Failed connection tests and unavailable models are flagged before use.

5.9 Operate within the sandboxed environment

Actors: User, platform. Trigger: Project needs dependencies or a running server.

1. Platform provides restricted terminal access, dependency installation and a development server feeding the live preview.
2. Secure file uploads and authorization restrict each user to their own private projects.

Result: Isolated, running project environment. Failure/recovery: Restricted access blocks unauthorized operations and reports the denial.

5.10 Platform setup before first use (default)

Actors: Operator. Trigger: Initial deployment.

1. Analyze the development environment, identify available infrastructure and missing services.
2. Create a detailed technical implementation plan and explain unavoidable infrastructure costs.
3. Implement Phase 1 completely and test each phase before continuing.

Default: Phase sequencing and environment analysis are operator-side setup steps; they do not gate end-user journeys once the platform is live.

Before starting:

1. Analyze the development environment.

2. Identify available infrastructure.

3. Identify missing services.

4. Create a detailed technical implementation plan.

5. Explain unavoidable infrastructure costs.

Start with PHASE 1 and implement it completely.

Test each phase before continuing.

6. Visuals Colors and Theme

[Design proposal; unspecified choices are defaults.]

6.1 Visuals, Colors and Theme

Muse and headline. Karim Rashid's sensual pop minimalism, read as sensual bronze minimalism: glossy curves, warm metal, optimism as a material. The register is a studio, not a factory — premium but warm, never corporate-blue. Branding, logo mark and all assets are original to earthy-bronze; nothing is copied from Hercules branding or proprietary assets.

Palette (light). Ground #F4EDE4 (warm clay paper), surface #FBF6EF (porcelain), text #2A211B (ink, >10:1 on ground), primary #B4632A (bronze — logo mark, section rules, filled primary buttons), accent #E8552F (tangerine — prompt CTA, active states, one headline word), muted #8A7663 (metadata, labels).

Palette (dark). Ground #1C1713, surface #26201A, text #F4EDE4, same bronze and tangerine accents, plus #D9A97A for glossy rims. Both themes ship; the theme toggle lives in the responsive navigation.

Typography. Headings Comfortaa at 300–400 with +0.02em tracking, set large and rounded, never bold-heavy. Body Work Sans. Micro-labels Work Sans uppercase 11px, +0.18em. Modular scale 1.333: 40/28/20/16/14 mobile to 112/64/40/20/16 desktop; display clamp(40px, 8vw, 112px), section headings clamp(28px, 4vw, 64px), body 16–18px at 1.65 line-height. No Inter, Roboto, Poppins or system-ui.

Shape and spacing. Pill buttons (999px), cards 28–36px radii with one corner pulled asymmetric, curved section boundaries, glossy highlight arcs on top edges. The code editor panel is the sole square-cornered surface, signalling real code. Spacing rhythm is generous and even; 12px clay gutters separate workspace panels.

Imagery. Glossy 3D primitives in clay, bronze and tangerine — a soft extruded app-window object, rounded capsules, a floating code-bracket blob — plus macro shots of brushed bronze and matte clay. No stock people, no gradient blobs, no screenshot collages. The product demonstration is a real workspace mockup in a rounded bronze bezel.

Accessibility. Readable text and controls stay whole at 375px, 768px and 1280px; imagery and decoration may bleed and crop instead.

• Original branding and identity.

Create a premium SaaS interface with:

• Modern landing page.

• Dark and light themes.

• Responsive navigation.

7. Signature Design Concept

[Design proposal; unspecified choices are defaults.]

The prompt input is the hero object. The landing page opens on a full-width clay-paper ground with a 9-column left type block: the headline "Turn Your Ideas Into Real Applications With AI" in Comfortaa light, two soft-stacked lines, the word Ideas in tangerine, a short Work Sans subline beneath. Directly under it sits one oversized pill prompt input spanning the text column — 72px tall on desktop, 56px on mobile — with the tangerine Build My App button fused into its right edge. The input is the dominant object, not an illustration. To its right, a tall glossy bronze-bezelled panel shows a live workspace preview, cropped by the right viewport edge. No centred stack, no gradient blob, no blue button.

Curved ribbon. Every major landing block — hero, product demonstration, features, how it works, pricing, FAQ, footer — ends in a sweeping organic curve (SVG path, 80px deep desktop, 32px mobile) that flips direction, so the page reads as one continuous glossy ribbon rather than stacked rectangles.

Glossy app-object panel. A 36px-radius panel with a brushed-bronze 2px bezel and a highlight arc sweeping its top edge every 6s, reused for the product demo and the live preview frame.

Capsule tabs. The three-panel AI development workspace and dashboard use pill tabs (Chat / Files / Preview) that squish 4% on hover and fill bronze when active, separated by 12px clay gutters.

Bronze numerals. Project counts, version numbers and token usage set in Work Sans tabular figures at 40px with the unit in 11px uppercase clay — data as ornament.

Layout alternation. Feature sections alternate a wide curved colour band with a two-column clay/porcelain split; pricing is three capsule cards with the middle lifted and bronze-filled, carrying the free-usage philosophy.

8. Interaction Model & Motion Direction

[Design proposal; unspecified choices are defaults.]

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief. Focal subject: the fused prompt-input capsule and the bronze-bezelled workspace panel beside it. Thesis: the visitor types an idea into the capsule → the bronze-to-tangerine border animates on focus and the panel's highlight arc sweeps → the panel reads as a live, glossy product, the idea already becoming an object. Vocabulary: liquid and soft — capsule buttons squish 4% on hover with a 220ms spring; the hero panel breathes on a slow 6s float with a moving glossy highlight sweep; section edges morph their curve as they scroll into view; streaming AI responses fade in line-by-line. Composed first frame: clay-paper ground, two-line Comfortaa headline with Ideas in tangerine, the 72px capsule with fused Build My App button, the bronze-bezelled panel cropped at the right edge, highlight arc mid-sweep. Reduced-motion state: all motion disabled, leaving a static glossy composition — the capsule, panel and curves hold their final positions with no float, sweep or squish.

9. Non-Functional Requirements

• Responsive desktop, tablet, and mobile interface.

Never expose API keys to frontend code.

• Development server.

• Live preview.

Never execute untrusted generated code on the main application server.

Never expose database credentials or system secrets to generated applications.

==================================================

12. LIVE PREVIEW

Implement a real-time preview system.

When the AI changes project files:

• Save changes.

• Rebuild when necessary.

• Refresh the preview.

• Display build errors.

• Allow users to test their applications.

Support desktop, tablet, and mobile preview modes.

• Application logs.

• System health.

• Security settings.

• Global platform settings.

16. FREE USAGE PHILOSOPHY

==================================================

Implement reasonable abuse protection and infrastructure resource limits.

Free software does not mean free unlimited cloud computing.

Design the platform so that I can use my own hardware, local AI models, and self-hosted infrastructure to minimize operating costs.

==================================================

17. SECURITY

==================================================

Implement:

• Isolated code execution.

17. SECURITY

==================================================

Implement:

• Secret management.

17. SECURITY

==================================================

Implement:

• Database access policies.

• Protection against unauthorized project access.

==================================================

20. IMPORTANT DEVELOPMENT INSTRUCTIONS

Do not build a static mockup.

Do not create buttons that do nothing.

Do not simulate AI generation with fake text.

Do not claim a feature works unless it has been implemented and tested.

Keep the code modular, documented, maintainable, and scalable.

10. Tech Stack

• Support local and cloud AI models.

==================================================

2. FRONTEND

Use:

• Next.js

• React

• TypeScript

• Tailwind CSS

• Modern component architecture

Use Monaco Editor for code editing.

==================================================

8. AI GATEWAY

Create an independent AI Gateway that supports multiple providers.

==================================================

10. DATABASE AND STORAGE

Use PostgreSQL.

Implement tables for:

• Users.

• User profiles.

• Projects.

• Project files.

• Conversations.

• Messages.

• Project versions.

18. RECOMMENDED TECHNOLOGY STACK

Frontend:

• Next.js

• React

• TypeScript

• Tailwind CSS

Code Editor:

• Monaco Editor

Backend:

• Next.js API or dedicated backend services.

Database:

• PostgreSQL

AI:

• Ollama

• vLLM

• OpenAI-compatible APIs

Execution:

• Docker

• Isolated sandbox environments

Queue:

• Redis

• Background job processing

Storage:

• S3-compatible object storage

Deployment:

• Docker

• Self-hosted VPS

• Compatible cloud infrastructure

11. Assumptions and Constraints

• Public platform available worldwide.

• Unlimited project creation, subject to fair infrastructure protection.

• No mandatory subscriptions.

• No artificial AI credit system.

• No mandatory paid API.

• Full source code ownership.

• Self-hosting support.

The design must be original and must not copy Hercules branding or proprietary assets.

Do not implement fake AI responses or static demonstrations.

Prefer open-source coding models.

The platform should be designed to operate without mandatory paid AI APIs.

• SSL support through compatible hosting infrastructure.

==================================================

IMPORTANT:

16. FREE USAGE PHILOSOPHY

==================================================

The platform must not have:

• Mandatory subscriptions.

• Artificial credit balances.

• Paywalls for core features.

• Mandatory paid AI APIs.

• Artificial daily generation limits.

PHASE 1:

Landing page, authentication, database, and dashboard.

PHASE 2:

Project creation and project management.

PHASE 10:

Admin dashboard, monitoring, security, and optimization.

12. Glossary

No additional details specified.