Confidence Ink

AI chats 4

About

A text display that renders AI-generated answers with per-word confidence, dimming words the model was unsure of and letting a reader open any uncertain word to see the alternatives it nearly chose, with their odds, and swap one in.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Confidence Ink to your project and fits it to your theme.

Code

How Confidence Ink is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { ConfidenceInk, type Token } from "@/components/ui/confidence-ink";

// Written compactly: plain words are near-certain; [word|p|alt:p|alt:p] marks a token the model hesitated on.
const SOURCE =
  "The old [souq|0.58|market:0.31|bazaar:0.07] in Muttrah opens at [8:30|0.34|9:00:0.29|8:00:0.22|10:00:0.1] in the morning and closes for a [break|0.71|siesta:0.12|pause:0.09] between 1 and 4 in the afternoon. Most stalls sell frankincense, silver and [textiles|0.47|fabric:0.28|cloth:0.14|scarves:0.08], and prices are [usually|0.52|often:0.3|always:0.06] open to friendly bargaining. On Fridays the souq opens only in the [evening|0.39|afternoon:0.33|morning:0.21], so plan a weekday visit if you want the [quieter|0.44|calmer:0.29|emptier:0.17] hours.";

function parse(src: string): Token[] {
  const out: Token[] = [];
  for (const part of src.split(/(\[[^\]]+\])/)) {
    if (part.startsWith("[")) {
      const [text, p, ...alts] = part.slice(1, -1).split("|");
      out.push({
        text,
        p: +p,
        alternatives: alts.map((a) => {
          const k = a.lastIndexOf(":");
          return { text: a.slice(0, k), p: +a.slice(k + 1) };
        }),
      });
    } else {
      for (const w of part.match(/\s*\S+|\s+$/g) ?? [])
        out.push({ text: w, p: 0.9 + ((w.length * 7) % 10) / 100 });
    }
  }
  return out;
}

const TOKENS = parse(SOURCE);

export default function ConfidenceInkDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background px-4 py-10">
      <div className="w-full max-w-[40rem]">
        <ConfidenceInk
          label="Qalam · when is the Muttrah souq open?"
          tokens={TOKENS}
          theme="light"
        />
      </div>
    </div>
  );
}