Agentic AI for Automating Full-Stack Web Development

🧠 Objective

This hobby project explores the feasibility of Agentic AI as a co-developer in automating traditional full-stack web development workflows. The goal is to see how AI can go beyond code completion — and act as a true partner across the entire software development lifecycle.

⚙️ The Concept

Traditional web development involves several manual, sequential steps — wireframing, API design, coding, and documentation. This project aims to automate those steps using Agentic AI, where each AI agent handles a specific part of the workflow.

The framework used here is LangGraph, which allows defining multi-agent workflows, where each agent collaborates in a structured sequence — similar to how human teams work. The orchestration of prompts is managed using POML (Prompt Orchestration Markup Language).

🧩 Architecture Overview

Each phase of the web development lifecycle is assigned to a dedicated agent. The attached screenshot can be referred

wireframe_generator -: This is the first step in the workflow. The agent takes project requirements as input and generates a wireframe — the structural skeleton of the web applicaton. It outlines all the required pages, their layouts, and the expected API interactions.

high_fidelity_mockup_generator -: Once the wireframe is ready, it is passed to this agent.The agent enhances the design by adding high-fidelity UI elements such as colors, themes, and visual components.

api_generator -: This agent takes the wireframe as input and defines all the required APIs along with their high-level implementations. It specifies endpoints, request/response structures, and how each API connects with the UI.

full_stack_script_draft_generator -: This agent combines the outputs of the high_fidelity_mockup_generator and api_generator to produce a complete full-stack code draft — including backend logic, frontend components, and a test suite for unit testing.

full_stack_script_final_generator -: This agent reviews and validates the draft code generated in the previous step. It acts as a second layer of verification, fixing syntax or logical issues and refining the code for stability.

code_documentation_generator -: This agent processes the final codebase and generates comprehensive documentation, including function-level explanations and workflow overviews.

all_steps_done -: A dummy node that marks the completion of the entire pipeline.

🧠 Tech Stack

• Programming Language – Python
• Streamlit – for building the interactive interface
• LangGraph Framework – to manage multi-agent workflows
• Prompt Management – POML (Prompt Orchestration Markup Language)
• OpenAI / LLM APIs – for natural language reasoning and generation. The model used for this project is gpt-5-mini
• Cloud Services – Azure CosmoDB, Azure Blob Storage and Azure Eventhubs. This was primarily to explore Azure cloud services.  However, this project need not have leveraged Azure and could have gone for a simpler solution.
• Azure MCP Server – provisions Azure Cloud resources without manual setup
• IDE – Cursor IDE

🚀 Bringing It All to Life: The Agentic AI App in Action

1. Run the application

When the command "Streamlit run app.py" is executed, the Steamlit application is launched and its user interface opens in the default web browser

2. Sign Up to the Application

Click on Sign Up to create a new user and password. For example, purposes, a random user with the name “fred” has been used

After entering the required details, click “Create Account.” At this stage, the user information is securely stored in Azure Cosmos DB.

3. Login To the Application

The same user account, “fred,” can now be used to log in.

After providing the credentials, click the “Log In” button. Upon successful login, the following page is displayed:

4. Generate Project Tab

In the “Generate Project” tab, the project name and requirements can be specified.After submitting these details and clicking “Run Full Creation Pipeline,” the workflow is executed whose architecture is shown in the Architecture Overview section

In this example, a “TODO” application is used, where a user can create and manage personal tasks.

After the developer clicks “Run Full Creation Pipeline,” the live progress can be monitored under the “Project Status” section.

This tracking is powered by Azure Event Hub, where the LangGraph agent nodes act as producers and the Streamlit application serves as the consumer.

5. Your Projects(Tree View)

Within the “Your Projects (Tree View)” section, all projects are displayed.

From this page:

1. The complete project along with its documentation can be downloaded.

2. Modified versions of the project can be uploaded as a ZIP file. Uploading a ZIP file triggers another LangGraph agent to update the project and regenerate the documentation. The status of the agent can be tracked within the “Project Status” Tab.

3. Projects can be deleted by clicking the “Clear” button.

On the storage side, all project artifacts are maintained in Azure Blob Storage, while each step of the process is logged in Azure Cosmos DB.

⚡ Benefits

• Rapid prototype generation of modular full-stack codebases (frontend, backend, tests) with sqlite database as application backend storage.
• Potential to scale this into a full-fledged production-ready application with connection to any backend service.
• AI-powered, line-by-line documentation
• Flexible agent orchestration with customizable prompts

🔬 Learnings and Next Steps

This self-driven prototype reinforced my learnings as well as emphasizing the possibility of orchestrating an AI co-ordinated automation in full stack web application development. Next steps include:

• Enhancing the user interface
• Experimenting with prompt variations in POML
• Expanding multi-agent collaboration for deployment automation