Architech

Architech is an AI-powered solution architect designed to automate and dramatically simplify the complex, initial phase of software development: technology selection and architectural planning.

Comment

Architech - AI-Powered Solution Architect

Inspiration

The inspiration for Architech stems from the significant roadblock many developers, founders, and tech enthusiasts face when starting a new software project: determining the right technologies and crafting an initial architectural plan. This process often involves extensive manual research and can be fraught with uncertainty. We aimed to create an intelligent, collaborative platform that automates and simplifies this complex initial phase of software development.

What it does

Architech is an AI-powered solution architect that takes a user's natural language project description and, in response, generates a complete, visual architectural plan. This plan is rendered on an interactive canvas, allowing users to edit and refine it in collaboration with the AI. It essentially acts as a collaborative canvas where the developer and the AI work together to refine the perfect architecture.

How we built it

Architech was built with a sophisticated multi-agent system powered by Google's Agent Development Kit (ADK), integrated with a FastAPI backend and a Next.js frontend.

Backend (Python FastAPI Application)

Orchestration and AI Agent Server

The backend serves as the core, exposing REST endpoints for plan generation (/plan/generate) and refinement (/plan/refine). Both endpoints support Server-Sent Event (SSE) streaming for real-time updates.

Agent Orchestration

A main ArchitechFlowAgent orchestrates several specialized sub-agents:

  • PlannerAgent: Breaks down user prompts into high-level architectural concepts
  • KnowledgeGraphAgent: Queries a Neo4j knowledge graph (instead of Spanner as initially planned) to suggest concrete technologies. This interaction happens securely through a custom call_mcp_server tool, which communicates with the MCP Server
  • FormatterAgent: Transforms the raw JSON from the KnowledgeGraphAgent into the React Flow-compatible nodes and edges structure
  • ComponentConnectorAgent: Establishes logical connections between components
  • ReviewerAgent: Validates and enriches the final architecture plan
  • RefinementAgent: Manages post-generation edits and refinements

MCP Server (FastAPI)

A separate FastAPI application acts as the Multi-Cloud Proxy (MCP) server, handling secure communication with the Neo4j database, decoupling the KnowledgeGraphAgent from direct database interaction.

Additional Backend Features

  • Streaming Responses: All agent actions and plan updates are streamed to the frontend for a highly responsive user experience
  • Session Management: An in-memory session service tracks user sessions and agent states
  • Environment Configuration: .env files manage API keys and database credentials for Google AI and Neo4j

Frontend (Next.js)

UI Layout

Built with Tailwind CSS and shadcn/ui components, featuring:

  • Header
  • Textarea for user prompts
  • "Generate" button
  • Large section for the React Flow canvas

Interactive Canvas

Uses the reactflow library and Zustand for state management to dynamically render nodes and edges as they are streamed from the backend.

Streaming Consumption

The frontend consumes the SSE stream from the backend, parsing incoming JSON chunks to display real-time status updates and incrementally render the architectural plan.

Edit/Refinement Loop

React Flow's event handlers (onNodesDelete, onConnect, etc.) detect user changes, which are then sent back to the backend's RefinementAgent to update the plan.

Tech Stack

Backend

  • Python 3.13+
  • FastAPI
  • Google ADK (Agent Development Kit)
  • Google GenAI
  • Neo4j
  • Pydantic
  • httpx

Frontend

  • Next.js
  • React Flow
  • Zustand
  • Tailwind CSS
  • shadcn/ui

Challenges we ran into

One of the primary challenges was implementing real-time streaming updates from the multi-agent backend to the React Flow frontend. This involved setting up Python generators in the ADK orchestrator to yield JSON strings at key checkpoints and then modifying the Next.js API route to pipe this streaming response directly to the client via a ReadableStream.

Consuming and incrementally rendering these chunks on the client-side, while maintaining a smooth user experience, required careful handling of asynchronous data flow and state management with Zustand. Integrating Neo4j for the knowledge graph and ensuring its secure interaction via the MCP server also presented a challenge in decoupling the agent from the database.

Accomplishments that we're proud of

We are particularly proud of the real-time, interactive nature of Architech. Being able to show the architectural plan building itself visually in real-time is a significant achievement and makes the live demo much more powerful and compelling.

The sophisticated multi-agent system, capable of reasoning over a knowledge graph and iteratively refining plans, is also a source of pride. The successful integration of Neo4j as the knowledge graph backend, secured and managed through the MCP server, demonstrates a robust understanding of system design.

What we learned

We learned the intricacies of implementing server-sent events for real-time bidirectional communication between a Python backend and a Next.js frontend, especially in the context of an AI agent system. We gained deeper insights into orchestrating multiple specialized AI agents using Google's ADK and managing their states within a user session.

Furthermore, the experience of integrating a graph database like Neo4j for knowledge representation and building a secure proxy layer (MCP server) for agent-database interaction was invaluable. We also learned the importance of visual polish and clear presentation in conveying complex system designs.

What's next for Architech

For Architech, the next steps include:

Expanding the Knowledge Graph

Continuously curating and expanding the Neo4j knowledge graph with more technologies, architectural patterns, and best practices to enhance the AI's reasoning capabilities.

Advanced Refinement Features

Implementing more sophisticated refinement tools, allowing users to not just delete or connect nodes but also to suggest alternative technologies, define constraints, or request specific architectural styles.

User Authentication and Collaboration

Adding user authentication and the ability for multiple users to collaborate on the same architectural plan in real-time.

Architech represents the future of software architecture planning, where AI and human expertise collaborate seamlessly to create robust, well-planned technical solutions.

Built With

Share this project:

Updates