askable-uiUI context your LLM can actually use

Current npm release: v0.15.0.

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

Product video ​

Latest in v0.15.0 ​

• Cart source — useAskableCartSource() with addItem, removeItem, updateQuantity, setTotals, clearCart; computes subtotal, tax, shipping, and total automatically
• Multistep source — useAskableMultistepSource() tracks wizard progress: step name, index, progress %, isComplete; navigate with next, prev, goTo
• All six framework packages (React, Vue, Svelte, SolidJS, Angular, web-component) updated

Also in v0.14.0 ​

• browser-local MCP page resources with read_current_resource and askable://current
• page bridge responses that return resource-shaped JSON or prompt-ready text for local companions
• starter app dependency pins advanced to ^0.14.0
• main website navigation and WebMCP copy aligned with the browser-local MCP flow

Also in v0.13.1 ​

• remote Web MCP support with createAskableMcpWebHandler() for stateless Streamable HTTP endpoints
• Web MCP production controls for authorization, CORS/preflight, response headers, and sanitized telemetry
• MCP docs and homepage examples for connecting approved Claude and ChatGPT clients
• server-side agent request validation with isAskableAgentRequest()
• packet-backed agent requests that preserve structured source selections for downstream AI handlers
• typed packet source selections and default packet sources based on selected interaction mode

Also 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.14.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.15.0
• Context Packets
• React interaction patterns
• Angular guide
• MCP integration guide
• 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>