Intelligent Markdown-Driven Process Diagrams

Inspiration

I've found that giving agents structure and tools greatly enhances how they operate. A process diagram can look complete while hiding the complexity in simple steps. I wanted to make diagrams something people and AI agents can inspect, test, and improve together.

What it does

This project turns a process map into an interactive workspace for human-agent collaboration with a massive amount of context behind each input, action, output, and relationship by adding markdown to each point in the process.

An agent can read all of this structure context to draft a new process, inspect steps and connections, and test scenarios by simulating outcomes that expose possible gaps. Proposed repairs appear as suggested change that a person can review before approval, adding to the collaborative feel between you and the agent.

The included demo explores an AI evaluation process: what happens if a sandboxed agent decides it wants to escape? Our agent can identify a missing review step and propose a repair before the infrastructure is ever built.

How we built it

I gave Codex the challenge page url and described my idea 🤓

Challenges we ran into

I ran into several issues along the way with actually using the WebMCP tools, troubleshooting the chrome://flags/#enable-webmcp-testing config and finally realized I had to use the embedded browser in Codex instead of ChatGPT browser extension. Also took me forever to realize I couldn't use Luna with webMCP I'm happy to share more specifics if you'd like added feedback. Codex summarized our struggles below:

1. WebMCP tools registered on the page but were not visible in every browser session.
2. Native WebMCP testing required browser support, enabled settings, and correct host headers.
3. Tool registration needed reliable retry, cleanup, and discovery checks.
4. Tool inputs and outputs needed strict validation and clear safety annotations.
5. Repair proposals needed exact graph and evidence references to reject stale requests.
6. Agent-proposed drafts and repairs had to remain pending until human approval.

Accomplishments that we're proud of

Just finishing the challenge - everything feels SO busy lately. AI tools have made me so much more productive but I also find myself just working more as well. So taking the time to really dig into webMCP as a new capability was great. There's so much value in allowing web users to bring their own agent instead of trying to build AI into my own pages. I think it'll be a totally new unlock for web browsing, not just an agentic augmentation of the UI.

What we learned

I learned about webMCP from the ground up. I had never heard of it before I saw the tweet for the challenge and I was immediately interested. I've built a few websites but adding AI tooling feels like reinventing the wheel. WebMCP solves that by allowing users to BYOAgent.

What's next for Intelligent Process Diagrams

I'm very excited to get GPT-6 on it. I have a lot of ideas that I think would benefit from a more long horizon model using it and iterating on it. Sol did a decent job of the higher level stuff but veered sometimes. Now that the challenge is over and it's not so rushed I'll polish the UI and remove some of the bloat in the properties panel. I'm a solution architect by day, so I really want to incorporate this in discovery calls and allow an agent to build diagrams in realtime as I talk through customer processes. That's the long term vision for it.

Thank you all for putting this on and taking the time to review all of these submissions!! Again, if you'd like any additional feedback on my experience adding WebMCP please reach out.

Built With

• codex
• magic
• markdown