@askable-ui/vue

Vue 3 bindings for askable — give your UI components LLM awareness in one line.

Install

npm install @askable-ui/vue @askable-ui/core

Quick Start

<script setup lang="ts">
import { Askable, useAskable } from '@askable-ui/vue';

const { focus, promptContext } = useAskable();

async function ask(question: string) {
  return fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({
      messages: [
        { role: 'system', content: `UI context: ${promptContext.value}` },
        { role: 'user', content: question },
      ],
    }),
  });
}
</script>

<template>
  <Askable :meta="{ chart: 'revenue', period: 'Q3', value: '$128k' }" as="section">
    <RevenueChart />
  </Askable>
</template>

API

<Askable :meta="..." as="div">

Renders any element (default: div) with a data-askable attribute.

• scope is optional and writes data-askable-scope for scoped prompt/history queries.

useAskable(options?)

Returns reactive focus state from the shared context for the requested events configuration.

const { focus, promptContext, ctx } = useAskable();
// focus: Ref<AskableFocus | null>
// promptContext: ComputedRef<string>
// ctx: AskableContext

// Restrict which interactions trigger a context update
const { focus, promptContext } = useAskable({ events: ['click'] });

Options:

• events?: AskableEvent[] — trigger events: 'click', 'hover', 'focus'. Defaults to all three.

ctx advanced methods (via @askable-ui/core):

• ctx.select(el) — programmatically set focus ("Ask AI" button pattern)
• ctx.clear() — reset focus to null and emit 'clear' event
• ctx.getHistory(limit?) — focus history, newest first
• ctx.toHistoryContext(limit?, options?) — history as a prompt-ready string
• ctx.toPromptContext(options?) — full serialization options (format, maxTokens, excludeKeys, …)
• ctx.serializeFocus(options?) — structured AskableSerializedFocus object

The composable manages a shared singleton context per events configuration. Multiple useAskable() consumers with the same events reuse one observer lifecycle, while differing events configurations get isolated shared contexts of their own. Each shared context is automatically destroyed when its last consumer unmounts.

"Ask AI" button pattern

Use ctx.select() to set context explicitly when a user clicks a button:

<script setup lang="ts">
import { useTemplateRef } from 'vue';
import { Askable, useAskable } from '@askable-ui/vue';

const { ctx } = useAskable();
const card = useTemplateRef('card');
</script>

<template>
  <Askable ref="card" :meta="data">
    <RevenueChart :data="data" />
    <button @click="ctx.select(card); openChat()">Ask AI ✦</button>
  </Askable>
</template>

License

MIT

SSR note

useAskable() is safe to use in SSR frameworks such as Nuxt. Observation starts on the client in onMounted().