No page scraping
Context follows attention, not the whole DOM
Other approaches serialize the entire page or guess what matters. askable captures exactly the element the user is looking at — one attribute, one focus target.
✦ One attribute. Real context.
Your model knows what just caught their eye.
Put data-askable on any meaningful element, observe once, then pass
askable.toPromptContext() at the AI boundary. The assistant gets the user's exact
visual focus — not a guess, the real thing.
live focus lens
MRR
$128,400
+12.4% this month
Churn
3.2%
improving
NPS
67
industry avg 44
Upsell
Umbrella
starter → business
Acme$8.4khealthy
Globex$5.2kat risk
Umbrella$2.1kexpanding
The assistant can read what's in focus without scraping your whole app.
Which account needs attention first?
Globex. No login in 14 days, business plan, $5.2k MRR at risk.
<tr data-askable='{"company":"Globex Inc","status":"at_risk","last_login":"14 days ago"}'>
...
</tr>
User is focused on: company: Globex Inc, status: at_risk, last_login: 14 days ago
Zero glue code
Your API data is already the metadata
The same object that renders a row or card becomes model-ready context. No separate data pipeline, no prompt templates, no mapping layer.
Any stack
Dashboards, forms, tables, support tools
Works anywhere a user points, clicks, or hovers. React, Vue, Svelte, or plain HTML — same one-attribute pattern.
Live demo
Focus the UI. Watch the prompt tighten.
Click a KPI card or account row. The context panel updates in real time — that's what goes into your model.
Trigger on:
Format:
Text:
Top Accounts same data drives UI + AI context
| Company | MRR | Plan | Status |
|---|
element in your UI
same rendered node, askable metadata attached
hover or click an element above…
askable.toPromptContext()
ready to inject at the model boundary
waiting for focus…
How it works
Three simple steps.
No giant framework. No invasive serialization. Let the model borrow the user's focus.
1
Annotate
Add data-askable wherever your UI already has meaning: rows, charts, KPIs, inputs, cards, timeline items.
<div data-askable='{"metric":"MRR","value":"$128K"}'>
...
</div>
2
Observe
Call askable.observe(document) once. askable tracks click, hover, or focus and adapts as the DOM changes.
askable.observe(document, {
events: ['click']
});
3
Inject
At the AI boundary, send askable.toPromptContext(). The assistant now knows what the user is actually looking at.
const context = askable.toPromptContext(); // → "User is focused on: metric: MRR, value: $128K"
Packages
Pick your stack. Keep the idea.
One core library. Thin adapters for every framework. Same mental model everywhere.
JS · Core
@askable-ui/core
Framework-agnostic observer and context builder. Zero dependencies.
npm
JS · React
@askable-ui/react
useAskable() hook and <Askable> component for React 17+.JS · Vue
@askable-ui/vue
Vue 3 composables and component for the same focus-aware pattern.
npm
JS · Svelte
@askable-ui/svelte
Svelte store and component helpers for fast-moving interfaces.
npm
More coming
Your framework?
The core is framework-agnostic. Writing an adapter is ~30 lines. PRs welcome.
coming soon
Integrations
Plugs into your AI layer.
toPromptContext() returns a plain string. Pass it to any LLM framework or API — no adapter needed.
Framework
CopilotKit
Pass context via
useCopilotReadable(). The LLM sees what the user selected.Framework
Vercel AI SDK
Inject into the system message or tool context for streaming chat UIs.
Framework
LangChain
Drop into a prompt template variable or tool description for context-aware agents.
Any LLM API
Direct API
Append the string to your system or user message. Works with OpenAI, Anthropic, or any provider.
Start with one attribute.
Drop data-askable on your most important element. Working context in under five minutes.