Context-aware UI primitives for AI products.
Askable lets apps send the exact thing a user is looking at, selecting, or asking about into an assistant. No screenshots required. No duplicated prompt state. One annotated UI can feed chat, agents, MCP page resources, and custom workflows.
<button data-askable='{"action":"refund","order":"A-1042","status":"blocked"}'>
Refund order
</button>import { createAskableContext } from '@askable-ui/core';
const ctx = createAskableContext();
ctx.observe(document);
const uiContext = ctx.toPromptContext();| Area | Purpose |
|---|---|
| UI context capture | Click, hover, focus, keyboard, text selection, region, circle, and lasso context |
| Framework adapters | Native integrations for React, Vue, Svelte, Solid, Angular, Qwik, React Native, and Web Components |
| Open Context | Structured packets for passing selected page context into AI systems |
| Web MCP | Browser-local page resources for Claude, ChatGPT, and MCP-capable clients |
| Developer tooling | Starter apps, demos, package previews, and release automation |
All public npm packages are published under the @askable-ui scope. Current
stable release: v0.15.0.
| Package | Description |
|---|---|
@askable-ui/context |
Open Context packet types and schema |
@askable-ui/core |
Framework-agnostic DOM observer and context engine |
@askable-ui/react |
React hooks, components, inspector, and source adapters |
@askable-ui/vue |
Vue 3 composables and components |
@askable-ui/svelte |
Svelte actions, stores, components, and capture helpers |
@askable-ui/solid |
SolidJS primitives and source hooks |
@askable-ui/angular |
Angular directive, services, and source adapters |
@askable-ui/qwik |
Qwik hooks and components |
@askable-ui/react-native |
React Native hooks and screen context helpers |
@askable-ui/web-component |
Framework-neutral <askable-context> custom element |
@askable-ui/mcp |
MCP bridge and page-resource helpers |
@askable-ui/create-app |
Project scaffolder for Askable apps |
npm install @askable-ui/reactimport { Askable, useAskable } from '@askable-ui/react';
export function Dashboard() {
const askable = useAskable();
return (
<>
<Askable meta={{ metric: 'MRR', value: '$84,000', trend: '+12%' }}>
<section>MRR: $84,000</section>
</Askable>
<button onClick={() => sendToAssistant(askable.promptContext)}>
Ask AI
</button>
</>
);
}