• 

  Website app homepage

AetherSketch: Architecture Copilot

Inspiration

Designing a cloud architecture often starts with a surprisingly fragmented workflow: requirements are discussed in an AI chat, diagrams are created in a separate tool, architectural decisions live somewhere else, and every change requires manually keeping all of these representations synchronized.

With AetherSketch, we wanted to explore a different model: what if an AI assistant could directly collaborate with an interactive architecture canvas?

Instead of generating a static diagram or merely describing an architecture in text, the AI should be able to understand an architecture as a structured system, modify it through well-defined actions, and immediately reflect those changes in a visual workspace.

The emergence of WebMCP made this idea particularly interesting. Rather than building another proprietary integration between an AI model and a diagramming application, AetherSketch exposes the capabilities of the architecture editor directly to compatible AI clients through the web application itself.

The result is AetherSketch: Architecture Copilot — a WebMCP-native architecture workspace where natural-language reasoning and visual system design become part of the same workflow.

What it does

AetherSketch is an interactive architecture design application that allows users to collaboratively design cloud and software architectures with an AI assistant.

A user can describe an architecture in natural language, for example:

"Build an architecture that enables an HTTP container exposing an API interface to an LLM model."

The AI can interpret the request, reason about the required components, and interact with AetherSketch through its exposed WebMCP tools to construct the architecture directly on the canvas.

Instead of simply returning Mermaid code, an image, or a textual architecture description, the AI can perform structured operations such as creating components, connecting services, inspecting the current architecture, and evolving an existing design.

AetherSketch therefore creates a feedback loop between the user, AI reasoning, structured architecture representation, and visual canvas.

The architecture is maintained as structured data rather than only as pixels. This allows the AI to understand what already exists before deciding how to modify it.

For example, an initial design might contain:

Client → HTTP API → Container → LLM Provider

The user can then continue naturally:

"Add authentication in front of the API."

"Make this architecture highly available."

"Add observability."

"Replace the model provider with a self-hosted inference service."

The AI can inspect the existing architecture and incrementally modify it rather than regenerating the entire diagram from scratch.

This turns the architecture diagram into a living, AI-operable system model.

How we built it

AetherSketch was designed around a separation between the visual architecture editor and a structured Architecture Intermediate Representation (Architecture IR).

The Architecture IR represents the system as a graph composed primarily of nodes, connections, metadata, and layout information.

The canvas renders this representation visually, while architecture operations modify the underlying model.

On top of this architecture engine, we expose a collection of carefully scoped operations through WebMCP.

These tools allow an AI client to interact with the architecture programmatically: inspecting the current graph, creating architecture components, connecting them, updating properties, and manipulating the design.

This creates an interaction model roughly equivalent to:

User → AI Assistant → WebMCP → AetherSketch Tools → Architecture IR → Interactive Canvas

The important design decision was to expose semantic architecture operations rather than low-level UI automation.

An AI agent should not need to reason about where a button is located or which screen coordinates to click. Instead, it can express an architectural intention such as creating a service or connecting two components.

The application translates those operations into deterministic modifications of the architecture model and updates the canvas accordingly.

AetherSketch is deployed as a web application using Cloudflare, making the architecture workspace easily accessible while providing a lightweight deployment model suitable for a WebMCP-enabled application.

The project was also designed so that the Architecture IR can evolve independently of any individual cloud provider. Components can represent generic infrastructure concepts as well as provider-specific services from ecosystems such as AWS, Azure, GCP, Cloudflare, or self-hosted infrastructure.

Challenges we ran into

One of the biggest challenges was determining the correct abstraction boundary between the AI and the application.

Exposing UI-level actions would have been straightforward, but it would also make AI interactions fragile. Small changes to the interface could break the workflow.

Instead, we designed AetherSketch around semantic operations over the Architecture IR. This required thinking carefully about what an architecture actually consists of from an AI agent's perspective.

Another challenge was state synchronization.

The user can manually modify the canvas while the AI can also modify the architecture through WebMCP. Both need to operate on the same source of truth without the architecture becoming inconsistent.

