Synapse Studio

Build, stress-test, and optimize cloud architectures with AI agents. Synapse lets humans and agents collaborate on a live system canvas through WebMCP

Comment

Inspiration

Cloud architecture is usually designed as a static diagram, while testing, optimization, security review, and infrastructure generation happen in separate tools. We wanted to explore what happens when that architecture becomes a living, interactive system that both humans and AI agents can work with directly.

WebMCP inspired us to build Synapse Studio around this idea: instead of an agent guessing how to operate a complex interface, the application can expose structured tools for inspecting, simulating, optimizing, and modifying the architecture.

What it does

Synapse Studio is an agent-native cloud architecture and simulation studio where humans and AI agents collaborate on the same live architecture canvas.

Users can visually design systems, connect services, adjust configurations, and define goals. AI agents can then use WebMCP tools to:

  • Inspect the current architecture and live metrics
  • Simulate traffic spikes and infrastructure failures
  • Detect bottlenecks and security risks
  • Optimize cost, latency, and resilience
  • Propose architectural changes
  • Highlight affected components on the canvas
  • Apply approved changes directly to the architecture
  • Generate infrastructure-as-code from the approved design

The result is a workflow that goes from design → simulation → diagnosis → recommendation → human approval → implementation → verification.

How we built it

We built Synapse Studio as a web application with a centralized architecture state shared across the canvas, simulation engine, agent interface, and WebMCP tools.

The application exposes structured WebMCP tools through document.modelContext.registerTool, including architecture inspection, node creation, service connections, chaos simulation, optimization, security auditing, visual highlighting, and IaC generation.

A deterministic simulation engine models system behavior such as throughput, latency, resource utilization, failures, and estimated cloud cost. This allows agents to test architectural decisions and compare results before and after changes.

We also built a WebMCP activity inspector so users can see which tools the agent is calling, what the agent is doing, and how the architecture changes in response.

Challenges we ran into

One of the biggest challenges was balancing technical ambition with a reliable product experience. It is easy to build many individual tools, but much harder to make them work together as one coherent human-agent workflow.

We also had to design a simulation model that feels realistic enough to demonstrate meaningful engineering trade-offs without depending on real production infrastructure.

Another challenge was making WebMCP visible and understandable. We wanted judges and users to clearly see when the agent was inspecting, simulating, proposing, and changing the architecture rather than simply interacting with a generic chatbot.

Finally, we designed the system so significant agent-driven changes require human approval, keeping the human architect in control while still allowing the agent to perform complex operations.

Accomplishments that we're proud of

We are proud that Synapse goes beyond simply adding an AI assistant to an existing application.

The architecture canvas, simulation engine, WebMCP tools, agent activity timeline, visual highlighting, optimization workflow, and IaC generation are designed as one integrated experience.

Most importantly, we created a workflow where the agent can work with the application's actual structured state rather than trying to guess its way through the UI. That makes the WebMCP integration central to the product instead of being an added feature.

We are also proud of the human-in-the-loop approval model, which demonstrates a more practical way for people and agents to collaborate on high-impact engineering decisions.

What we learned

We learned that building for agents requires thinking differently about application design.

A traditional interface is designed primarily for humans. With WebMCP, the application can also expose clear, structured capabilities for agents, creating a much stronger interaction model.

We also learned that the best human-agent experiences are not necessarily about giving the agent complete control. The more interesting model is often shared control: the human defines the goal and constraints, while the agent handles inspection, experimentation, reasoning, and execution.

Most importantly, we learned that making an application agent-native is not just an API integration. It requires designing the underlying state, tools, UI, and workflows so humans and agents can genuinely operate together.

What's next for Synapse Studio

We want to evolve Synapse from a simulation and design environment into a broader agent-native engineering workspace.

Future directions include richer architecture simulations, more sophisticated optimization algorithms, deeper security and compliance analysis, collaborative architecture versioning, additional infrastructure providers, and stronger integrations with real development and deployment workflows.

Our larger vision is for Synapse to become a place where engineers can design systems with agents, test them before deployment, understand the trade-offs, and turn approved decisions directly into production infrastructure.

Built With

Share this project:

Updates