Problem
Data-rich websites make people do the mechanical work of understanding them: find the right chart, decode its visual grammar, hunt through tooltips, compare distant points, and repeat the process whenever the question changes. General-purpose agents can try to interpret screenshots, but pixels are an unreliable source for exact figures, units, and provenance. Exporting the data into another tool removes it from the page where its context and visual evidence live.
This is especially costly for people who cannot rely on charts visually. A screen reader can traverse a table row by row, but a chart often collapses to “image.” The underlying problem is broader, though: conventional dashboards present answers chosen by their designers instead of letting each person interrogate the underlying evidence directly.
Auricle opens with this gap in plain sight: 2,026 rows. Zero answers. Four real climate datasets are available as semantic tables, but no dashboard or on-page chatbot is present.
Solution
Auricle turns the webpage itself into an interviewable climate instrument. The page exposes WebMCP tools backed by its own data. A user asks through their browser agent; the agent calls the page's tools; Auricle computes an exact, source-attributed answer and mirrors the result into the shared page.
Ask “Show me warming over time” and the page creates a NASA temperature chart. That action also registers the chart's five-tool family at runtime. Ask “When was the hottest year?” and Auricle answers +1.28 °C in 2024 while highlighting the point in gold. Ask “Play the century as sound” and it sonifies 146 years as a rising tone with a peak cue. Ask for warming stripes and the same data appears in a second, queryable form.
The result is not a chatbot bolted onto a dashboard. The browser agent supplies the conversation; the site supplies authoritative tools, data, visual state, speech-ready answers, and sonification. Every chart on the screen exists because somebody asked for it.
Why This Matters
Auricle demonstrates a new interaction model for the agentic web: people and agents compose and interrogate a live dashboard together without exporting data or guessing at pixels. The page remains the source of truth, the human directs the inquiry, and everyone in the session shares one evolving surface.
For blind and low-vision users, page-owned tools can replace pixel interpretation with exact, source-backed spoken answers and sonification. For everyone else, the same system makes complex evidence faster to explore and easier to verify. Accessibility is therefore a demanding proof case for a broadly useful product—not the boundary of Auricle's audience.
The reusable contribution is an agent-accessibility grammar:
Orient the agent before asking it to act. Make the tool surface follow the user's focus. Return narratable answers with figures, units, and provenance. Mirror every agent action into the visible and accessible page state. Treat non-visual encodings such as sound as first-class capabilities.
This pattern can extend beyond climate data to finance, health, public policy, and any data-rich site where fixed dashboards or visual-only answers limit exploration.
Key Features
Dashboard by conversation: the initial publication has no charts; create_view commissions each requested view. Dynamic WebMCP surface: five global tools exist at boot, while dataset-specific families register, change with focus, and unregister when their final view is removed—21 tools across the complete experience. Exact page-owned answers: queries run against baked NASA, Our World in Data, and NOAA data, with figure, unit, and source in every narrated return. Shared visual evidence: tool calls create views, highlight points and ranges, and leave a provenance footnote on the page. Accessible HTML foundation: semantic landmarks, real data tables, chart labels, keyboard-operable controls, reduced-motion support, and a visually hidden aria-live answer log. Sonification: time series become a roughly three-second pitch sweep with a distinct peak cue. Nine visualization forms: line, area, warming stripes, vertical and horizontal bars, share bars, scatter, live, and stat views. Self-describing experience: describe_screen tells a newly arrived agent what is present, focused, available, and possible next.
Architecture
Auricle is a static Vite + React + TypeScript application deployed on Vercel with no backend. Source datasets are fetched by a keyless script and baked into JSON, so the production experience does not depend on runtime data APIs.
A framework-agnostic registry wraps each internal tool definition into the WebMCP document.modelContext.registerTool shape. Five orientation and workspace tools register at page load. When create_view commissions a dataset, an AbortController-scoped family registers for that dataset; focus changes replace the active family, and removing the last view aborts it. The simulated live CO₂ view re-registers its family on each bounded tick so its tool description reflects current session state.
Agent calls share one execution path: validate the input, run the page-owned handler, return speech-ready text, emit a mirror event to every relevant view, and append the answer to both the visible provenance trail and hidden aria-live region. Charts are hand-rolled SVG.
Known Limitations
Accessibility is an important beneficiary and proof case, not a claim that Auricle has completed user validation. The experience was built by sighted developers and has not yet been tested with blind or low-vision users. ChatGPT's built-in browser with Site Tools was the AI agent tested end to end: it discovered Auricle's five global tools, invoked create_view to draw the warming curve, observed five temperature tools register dynamically, and invoked temp-anomaly_describe_trend, whose exact answer Auricle mirrored visibly into the page. Chrome 152 with WebMCP enabled and the Model Context Tool Inspector was used only as developer tooling for protocol-level inspection, not as another AI agent. The Mauna Loa “live” movement is a clearly labeled bounded simulation seeded from the latest baked NOAA weekly mean; it is not presented as a real-time NOAA stream. Sonification and warming stripes have established prior art. Auricle's contribution is combining them with exact, queryable WebMCP operations under a reusable agent-interaction and accessibility grammar.
Built With
- react
- svg
- typescript
- vercel
- vite
- web-audio-api
- webmcp

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