Build Your Site With AI: Agentic Site Foundry MVP

by ADMIN 50 views

Hey guys! Are you ready to dive into the future of web development? We're building the Agentic Site Foundry, a game-changing AI-powered website builder that can whip up entire web projects from just a simple natural language prompt. Imagine describing your dream website, and then boom – a fully functional, deployable site appears before your eyes. This is not some futuristic fantasy; it's what we're building with the Agentic Site Foundry. Our mission? To empower AI coding agents (like Augment) to construct websites end-to-end. We're talking everything from interpreting your prompt → generating code → setting up a repository → to live deployment. Let's break down the Agentic Site Foundry MVP, the first step on this exciting journey.

🚀 Understanding the Agentic Site Foundry

Let's get a bit more in-depth on what the Agentic Site Foundry is all about. The Agentic Site Foundry is designed to automate the tedious parts of website creation. We're aiming to cut down the time it takes to launch a website and streamline the entire process. Our MVP (Minimum Viable Product) is designed to be a fully functional proof of concept. It will be able to understand a natural language description of a website and translate it into a structured format. Then, it'll use that structure to generate all the necessary code.

This includes React/HTML, CSS, assets, tests, and even set up the CI/CD pipeline using Jinja2 for templating. Moreover, the MVP will create and push a new GitHub repository for your project and connect everything with a working CI pipeline. This pipeline will handle linting, testing, type-checking, and deployment, ensuring your site is of the highest quality. This is more than just a code generator; it is a full-stack solution for website creation. The idea is that, eventually, all you need to build a website is a good idea and a clear description.

Core Features of Agentic Site Foundry MVP

  1. Natural Language Parsing: The core of the system will be its ability to translate natural language descriptions into a structured JSON format. This is handled by the plan subcommand in the CLI.
  2. Code Generation: The scaffold subcommand is where the magic happens, taking the JSON and generating all the necessary code (React/HTML, CSS, etc.).
  3. Repository Setup: The repo subcommand will handle creating a new Git repository and setting up everything on GitHub.
  4. CI/CD Pipeline: The fullrun subcommand ties everything together, creating a complete and automated CI/CD pipeline.

🛠️ Building the MVP: Key Objectives

So, what exactly do we need to build to get this Agentic Site Foundry MVP off the ground? Here's a breakdown of the key objectives. First up, we'll implement the Command Line Interface (CLI) in foundry/cli.py. This will be the user's primary point of interaction with the tool. The CLI will have several subcommands: plan, scaffold, repo, and fullrun. The plan command will take a natural language input and convert it into a JSON site contract. This structured format will provide the instructions for the rest of the process. Then, we'll need to define the JSON schemas. These schemas (site.schema.json, page.schema.json, and component.schema.json) will be the blueprints that define the structure of the website. We'll also need to build the parsers/nl_to_json.py to help us translate the natural language descriptions into a JSON format. This part will need either sample rules or static mapping for the initial MVP. Next, we'll implement the core generators in /generators. These generators will use the JSON contract to generate the code for different parts of the website. We'll have different generators for different code types: react.py (for React components), html.py (for a static HTML fallback), and ci.py (to generate the CI configuration file).

Core Generators Details

  • React Generator: The react.py generator will produce the React components, pages, and routing configurations needed for a modern website. It will utilize the structured data from the JSON contract to create components and pages, and it will set up the routing to make sure everything connects correctly.
  • HTML Generator: The html.py generator provides a fallback option. It will create a static HTML version of the site. This is useful in cases where you want to ensure that the website is accessible even if JavaScript is disabled.
  • CI Generator: The ci.py generator will create the CI configuration file, typically .github/workflows/ci.yml. This file sets up the pipeline for linting, testing, type checking, and deployment. It ensures that the generated site can be automatically tested and deployed.

