Orbweaver

Inspiration

Complex systems do not need more interface. They need better structure.

Architecture diagrams, workflows, data models, and knowledge graphs already contain meaning, but turning that meaning into a useful visual usually requires authored coordinates, diagram syntax, manually positioned shapes, or generated output that is difficult to inspect.

I built Orbweaver around a simpler principle:

Understand complex systems while showing less.

What it does

Orbweaver turns coordinate-free semantic graphs into deterministic, inspectable visual structures. The input describes meaning:

• what exists;
• how things relate;
• which relationships matter;
• what evidence and claims support the structure.

Orbweaver validates that meaning, computes the layout, and renders an accessible SVG artifact. The proposal contains no authored coordinates, SVG, HTML, CSS, or executable markup.

The WebMCP playground extends this into a shared human-agent workspace. ChatGPT can read the live workspace contract, create or revise a semantic proposal, inspect an entity, and focus it in the visible diagram.

The agent can propose meaning. It cannot accept its own work.

Why WebMCP

Without WebMCP, an agent would need to infer interface controls and repeatedly manipulate a large JSON editor. That is slow, fragile, and disconnected from the application’s actual domain model.

With WebMCP, Orbweaver exposes six bounded, page-local tools:

• read the current workspace and revision;
• read the supported semantic contract;
• create a complete proposal;
• revise it using conflict-safe operations;
• inspect semantic identity and provenance;
• focus an entity in the visible workspace.

The tools reuse the same application controller and validation boundary as the human interface. WebMCP does not introduce a second, privileged execution path.

The human-agent experience

A person describes an order-fulfillment system in ordinary language. ChatGPT discovers Orbweaver’s tools and supplies entities, relationships, groups, claims, and evidence—not pixels or drawing instructions.

Orbweaver validates the entire proposal atomically, derives the geometry, and renders revision one as a validated but untrusted preview.

The person and agent then work with the same live state. ChatGPT can add Delivery tracking, focus it, and expose its relationships for inspection. Expected-revision checks prevent stale writes when the shared workspace changes.

Acceptance remains a human-only decision. The agent cannot accept a revision or enable export. The person can inspect, reject, or undo the change. In the demonstration, I manually undo the agent’s revision and Orbweaver restores the previous graph.

How I built it

Orbweaver’s core is a provider-neutral TypeScript library. A strict GraphProposal contract represents semantic content without layout coordinates. ELK.js computes the visual structure, while Orbweaver produces accessible SVG, stable semantic identities, selection behavior, provenance, and inspection details.

The playground’s WebMCP adapter registers six tools through the browser’s page-local model context. Tool inputs are treated as untrusted data and pass through the existing validation layer. Create and revise operations are atomic, revisions are versioned, and semantic writes never bundle human acceptance.

The implementation is tested with Vitest, Playwright, and axe-core accessibility checks. The npm package contains no AI provider, account requirement, telemetry, or cloud runtime dependency.

Challenges

The hardest problem was not drawing the graph. It was designing the authority boundary.

A useful agent needed enough access to create meaningful structures without gaining the ability to silently approve its own output. This required explicit trust states, expected-revision conflict protection, atomic validation, reversible mutations, and accepted-only export.

The other challenge was visual restraint: presenting enough information to understand a complex system without turning the workspace into an aircraft cockpit. Orbweaver keeps the interface secondary to the structure being examined.

Accomplishments I’m proud of

• Published a provider-neutral open-source TypeScript library rather than embedding an AI service inside the product.
  • Built six bounded WebMCP tools around the application’s existing controller and validation boundary.
  • Made agent-authored changes versioned, atomic, inspectable, and reversible.
  • Preserved human-only authority over acceptance and export.
  • Produced deterministic, accessible SVG from semantic proposals containing no authored coordinates.
  • Published the beta package, live playground, documentation, source, and reproducible demonstration.

What I learned

WebMCP is most valuable when it exposes an application’s domain semantics—not when it simply recreates button clicking as tools.

The strongest human-agent experience is not full autonomy. It is shared context with asymmetric authority: the agent contributes reach and synthesis; the application enforces structure; the human retains judgment at the moment of consequence.

What’s next

Orbweaver is open source and currently available as @semanticintent/[email protected]. Next steps include stabilizing the beta API, expanding semantic lenses and comparison views, and continuing to develop portable artifacts that preserve their meaning, provenance, and accessibility outside the original application.

Built With

• accessibility
• agents
• ai
• axe-core
• css
• data
• elk.js
• graphs
• html
• javascript
• npm
• opensource
• playwright
• semantic
• svg
• typescript
• visualization
• vitest
• webmcp