OmniData WebMCP

A real-time data exploration workspace enabling humans and AI agents to query in-browser analytics, run SQL, and build live visual dashboards collaboratively using WebMCP

Comment

Inspiration

Data analysis traditionally forces a trade-off: either paste raw CSVs into LLM chat boxes and lose context or rely on fragile browser DOM scrapers that break when UIs update. We envisioned a native client-side data workspace where humans enjoy responsive charts while AI agents access structured, type-safe tools to run SQL queries and data audits directly alongside the user.

What it does

OmniData WebMCP is a collaborative, agent-native data analytics platform:

For Humans: Provides interactive Recharts dashboards, real-time dimension remapping, preset switching, data completeness diagnostics, and raw tabular data views.

For Agents: Exposes native WebMCP tools (run_sql_query, audit_dataset, switch_preset) via document.modelContext.registerTool.

Shared Experience: When an agent executes an analytical query or switches datasets, the visual UI, data grid, and execution logs update instantly in real time.

How we built it

Framework & UI: Next.js 14, React, Tailwind CSS, and Recharts for responsive visualizations.

In-Browser Analytics Engine: DuckDB WASM for executing high-performance SQL queries directly in the browser's virtual filesystem.

State & Sync: Zustand for lightweight, cross-component state synchronization across tables, canvas charts, and execution logs.

WebMCP Integration: Native browser tool registration using document.modelContext.registerTool with JSON Schema definitions for input validation.

Challenges we ran into

WASM Catalog Synchronization: Ensuring DuckDB WASM correctly registers JSON datasets into virtual tables before user or agent SQL queries run.

Environment Fallbacks: Implementing safe optional chaining and fallback mechanisms so the application runs seamlessly even when WebMCP flags (chrome://flags/#enable-webmcp-testing) are disabled.

Accomplishments that we're proud of

Built a zero-latency, privacy-focused analytics stack where all data processing and AI tool execution happen entirely client-side.

Created a cohesive dual-persona experience where human actions and agent tool calls operate on the exact same underlying state without desynchronization.

What we learned

Exposing explicit WebMCP schemas produces faster, more accurate agent outputs than relying on LLM web scraping or screen understanding.

Designing web apps for dual human-agent interaction requires predictable, reactive state pipelines.

What's next for OmniData WebMCP

Adding drag-and-drop CSV and Parquet file upload support with dynamic DuckDB schema generation.

Expanding the WebMCP toolset to allow AI agents to generate custom multi-metric charts and run automated statistical anomaly detection.

Built With

Share this project:

Updates

posted an update —

Project Update: OmniData WebMCP is Finalized & Live!

We just wrapped up our final submission build for the OpenAI WebMCP Challenge! OmniData WebMCP has evolved from an initial concept into a full-fledged, agent-native in-browser analytics workspace where humans and AI agents collaborate seamlessly on structured datasets.

What's New & Key Highlights Interactive DuckDB WASM SQL Console: Added a dedicated SqlQueryPanel component allowing both users and agents to execute custom ANSI SQL queries 100% client-side in browser memory—zero server latency, total privacy.

Native WebMCP Tool Suite: Fully registered type-safe agent tools (run_sql_query, audit_dataset, switch_preset) directly via document.modelContext.registerTool.

Reactive Visual Analytics: Powered by Recharts and Zustand, updating visual charts and data grid tables instantly whenever underlying WASM tables are mutated.

Real-Time Execution Terminal: Displays live event logs, status codes, timestamps, and parameters as AI agents trigger WebMCP tools behind the scenes.

Code Snippet: WebMCP Tool Registration Here is a look at how OmniData registers in-browser tools for AI agent interaction:

TypeScript // Exposing client-side DuckDB execution to WebMCP agents if (typeof window !== 'undefined' && (window as any).modelContext) { (window as any).modelContext.registerTool({ name: 'run_sql_query', description: 'Executes analytical SQL queries against DuckDB WASM in-memory tables', parameters: { type: 'object', properties: { query: { type: 'string', description: 'ANSI SQL query statement' } }, required: ['query'] }, execute: async ({ query }) => { return await executeDuckDbQuery(query); } }); } Live App: omnidata-webmcp.vercel.app

GitHub Repo: Masngo/omnidata-webmcp

Try opening it in Chrome with #enable-webmcp-testing enabled or ChatGPT's in-app browser. Let us know your thoughts or feedback in the comments below!

Log in or sign up for Devpost to join the conversation.

Submission history