Give any UI element LLM awareness with one attribute.
<div data-askable='{"chart":"revenue","delta":"-12%","period":"Q3"}'>
<RevenueChart />
</div>Your LLM doesn't know what the user is looking at. They click a chart, hover an error row, focus a form field — then ask "what's wrong?" Without context, your AI guesses.
askable fixes this in one attribute. The same data that renders your component becomes the AI's context — no duplication, no hardcoding.
// Data from your API drives both the UI and the AI
const { data } = useSWR('/api/metrics');
<Askable meta={data.revenue}> {/* → data-askable set from API */}
<RevenueChart data={data.revenue} /> {/* → same data renders the chart */}
</Askable>When the user clicks, ctx.toPromptContext() gives your LLM exactly what they're looking at.
JavaScript
| Package | Description |
|---|---|
@askable-ui/core |
Framework-agnostic observer. Zero dependencies. ~1kb gz |
@askable-ui/react |
React 17+ — useAskable() hook + <Askable> component |
@askable-ui/vue |
Vue 3 — useAskable() composable + <Askable> component |
@askable-ui/svelte |
Svelte 4 — createAskableStore() + Askable.svelte |
Python
| Package | Description |
|---|---|
askable-django |
Django — template tags + auto-inject middleware |
askable-streamlit |
Streamlit — askable_context() component |
npm install @askable-ui/coreimport { createAskableContext } from '@askable-ui/core';
const ctx = createAskableContext();
ctx.observe(document);
// Inject into any LLM call
const prompt = ctx.toPromptContext();
// → "User is focused on: chart: revenue, delta: -12%, period: Q3"ctx.observe(document, { events: ['click'] }) // only on click
ctx.observe(document, { events: ['hover'] }) // only on hover
ctx.observe(document, { events: ['focus'] }) // only on focus
ctx.select(element) // programmatic — "Ask AI" button