askable-uiUI context your LLM can actually use

Current npm release: v0.12.0.

Need a breaking-release upgrade path? See Migration Guides. Versioned docs are available at /docs/<version>/.

Product video ​

Latest in v0.12.0 ​

• lasso capture via shape: 'lasso' for freehand-selected page regions
• generic registerSource() resolvers plus source helper factories for app-owned context
• React, Vue, and Svelte lifecycle helpers for resolver-backed app state
• async prompt and packet serialization with toPromptContextAsync(), toContextAsync(), and toContextPacketAsync()
• agent request packaging with toAgentRequest()
• source-backed live subscriptions with subscribeAsync()
• point-path metadata on lasso Context packets
• starter app dependency pins advanced to ^0.12.0
• continued support for region/circle/text capture, MCP Context packets, and framework wrappers

Interaction patterns ​

Askable can capture context at different levels of user intent:

Every pattern can produce a prompt string with toPromptContext() or a structured Context packet with toContextPacket().

Start here:

• What’s New in v0.12.0
• Context Packets
• React interaction patterns
• AI SDK integration patterns
• CopilotKit guide

Quick look ​

import { createAskableContext } from '@askable-ui/core';

const ctx = createAskableContext();
ctx.observe(document);

// Anywhere in your AI handler:
ctx.toPromptContext();
// → "User is focused on: metric: revenue, delta: -12%, period: Q3"

import { useAskable, Askable } from '@askable-ui/react';

function Dashboard({ data }) {
  const { promptContext } = useAskable();

  return (
    <Askable meta={{ metric: 'revenue', delta: data.delta }}>
      <RevenueChart data={data} />
    </Askable>
  );
}

import { Pressable, Text } from 'react-native';
import { useAskable, Askable } from '@askable-ui/react-native';

function RevenueCard() {
  const { ctx, promptContext } = useAskable();

  return (
    <Askable ctx={ctx} meta={{ metric: 'revenue' }} text="Revenue card">
      <Pressable>
        <Text>Revenue</Text>
      </Pressable>
    </Askable>
  );
}

<script setup>
import { useAskable, Askable } from '@askable-ui/vue';
const { promptContext } = useAskable();
</script>

<template>
  <Askable :meta="{ metric: 'revenue', delta: data.delta }">
    <RevenueChart :data="data" />
  </Askable>
</template>

<script>
  import { createAskableStore, Askable } from '@askable-ui/svelte';
  const { promptContext } = createAskableStore();
</script>

<Askable meta={{ metric: 'revenue', delta: data.delta }}>
  <RevenueChart {data} />
</Askable>