Ask AI and Insight Card

Code

<AskAiSelection onAsk={async ({ prompt, selection, actionId }) => (await model.ask(prompt, selection)).text}>  <article>...</article></AskAiSelection><AiInsightCard  title="Signups fell 18% on mobile"  tone="warning"  metric={{ label: "Mobile signups", value: 1240, delta: -0.18 }}  body="The drop starts on the day the new form shipped. [Details](#)"  confidence={0.78}  actions={[{ id: "open", label: "Open the funnel" }]}  onAction={(id) => go(id)}  onAsk={() => openChat()}/>

AI Assistant · beta

Live examples and controls: Ask AI and Insight Card in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/ask-ai.json

AskAiSelection wraps read-only content. Select text and a small "Ask AI" pill appears by the selection. Press it and a panel offers quick actions and a question box, then shows the answer in place. AiInsightCard is the other half: something the AI noticed, placed where it applies.

When to useCopy Anchor Link

• Articles, docs, reports, emails and tickets where a reader may want a word or passage explained.
• A dashboard or record that should surface one AI finding with its reasoning and next step.

When not to useCopy Anchor Link

• A conversation: use CopilotChat.
• Editing text: this never changes the page. Offer onReplace and change the text yourself.

ImportCopy Anchor Link

import { AskAiSelection, AiInsightCard } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

<AskAiSelection onAsk={async ({ prompt, selection, actionId }) => (await model.ask(prompt, selection)).text}>
  <article>...</article>
</AskAiSelection>

<AiInsightCard
  title="Signups fell 18% on mobile"
  tone="warning"
  metric={{ label: "Mobile signups", value: 1240, delta: -0.18 }}
  body="The drop starts on the day the new form shipped. [Details](#)"
  confidence={0.78}
  actions={[{ id: "open", label: "Open the funnel" }]}
  onAction={(id) => go(id)}
  onAsk={() => openChat()}
/>

APICopy Anchor Link

AskAiSelectionCopy Anchor Link

Selections inside inputs, textareas, editors and any data-ask-ai-ignore element are ignored.

AiInsightCardCopy Anchor Link

ExamplesCopy Anchor Link

• Only explain and translate: actions={[{ id: "explain", label: "Explain" }, { id: "translate", label: "Translate" }]}.
• A cost metric where lower is better: metric={{ label: "Cost", value: 92, delta: -0.1, invert: true }} shows green.

AccessibilityCopy Anchor Link

• The pill is a button, and the keyboard shortcut does the same for people who select with the keyboard.
• Opening the panel moves focus to the question box. Escape closes it and clears the selection.
• The pill does not steal focus, so a screen reader keeps its place in the text.
• The insight card is a labelled section. The tone is written out, not colour only.

RTL and i18nCopy Anchor Link

• English and Arabic labels come from useOptionalNasaq(), and every text can be replaced with labels.
• The quote, question and answer use dir="auto". The card accent sits on the start edge, so it flips in RTL.
• Percent and number values use locale digits through Num.

Styling and tokensCopy Anchor Link

The popup uses the popover and floating tokens. The insight edge uses --nq-accent and the status families.

Do / Don'tCopy Anchor Link

• Do return short answers. The panel is small.
• Do mark unsure findings with a confidence.
• Don't send the selection anywhere before the reader asks. Nothing is sent until they press an action.
• Don't wrap forms or editors. They are ignored anyway.

RelatedCopy Anchor Link

AiStates, AiCitedAnswer, CopilotChat, Popover.