We also had to think about how much autonomy the AI should have. Architecture design is not simply diagram generation: there can be multiple technically valid solutions to the same problem. The system therefore needs to support iterative collaboration rather than assuming that the first generated architecture is necessarily the final one.

Finally, designing useful WebMCP tools required balancing flexibility and determinism. Tools must be expressive enough for an AI to construct sophisticated systems while remaining constrained enough that their effects are predictable and understandable.

Accomplishments that we're proud of

The part of AetherSketch we're most proud of is that the AI does not merely talk about the architecture — it can operate on it.

AetherSketch demonstrates how WebMCP can turn a traditional web application into an environment that AI assistants can actively collaborate with.

We are particularly proud of:

• Building an architecture editor around a structured Architecture IR instead of treating diagrams as static images.
• Allowing an AI assistant to inspect and incrementally modify an existing architecture.
• Exposing architecture capabilities as semantic WebMCP tools instead of relying on fragile UI automation.
• Creating a workflow where natural-language reasoning immediately becomes an interactive visual architecture.
• Supporting iterative conversations where the architecture evolves instead of being regenerated from scratch.
• Keeping the system extensible enough to represent cloud-native, self-hosted, hybrid, and AI infrastructure.

Most importantly, AetherSketch shows that WebMCP can be used for more than simple web actions. It can provide an interface between AI reasoning and a sophisticated domain-specific application.

What we learned

Building AetherSketch changed the way we think about AI integrations.

The most important lesson was that giving an AI access to an application does not necessarily mean giving it access to the application's UI.

A much more powerful approach is to expose the semantic capabilities of the application.

For architecture design, the AI does not need a "click at coordinates" tool. It needs concepts such as components, connections, properties, boundaries, and architecture state.

WebMCP provides an interesting foundation for making those capabilities available directly from web applications.

We also learned how valuable a structured intermediate representation can be. Once an architecture exists as a machine-readable graph, many possibilities emerge beyond visualization: architecture validation, security analysis, cost estimation, infrastructure generation, documentation, and automated architectural reviews.

In that sense, the canvas is only one representation of the architecture.

The underlying Architecture IR is what makes AetherSketch potentially much more than a diagramming application.

What's next for AetherSketch: Architecture Copilot

Our goal is to evolve AetherSketch from an AI-assisted architecture canvas into an AI-native architecture engineering environment.

The next step is deeper architectural reasoning.

Future versions could allow specialized architecture agents to analyze a design from different perspectives, including:

• Security — identifying exposed services, missing trust boundaries, authentication issues, and risky network paths.
• Reliability — detecting single points of failure and suggesting redundancy or disaster-recovery strategies.
• Cost — estimating infrastructure costs and suggesting alternative architectures.
• Performance — identifying potential bottlenecks and scaling constraints.
• Observability — recommending logging, metrics, tracing, and alerting components.
• Compliance — analyzing architectures against selected architectural or regulatory requirements.

We also want to explore architecture transformations where the user can express higher-level intentions such as:

"Make this architecture production ready."

"Reduce the estimated infrastructure cost."

"Design this for 10x traffic."

"Harden this architecture against a regional outage."

"Migrate this architecture from AWS to Azure."

AetherSketch could then reason about the existing Architecture IR and propose or execute the required transformations.

Another major direction is architecture-to-infrastructure generation.

Because AetherSketch already represents architectures structurally, the same Architecture IR could eventually become the foundation for generating artifacts such as Terraform, OpenTofu, Pulumi, Kubernetes manifests, deployment configurations, architecture documentation, and implementation plans.

The longer-term vision is therefore:

Prompt → Architecture → Analysis → Refinement → Infrastructure

Instead of AI being another feature added to a diagramming tool, AetherSketch explores what an architecture platform looks like when AI collaboration is part of the interaction model from the beginning.

WebMCP provides the bridge that makes that collaboration possible.

Built With

• cloudflare
• css
• next.js
• react
• tailwind
• typescript