Your AI copilot can't tell which metric the user is looking at, which row triggered the question, or what they highlighted. askable-ui fixes that with one attribute — no screenshots, no stale system prompts, no guessing. The AI gets the exact data the user sees, updated on every interaction.
Interaction patterns
Askable gives users more ways to say “this is what I mean” without sending the entire page to the model.
Use DOM focus for the common path, then add explicit tools for visual ambiguity: draw over a chart, square off a fixed area, circle an outlier, lasso an irregular area, or send the text the user highlighted.
region.start({ shape: 'lasso' });
text.captureNow();
ctx.push(meta, text);
Click, hover, keyboard focus, and Ask AI buttons bind context to existing widgets.
Drag a rectangular page area when the answer depends on a visible section.
Constrain the selected area when the target should keep an equal width and height.
Circle an anomaly, data point, product defect, chart spike, or object on screen.
Freehand select irregular content that does not fit cleanly into a box.
Send highlighted copy without asking the model to infer which words matter.
Move structured context through MCP bridges, browser surfaces, and agent runtimes.
Other approaches serialize the entire page or guess what matters. askable captures exactly what the user marked: an element, area, shape, or text selection.
Register redacted, timeout-safe resolvers for paginated tables, documents, maps, charts, calendars, or custom state so selected context resolves the right backing data.
Works anywhere a user points, clicks, draws, circles, lassos, highlights, or hovers. React, Vue, Svelte, or plain HTML.
Live demo
Click a KPI, draw a region, circle a row, lasso a panel, or highlight text. The context panel updates in real time.
| Company | MRR | Plan | Status |
|---|
select context above…
waiting for focus…
How it works
No giant framework. No invasive serialization. Let the model borrow the user's explicit context.
Add data-askable wherever your UI already has meaning, then add tools for regions, circles, lasso selections, and highlighted text.
<div data-askable='{"metric":"MRR","value":"$128K"}'>
...
</div>
Call askable.observe(document) once. askable tracks click, hover, focus, explicit selection, and semantic app events.
askable.observe(document, {
events: ['click']
});
At the AI boundary, package the user's question with prompt context, the selected packet, and app-owned sources. The assistant now knows what the user actually meant.
const request = await askable.toAgentRequest(question, {
packet: selectedPacket,
contextFromPacket: true,
selectionFromPacket: true,
sources: ['accounts']
});
// → { question, context, packet, focus, timestamp }
Packages
One core library. Thin adapters for every framework. Same mental model everywhere.
useAskableCartSource(), useAskableMultistepSource(), useAskableFormSource(), useAskableTableSource(), useAskableTimeSource(), useAskableThemeSource() and more. <Askable> for React 17+.useAskableCartSource(), useAskableMultistepSource(), useAskableFormSource(), useAskableThemeSource(), useAskableLocaleSource() and more. <Askable> for Vue 3.useAskableCartSource(), useAskableMultistepSource(), useAskableScrollSource(), useAskableWindowSource() and more.useAskableCartSource(), useAskableMultistepSource(), useAskableNetworkSource(), useAskableFocusSource() and more. <Askable> for SolidJS.AskableCartSourceService, AskableMultistepSourceService, AskableFormSourceService, AskableTableSourceService, AskableTimeSourceService and more.useAskable() and <Askable> for Qwik City apps — resumable, zero-JS-by-default.<askable-context> custom element — zero build step, works in HTMX, Ember, or plain HTML via CDN.Integrations
toPromptContext() returns a plain string. Pass it to any LLM framework or API — no adapter needed.
useCopilotReadable(). The LLM sees what the user selected.WebMCP + hosted MCP
WebMCP is the browser-local path: a page widget connects to a local MCP server and exposes approved page tools, prompts, and resources. Hosted MCP is the separate HTTPS endpoint path for remote MCP clients.
Add a page-side bridge that exposes the current Askable packet, prompt text, and approved app sources as page-owned context.
createAskableMcpPageBridge({
provider,
allowedOrigins: [
window.location.origin
]
});
The user runs a local WebMCP MCP server in their client, creates a token, then connects the page widget with that token.
{
"mcpServers": {
"webmcp": {
"command": "npx",
"args": [
"-y",
"@jason.today/webmcp@latest",
"--mcp"
]
}
}
}
Askable can provide the selected element, lassoed region, highlighted text, viewport, or app-owned source as an askable://current page resource.
window.postMessage({
type: "read_current_resource",
options: {
resource: { uri: "askable://current" }
}
});
For server-side use, expose the same provider through a secure HTTPS MCP route with auth, CORS, request limits, and tenancy checks.
createAskableMcpWebHandler({
authorize,
provider,
maxRequestBodyBytes: 256 * 1024
});
MCP — Model Context Protocol
Expose your app's live UI context as an MCP server. Claude, Cursor, and any MCP client can call get_current_context to see exactly what the user is looking at — no screenshots, no description needed.
Any page annotated with data-askable instantly becomes queryable by AI agents. The MCP bridge translates live DOM state into structured Context packets that agents can read and reason about.
import { createAskableMcpServer } from '@askable-ui/mcp';
const server = createAskableMcpServer({ provider });
server.connect(transport); // stdio, SSE, or WebSocket
Returns the focused element's structured metadata, surrounding context, and interaction history as a typed JSON packet.
Returns a prompt-ready text rendering of the current context — drop it directly into any system message.
Set requireRedacted: true to block unredacted packets from leaving the page. PII stays in your app.
The MCP server exposes the full Context packet JSON Schema so agents can self-document and validate responses.
claude_desktop_config.json
{
"mcpServers": {
"my-app": {
"command": "node",
"args": ["./mcp-server.js"]
}
}
}
Why askable-ui
Every other approach to giving AI context about your UI breaks down under real conditions.
Context Sources — v0.15.0
45+ built-in sources cover UI state, user session, environment, and device — automatically composed into a single context string the AI can reason about.
useAskableCartSource() — items, quantities, subtotal, tax, shipping, coupon. Mutate with addItem, setTotals, clearCart. Works in React, Vue, Svelte, SolidJS, and Angular.useAskableMultistepSource() — step name, index, progress %, isComplete. Navigate with next, prev, goTo. Works in all frameworks.useAskableFormSource(), useAskableTableSource(), useAskableSearchSource(), useAskableTabSource(), useAskableMediaSource().useAskableThemeSource(), useAskableWindowSource(), useAskableLocaleSource(), useAskableNetworkSource(), useAskablePermissionSource(), useAskableConnectionSource().useAskableTimeSource() with business hours config, useAskableGeolocationSource(), useAskableBatterySource(), useAskablePerformanceSource() with Core Web Vitals.useAskableAnalyticsSource(), useAskableAbTestSource(), useAskableFeatureFlagSource(), useAskableIdleSource(), useAskableFocusSource(), useAskableScrollSource().All sources are composable — read the full API reference →
Drop data-askable on your most important element. Working context in under five minutes — or scaffold a full copilot app in one command.