To streamline the generation process, we will include example templates in /templates/react and /templates/ci to get you started quickly. Validation using jsonschema is another crucial component for ensuring that our generated JSON contracts are valid and correct. This validation step prevents errors and ensures that the code generation process runs smoothly. We will also integrate with the GitHub CLI (gh repo create) to allow for programmatic repo creation. A working example in /examples will showcase the capabilities of the Agentic Site Foundry. Finally, we'll add snapshot tests to verify the output. These tests will save the generated outputs and compare them against expected results. This helps to detect changes and ensure that the generator is always outputting correct code.

📂 Understanding the Folder Layout

Understanding the folder layout is critical for anyone trying to understand or contribute to this project. Here’s the structure we’re aiming for. The agentic-site-foundry/ directory will be the main container for the project. Inside, the foundry/ directory will house the core logic. This includes the CLI (cli.py), parsers (parsers/nl_to_json.py), generators (generators/{react,html,ci}.py), and utilities (utils/{fs,ids,validate}.py). The contracts/ directory will contain JSON schemas (site.schema.json, page.schema.json, and component.schema.json) to define the structure of our site components. The templates/ directory contains templates for code generation (like React, in templates/react, and CI configurations in templates/ci). Finally, the examples/ directory will contain example inputs and expected outputs to demonstrate the Foundry's capabilities, while tests/ will contain all our tests to ensure functionality and reliability.

agentic-site-foundry/
├─ foundry/
│  ├─ cli.py
│  ├─ parsers/nl_to_json.py
│  ├─ generators/{react,html,ci}.py
│  ├─ repo/{gh,vcs}.py
│  ├─ utils/{fs,ids,validate}.py
├─ contracts/
│  ├─ site.schema.json
│  ├─ page.schema.json
│  └─ component.schema.json
├─ templates/
│  ├─ react/
│  │  ├─ package.json.j2
│  │  ├─ tsconfig.json.j2
│  │  ├─ vite.config.ts.j2
│  │  └─ src/components/Hero.tsx.j2
│  └─ ci/ci.yml.j2
├─ examples/
│  ├─ coffee_shop.nl.txt
│  └─ coffee_shop.site.json
└─ tests/
   ├─ test_contracts.py
   ├─ test_generation.py
   └─ snapshots/

🚀 The Road to Completion: Deliverables

Okay, so what do we need to actually deliver to call this MVP a success? First and foremost, we need a working CLI. This means the CLI should be able to run the fullrun command and execute from natural language input all the way through to a fully generated GitHub repo. Then, the generated React project needs to build successfully. It is equally important that our build pipeline passes with lint, type check, and test stages. We're aiming to have an example site deployed and accessible via a GitHub Pages URL. This is the ultimate goal! Finally, we need snapshot test outputs included under /tests/snapshots/. These tests are vital for verifying that the generated outputs match our expected results.

📝 Key Considerations for the Agent

For the AI agents working on this project, keep these notes in mind: Make sure you use deterministic templates. When generating components, use stable hashing for component IDs to keep everything consistent. When dealing with JSON contracts, validate everything using jsonschema. This is critical to ensure the validity and correctness of the contracts. For GitHub repo creation, and Pages setup, leverage the gh CLI commands. For commit messages, follow the format: chore(init): scaffold site via agentic-site-foundry. Log all steps with timestamps for observability. This detailed logging will help in monitoring the process and troubleshooting any issues that may arise.

✅ Success Criteria: Acceptance Criteria

How do we know when we've truly succeeded? Here are the acceptance criteria: The CLI must run locally without any manual edits. We want to ensure a smooth, straightforward experience for the user. Next, the generated React project needs to build successfully. This confirms that the code generation process is producing valid code. Then the CI pipeline must pass end-to-end. This confirms our automated checks and deployments work. Finally, an example site must be deployed and accessible via a GitHub Pages URL. This demonstrates our ability to create and deploy a fully functional website.

This is an exciting endeavor, and we're thrilled to be at the forefront of this technological shift. Let's make the Agentic Site Foundry the first AI-driven website factory with continuous delivery baked right into its DNA.