https://github.com/askable-ui/askable
Two lines of code to give your LLM eyes. One attribute.
https://github.com/askable-ui/askable
ai ai-agents copilot developer-tools django frontend llm prompt-engineering python react streamlit svelte ui vue
Last synced: 18 days ago
JSON representation
Two lines of code to give your LLM eyes. One attribute.
- Host: GitHub
- URL: https://github.com/askable-ui/askable
- Owner: askable-ui
- License: mit
- Created: 2026-03-28T02:38:08.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-05-31T00:44:55.000Z (18 days ago)
- Last Synced: 2026-05-31T01:14:10.165Z (18 days ago)
- Topics: ai, ai-agents, copilot, developer-tools, django, frontend, llm, prompt-engineering, python, react, streamlit, svelte, ui, vue
- Language: TypeScript
- Homepage: https://askable-ui.com
- Size: 12.3 MB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Agents: AGENTS.md
Awesome Lists containing this project
README
askable-ui
Two lines of code to give your LLM eyes.
One attribute. Zero prompt engineering. It knows exactly what the user sees.
Quick Start ·
Why ·
How it works ·
Works with ·
Features ·
Packages ·
Docs ·
Agent Templates ·
Live Demo
---
## Quick start
```bash
npm install @askable-ui/react
```
```tsx
import { Askable, useAskable } from '@askable-ui/react';
function Dashboard({ kpi }) {
const { promptContext } = useAskable();
// promptContext: "User is focused on: metric=revenue, value=$2.3M, delta=+12%"
return (
);
}
```
That's it. `promptContext` updates automatically as the user interacts. Pass it to any LLM.
Need a runnable starter app with Askable and CopilotKit?
```bash
npm create @askable-ui/app my-app
cd my-app
npm install
npm run dev
```
---
## Why
AI copilots ask users to _describe_ what they're looking at.
That's friction — and it's imprecise.
askable-ui solves this with one HTML attribute. Mark any element with `data-askable`, and the library tracks user focus and serializes it into a prompt-ready string. The model gets the user's exact visual context — not a guess, the real thing.
No page scraping. No DOM serialization. No prompt bloat. **Lightweight and zero-dependency.**
---
## How it works
**1. Annotate** — same data that renders your chart feeds the AI
```tsx
```
**2. Observe** — automatic, zero config
```tsx
const { ctx, promptContext } = useAskable();
// promptContext updates whenever the user clicks, hovers, or focuses
const { ctx: tableCtx } = useAskable({ name: 'table' });
const { ctx: chartCtx } = useAskable({ name: 'chart' });
// named contexts stay isolated for multi-region pages
const { ctx: screenCtx } = useAskable({ viewport: true });
// screenCtx.toViewportContext() serializes currently visible annotated elements
```
**3. Inject** — at the AI boundary, one line
```ts
const result = await streamText({
model: openai('gpt-4o'),
system: `You are a helpful analytics assistant.\n\n${promptContext}`,
messages,
});
```
---
## Works with
**LLM SDKs** — OpenAI · Anthropic · Vercel AI SDK · CopilotKit · LangChain · any SDK
**Frameworks** — React · Vue 3 · Svelte · Vanilla JS · Next.js · Nuxt · SvelteKit
askable-ui is the context layer. It doesn't replace your LLM SDK — it gives it eyes.
---
## Features
- **Zero config** — one attribute, works with any DOM structure, styling system, or component library
- **React, Vue, Svelte** — idiomatic hooks and components; core is framework-agnostic
- **SSR safe** — defers to client lifecycle, no `window is not defined`
- **"Ask AI" button** — `ctx.select(element)` pins focus to any element programmatically
- **Conversation history** — `ctx.toHistoryContext(n)` for multi-turn context
- **Viewport awareness** — `ctx.getVisibleElements()` / `ctx.toViewportContext()` for on-screen context
- **Redaction hooks** — strip sensitive fields before data reaches serialization
- **Inspector panel** — `` or `useAskable({ inspector: true })` for a live dev overlay
- **Agent templates** — reusable `AGENTS.md` guidance and copy-paste prompts for coding-agent-driven adoption
- **Lightweight core** — zero runtime dependencies
---
## Packages
| Package | Version | Use when |
|---|---|---|
| [`@askable-ui/core`](https://www.npmjs.com/package/@askable-ui/core) | [](https://www.npmjs.com/package/@askable-ui/core) | Vanilla JS, custom framework, or as a peer dep |
| [`@askable-ui/react`](https://www.npmjs.com/package/@askable-ui/react) | [](https://www.npmjs.com/package/@askable-ui/react) | React 18+ |
| [`@askable-ui/react-native`](https://www.npmjs.com/package/@askable-ui/react-native) | [](https://www.npmjs.com/package/@askable-ui/react-native) | React Native (initial press-driven adapter) |
| [`@askable-ui/vue`](https://www.npmjs.com/package/@askable-ui/vue) | [](https://www.npmjs.com/package/@askable-ui/vue) | Vue 3 |
| [`@askable-ui/svelte`](https://www.npmjs.com/package/@askable-ui/svelte) | [](https://www.npmjs.com/package/@askable-ui/svelte) | Svelte 4 & 5 |
| [`@askable-ui/create-app`](https://www.npmjs.com/package/@askable-ui/create-app) | npm package | React + Vite + CopilotKit starter scaffold |
Framework quick starts
### React Native
```bash
npm install @askable-ui/react-native
```
```tsx
import { Pressable, Text } from 'react-native';
import { Askable, useAskable } from '@askable-ui/react-native';
function RevenueCard() {
const { ctx, promptContext } = useAskable();
return (
Revenue
);
}
```
For a runnable mobile demo, see [`examples/react-native-expo`](./examples/react-native-expo).
### Vue 3
```bash
npm install @askable-ui/vue
```
```vue
import { Askable, useAskable } from '@askable-ui/vue';
const { promptContext } = useAskable();
const props = defineProps(['kpi']);
```
### Svelte
```bash
npm install @askable-ui/svelte
```
```svelte
import { Askable, useAskable } from '@askable-ui/svelte';
const { promptContext } = useAskable();
export let kpi;
```
### Vanilla JS
```bash
npm install @askable-ui/core
```
```ts
import { createAskableContext } from '@askable-ui/core';
const ctx = createAskableContext();
ctx.observe(document.body);
ctx.on('focus', () => {
console.log(ctx.toPromptContext());
// "User is focused on: — metric: revenue, value: $2.3M"
});
```
---
## Live links
- **Docs:** [askable-ui.com/docs](https://askable-ui.com/docs/)
- **Analytics dashboard demo:** [askable-mu.vercel.app](https://askable-mu.vercel.app/)
---
## Documentation
**[askable-ui.com/docs](https://askable-ui.com/docs/)**
| Guide | |
|---|---|
| [Getting started](https://askable-ui.com/docs/guide/getting-started) | Install, observe, inject |
| [Annotating elements](https://askable-ui.com/docs/guide/annotating) | `data-askable`, nesting, priority |
| [React](https://askable-ui.com/docs/guide/react) · [Vue](https://askable-ui.com/docs/guide/vue) · [Svelte](https://askable-ui.com/docs/guide/svelte) | Framework guides |
| [CopilotKit integration](https://askable-ui.com/docs/guide/copilotkit) | Context-in-input pattern |
| [API reference](https://askable-ui.com/docs/api/core) | Full type docs |
---
## Using with coding agents
[`AGENTS.md`](./AGENTS.md) contains copy-pasteable instructions for Claude, Cursor, Codex, and similar tools. Drop it into your project root and your coding agent will know how to integrate `askable-ui` correctly — annotation patterns, passive vs explicit flows, sanitization, and common mistakes.
---
## Contributing
PRs welcome! See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions.
## License
MIT — see [LICENSE](./LICENSE)