Canvasflow

We wanted to explore a simple question:

What would it look like if web applications were designed to be used by both humans and AI agents from the beginning?

For the OpenAI Hackathon, we wanted to build something genuinely useful with WebMCP rather than creating a demo that only showcased an agent clicking around a website.

We chose financial analysis because analysts constantly work with structured data, explore relationships between variables, generate visualizations, and iterate on insights. These workflows are highly interactive, but much of the existing web experience is still designed exclusively around human interaction.

That led to CanvasFlow — an agent-native financial analysis workspace designed to make data exploration and visualization accessible to both humans and AI agents.

What it does:

CanvasFlow provides an interactive workspace for financial data analysis and visualization.

Users can bring data into the canvas, explore it, analyze relationships within the dataset, and generate visual representations of their findings.

The key difference is that CanvasFlow is not only designed around the traditional human UI.

We exposed core application capabilities through WebMCP, allowing an AI agent to interact with CanvasFlow through structured tools rather than having to interpret the interface and figure out where to click.

This creates two complementary interaction layers:

Humans get the visual canvas. Agents get structured tools.

Instead of an agent simply reading a financial dashboard, it can actually operate the application's capabilities to perform analysis and manipulate the workspace.

The goal is to demonstrate what becomes possible when web applications are designed to be agent-operable, rather than merely agent-readable.

How we built it:

CanvasFlow was built as a WebMCP-enabled web application with the goal of keeping the architecture simple and focused on the core interaction between the application and an AI agent.

We designed the application around a set of useful financial analysis and visualization capabilities and exposed those capabilities as WebMCP tools.

This allows an agent to discover and invoke functionality directly through structured tool calls.

The application was prototyped extremely quickly using Google Antigravity, allowing us to go from the initial idea to a functional WebMCP-enabled prototype in less than 20 minutes.

Rather than spending the majority of the hackathon building a complex interface, we focused on validating the underlying idea:

Can a web application expose meaningful functionality to an agent while remaining intuitive for a human?

CanvasFlow is our answer to that question.

Challenges we ran into:

The biggest challenge was not getting an agent to interact with a webpage.

It was deciding what the agent should actually be able to do.

There is a significant difference between exposing UI actions as tools and exposing meaningful application capabilities.

We had to think carefully about the right level of abstraction for each WebMCP tool: tools needed to be understandable to an agent while still mapping cleanly to useful actions inside the application.

We also had to balance two different users.

A financial analyst needs an intuitive visual workspace, while an AI agent needs structured, deterministic capabilities.

Designing for both without allowing one interaction model to compromise the other became one of the most interesting parts of the project.

Accomplishments that we're proud of:

We're proud that CanvasFlow demonstrates a practical use case for WebMCP rather than treating it as a novelty.

We built a working agent-native financial analysis environment in less than 20 minutes, while still demonstrating a meaningful interaction between an AI agent and a web application.

We're particularly proud of the fact that the application doesn't require the agent to simply “look at the screen” and imitate a human.

The agent can interact with actual application capabilities through structured WebMCP tools.

More importantly, CanvasFlow gave us a practical way to explore what we believe is a much larger shift:

The next generation of web applications may need two interfaces — one for humans and one for agents.

What we learned:

Our biggest lesson was that agent accessibility is fundamentally different from traditional web accessibility.

Humans are exceptionally good at interpreting interfaces. We can look at a chart, understand what a button probably does, navigate unfamiliar layouts, and adapt when something isn't obvious.

Agents need something different: clear capabilities, structured inputs, predictable outputs, and explicit actions.

WebMCP provides an interesting bridge between those worlds.

We also learned that building for agents changes how you think about application architecture. Instead of asking only:

«“What should the user be able to click?”»

you start asking:

«“What should an agent be able to accomplish?”»

That shift in perspective influenced almost every design decision we made in CanvasFlow.

What's next for CanvasFlow:

CanvasFlow is currently a prototype, but we see several directions for taking it much further.

We want to expand its financial analysis capabilities, support more sophisticated datasets and visualizations, and make the agent capable of performing longer multi-step analytical workflows.

We also want to explore collaboration between human analysts and agents — where an analyst can direct an agent to investigate a question, review its analysis, modify the direction of the investigation, and ultimately turn the results into a polished financial insight.

Longer term, CanvasFlow is less about being another financial dashboard and more about exploring a broader idea:

What happens when every useful capability inside a web application is designed to be accessible to both humans and agents?

CanvasFlow is our first experiment in building toward that future.