Web Context Interface

Appearance

WCIWeb Context Interface

An open standard and TypeScript SDK that makes web pages natively readable and actionable for LLM-based agents — in under 8 KB per layer.

Get Started
View Specification
Live Demo
NotebookLM
WCI — Web Context Interface
🏷️

Semantic HTML

Extend standard HTML with data-wci-* attributes — roles, descriptions, state snapshots, and guards. No framework lock-in.

⚗️

Distiller

Compress annotated DOM into token-efficient JSON or Markdown views scoped to landmarks and priority-ranked nodes.

⚡

Bridge

Dispatch typed actions (fill, click, select…) and receive structured ActionResult payloads with side-effect detection.

🌐

Site context

Root-level wci.txt, wci.json, and wci.md files define policy, manifests, and LLM system-prompt narrative — like robots.txt for agents.

How it works ​

WCI architecture: data-wci-* markup, distiller, LLM context, WciBridge actions, and site context files

Install ​

bash
npm install @webcontextinterface/core

Or use individual packages: @webcontextinterface/spec, @webcontextinterface/distiller, @webcontextinterface/bridge, @webcontextinterface/context.

Site root files ​

FilePurpose
/wci.txtAllow/deny scopes, rate limits, authentication
/wci.jsonStructured manifest and task flows
/wci.mdNarrative context for the LLM system prompt

Evaluation dataset ​

The official 50-scenario grounding benchmark is published on Zenodo (CC BY 4.0):

Each scenario includes raw HTML, DOM outline, interactive candidates, WCI full, and WCI grounding representations. The in-repo copy lives under demo/scenarios/; methodology and commands are in evals/README.md.

Handmade (5) — rich, hand-authored DOM preserved on disk: flight booking, banking, checkout, dashboard, and social media (flight-booking, banking, checkout, admin-dashboard, social-feed). The other 45 scenarios are synthetic layouts generated from domain templates.

NotebookLM ​

A shared NotebookLM notebook is a good way to introduce WCI — audio overviews, briefings, and Q&A grounded in the paper, specification, and benchmark materials. Viewers need a Google account to open the notebook.

Local development

Run npm run demo for the demo on port 5173, or npm run website:build then npm run website:preview for the combined static site (docs + demo at /demo/). Browse all 50 benchmark scenarios (raw and annotated HTML with interactive data-wci-* tooltips) at /demo/scenarios.html.