Semantic Loop DevOps Demonstrator

Database design often splits into two disconnected experiences. A person works visually in a browser while an AI assistant receives pasted fragments, guesses at current state, or drives the page through brittle clicks. That gap makes collaboration slow and risky: the person cannot easily review what the agent believes, and the agent cannot reliably act on the model the person is seeing.

Solution

Semantic Loop turns the browser page into a shared, structured workspace. The person can continue using the visual schema editor while an agent discovers purpose-built WebMCP tools on that same page. The agent can inspect the current project, create or revise a schema, add sample data, and export the project through typed operations. Every change flows through the application's real React state, so the interface immediately shows the result for human review.

This is stronger than generic browser automation: the agent works with domain concepts such as tables, columns, keys, sample data, and project exports instead of screen coordinates or incidental DOM text.

Why This Matters

The target users are developers, data architects, product teams, and technical operators who need to turn requirements into a reviewable data model. WebMCP gives them a collaboration loop that was previously awkward:

1. A person describes intent and watches the model evolve.
2. An agent reads the exact current project state.
3. The agent proposes or applies a structured change.
4. The person reviews the result in the visual interface and can edit it directly.
5. Either participant can continue from the same state and export a portable result.

That shortens the path from conversation to an auditable artifact while keeping the person in control of the visible source of truth.

How We Used AI

• WebMCP-enabled agents operate the application through explicit, typed tools rather than DOM scraping.
• A provider-neutral server-side gateway supports optional natural-language schema, data, visualization, and artifact generation using Gemini, OpenAI, or Anthropic when the operator configures credentials.
• The core WebMCP demonstration is designed to remain usable without sharing any provider credential: judges can exercise the page-state tools and review their visible effects directly.

How We Used Codex

Codex helped inspect the existing codebase, separate pre-challenge product work from the new challenge contribution, design the WebMCP tool boundary around the application's existing state model, implement and test the adapter, harden the no-secret judge path, and prepare the Netlify and Devpost materials. Human review remained the decision point for project selection, rules acceptance, product positioning, and final submission.

Key Features

• A visual React schema-design workflow that remains usable by a person.
• Discoverable WebMCP tools with JSON schemas and focused descriptions.
• A single shared project state for human UI actions and agent tool calls.
• Structured read, create, update, sample-data, and export operations.
• Visible feedback after agent mutations so the person can review the outcome.
• A no-secret judge path for the core WebMCP flow, with multi-provider AI features as an optional enhancement.
• Browser code never receives provider keys. Local development can load them using macOS Keychain, production reads protected Netlify secrets, and the gateway sends credentials only to the selected provider over HTTPS.
• Portable project export for continuing the work outside the current browser session.

WebMCP Tools

The source registers these tools with document.modelContext.registerTool.

webmcp/tools.ts defines registerWebMcpTools; webmcp/useWebMcpTools.ts mounts the document.modelContext.registerTool registration into React. export_project returns files: [{name, mediaType, content}].

Architecture

The application is a Vite-built React 19 and TypeScript single-page app. React Context and a reducer hold the canonical project state. The WebMCP adapter registers browser-native tools, validates structured inputs, and dispatches through that existing state boundary. UI components subscribe to the same state and immediately render agent-initiated changes. Browser persistence keeps the working project local, and the export path produces a portable project representation.

Gemini, OpenAI, and Anthropic are optional service integrations behind one provider-neutral server-side boundary. They are not the state store and are not required for the basic WebMCP tool demonstration.

Built With

• anthropic
• openai
• react-19
• tailwind
• typescript
• vega-lite
• vite