AI Architecture Generation

Codelit does one thing well: describe a system in plain English, get a complete architecture diagram in seconds. Not a rough sketch, but a real diagram with appropriate components, labeled connections, data flow indicators, and logical grouping. Architecture is one of three canvases the same prompt produces (the others are a product board and an agent workflow), but this post is about the diagram.

The agent workflow canvas is the newest of the three. You describe an agent job once and Codelit designs the production version: skills, MCP servers, tools, triggers, model routing, approval gates, and eval harnesses. Same input, three different outputs.

The kind of thing that would take 30 minutes to build manually in Lucidchart or draw.io. Except you type a sentence and it's done.

Every generation follows the same four-stage pipeline: prompt, structured JSON, layout, canvas.

Stage 1: Prompt engineering. Your natural language input gets wrapped in a system prompt that tells the AI to think architecturally. "Build me a food delivery app" becomes a structured request for components (mobile client, API gateway, order service, payment service, restaurant service, delivery tracking, notification service) with explicit relationships between them.

Stage 2: Structured JSON output. The AI returns a JSON schema, not free-form text. Every node has a type (service, database, queue, cache, gateway, CDN, external), a label, and connection definitions. This is enforced through JSON mode in the API call, which means the output is always parseable. No regex-based extraction, no "hope the AI formats it correctly."

interface ArchitectureResponse {
  nodes: {
    id: string;
    type: "service" | "database" | "queue" | "cache" | "gateway" | "cdn" | "external";
    label: string;
    description: string;
  }[];
  edges: {
    source: string;
    target: string;
    label: string;
    protocol?: string;
  }[];
  groups?: {
    label: string;
    nodeIds: string[];
  }[];
}

Stage 3: Layout calculation. The JSON gets fed into dagre for automatic positioning. Nodes are arranged in a hierarchical layout: clients at the top, gateways below, services in the middle, databases and storage at the bottom. Groups (like "AWS VPC" or "Kubernetes Cluster") get bounding boxes.

Stage 4: Canvas render. React Flow takes the positioned nodes and edges and renders them as an interactive canvas. Edges animate to show data flow direction. Nodes are clickable for audit details. Everything is draggable.

Total time from prompt to canvas: 3-8 seconds depending on complexity and which AI model handles it.

Codelit doesn't rely on a single AI provider. The system routes requests across 11 providers: GPT-5, Claude, Gemini, and plenty more, including a free pool through OpenRouter. If one provider is down or slow, the request automatically falls to the next in the hierarchy.

Pro users get premium models like GPT-5 and Claude, which produce the most architecturally sophisticated diagrams. Free tier users get the free model pool, still good but less nuanced on edge cases like proper queue placement or cache invalidation patterns.

More on this in the multi-provider AI case study.

The first generation is just the starting point. What matters is that you can keep talking to it.

Say you generate a basic e-commerce architecture. Now you type: "add Redis caching between the API and database." Codelit doesn't regenerate from scratch. It takes the existing diagram, identifies where caching fits, and adds the Redis node with appropriate connections. Your manual layout adjustments are preserved.

Other iteration prompts that work well:

• "Add a message queue between the order service and payment service"
• "Replace the single database with a read replica setup"
• "Add a CDN in front of the static assets"
• "Make this production-ready, add monitoring, logging, and alerting"
• "Add authentication using OAuth2 with a separate auth service"

Each iteration takes 2-4 seconds and modifies the existing diagram intelligently. It's like pair-programming on architecture: you guide, the AI executes.

After watching thousands of generations, I've noticed patterns in what produces great diagrams:

Be specific about scale. "A chat app" produces a basic diagram. "A chat app that handles 10,000 concurrent users with real-time messaging" produces something with WebSockets, a pub/sub layer, and connection management.

Name your tech stack. "A web app with a database" is vague. "A Next.js app with PostgreSQL, Redis for sessions, and deployed on AWS" gives the AI concrete components to work with.

Describe the workflow. "An e-commerce system" is okay. "An e-commerce system where users browse products, add to cart, checkout with Stripe, and receive order confirmation emails" maps to specific services and data flows.

Ask for what you'd ask a senior architect. "Design a system that can handle 1 million daily active users with 99.9% uptime" and the AI will add load balancers, redundancy, and health checks automatically.

I want to be honest about the limitations. The AI generates architecturally sound diagrams, but it doesn't know your specific business constraints. It won't tell you that your team of three probably shouldn't build 12 microservices. It won't factor in your AWS budget. It won't know that your company has a mandate to use Azure instead of GCP.

That's what the architecture review feature is for, and even then, you're the architect. The AI is a tool, not a replacement.

Head to codelit.io and type a description. Watch it generate. Then iterate. Add components, change the architecture, ask for production hardening. The canvas is your playground.

Check out all features to see what else you can do with the generated diagram.