PowerCanvas

What inspired me

I work in the electrification, so I spend a suspicious amount of time looking at electrical single-line diagrams and much more.

They are basically the map of an electrical system: sources, buses, breakers, cables, loads, and how everything is connected. Engineers use them across buildings, factories, data centers, renewables, EV charging and industrial systems for design, protection, sizing, validation and documentation.

So this is not exactly a tiny niche. Electrification is growing, electrical systems are getting more complex, and somebody still has to design all of this stuff.

The software is already very capable.

It can calculate complex electrical systems and then make you click through twelve property panels because one cable parameter is wrong.

That is what made me build PowerCanvas

I wanted to explore a simple idea:

What if professional engineering software was designed for both an engineer and an AI agent to operate the same workspace?

Single-line diagrams were the perfect place to start because I know the problem from my own industry, and underneath the visual diagram there is a lot of structured engineering data an agent can actually work with.

About tool and WebMCP usage

PowerCanvas is a prototype for creating and reviewing electrical single-line diagrams.

I can build a system using sources, buses, circuit breakers, cables and loads. This tool validates the design and detects engineering issues such as missing parameters, cable sizing problems and protection warnings. It's already a huge improvement to current tools on the market.

Normally, I would fix those issues manually, one component at a time.

With WebMCP, i can give that repetitive work to an AI agent.

The agent can inspect the project, understand the warnings, prepare fixes and create a staged change set directly inside PowerCanvas.

The workflow is:

BUILD -> REVIEW -> FIX OPTIONS -> CHANGE SET -> APPROVAL -> REVALIDATION -> REPORT

I still approve important changes before they are applied. Because “the AI seemed confident” is not a protection philosophy. Right? Right.

Building story

I built PowerCanvas with React, TypeScript and React Flow

The diagram is not just pixels. Components have structured parameters, connections, engineering constraints and validation results.

I keep the actual engineering calculations deterministic. The agent can reason about the problem and decide which actions to take, but it does not get to improvise electrical rules.

WebMCP exposes meaningful PowerCanvas capabilities directly to the agent.

So instead of telling it to click the third button, open a panel and scroll to a field, the agent.. can work with concepts such as cables, breakers, validation issues and design changes.

Most importantly, the agent operates the same project I see on screen.

No separate AI workspace.

No copying values into a chatbot (brr) + 10x more time.

No coordinate-based automation held together by prayer.

Challenges I faced during ideation & dev

The biggest challenge was deciding what an agent should actually be allowed to do inside such professional/expert software.

I could expose every button and input field.

Technically valid. Also a terrible API.

I had to design tools around user intent and engineering operations instead of individual clicks.

The other challenge was control and traceability. An agent silently modifying an engineering project looks impressive until someone asks why Cable 7 suddenly became 35 mm²

So I built staged changes, human approval, activity history and revalidation directly into the workflow.

Accomplishments that im proud of

I am most proud that WebMCP is not just attached to PowerCanvas as a demo feature.

It actually changes how the application can be used.

The agent does not sit next to the software explaining what I should click. It can inspect the project and perform real actions inside the engineering workspace.

At the same time, PowerCanvas is still completely usable by a human.

I can work manually, hand repetitive work to the agent when it makes sense, review what it did and continue from there.

Same workspace. Two operators.

And somehow no glowing AI chatbot in the bottom-right corner. A small victory. Something unique.

Lessons learned

The most interesting thing about WebMCP is not giving an agent a faster mouse. It is exposing the meaning already inside the application

PowerCanvas knows what a cable is, what a breaker is, how components are connected and which validation issues exist.

The agent should not have to reverse-engineer all of that from screenshots.

I also learned that human approval is not a limitation of agentic software. For engineering software, I think it is part of good agentic UX.

The agent handles repetitive work. I keep the engineering decisions.

That is a much more useful relationship than pretending the goal is to remove the engineer completely.

What's next for Power_Canvas

Next I would expand PowerCanvas with more engineering rules, larger electrical systems, richer constraints and integrations with real calculation engines and product data.

But the idea is bigger than single-line diagrams.

The same interaction model could work in CAD, HVAC, solar design, industrial automation, building engineering and other complex professional tools. I see demand, potentiall.

PowerCanvas is the example.

The bigger idea is professional electrification software where the human and the AI agent can actually work in the same workspace together.

Not another chat window next to the real tool. The real tool.

Built With

• browser-apis
• css
• dagre
• openai
• playwright
• react
• react-flow
• svg
• typescript
• vite
• vitest
• webmcp
• zod
• zustand