Precision
Context follows attention
Users ask about whatever they're staring at. askable captures the exact focal target — not a serialized page dump.
✦ 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
Elegant
Metadata lives where the UI already lives
The same API payload that renders a row or card becomes model-ready context with one attribute.
Universal
Works in real product surfaces
Dashboards, forms, tables, support tooling — anywhere a user points, hovers, clicks, or focuses.
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:
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.
2
Observe
Call askable.observe(document) once. askable tracks click, hover, or focus and adapts as the DOM changes.
3
Inject
At the AI boundary, send askable.toPromptContext(). The assistant now knows what the user is actually looking at.
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.
~1kb gz
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.
~0.5kb gz
JS · Svelte
@askable-ui/svelte
Svelte store and component helpers for fast-moving interfaces.
~0.5kb gz
Python · Django
askable-django
Template tags and auto-inject middleware for Django 4+.
PyPI
Python · Streamlit
askable-streamlit
Custom component that returns UI focus as a Python dict.
PyPI
Start with one attribute.
Drop data-askable on your most important element. Working context in under five minutes.