Prompt library

npx shadcn@latest add "@assistant-ui/elements-prompt-library"

npx assistant-ui@latest init

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/ai-sdk";

export default function App() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* your components */}
    </AssistantRuntimeProvider>
  );
}

npx shadcn@latest add "@assistant-ui/elements-prompt-library"

A searchable list of saved prompts that previews the highlighted one, body and variable placeholders included, before you commit to it. With a runtime only the final insert reaches into assistant-ui state; standalone you own selection and insertion too.

Getting started

"use client";

import { useAui } from "@assistant-ui/react";
import { useState } from "react";
import {
  PromptLibrary,
  type SavedPrompt,
} from "@/components/assistant-ui/elements/prompt-library";

export function PromptLibraryPanel({
  prompts,
}: {
  prompts: readonly SavedPrompt[];
}) {
  const aui = useAui();
  const [query, setQuery] = useState("");
  const [selectedId, setSelectedId] = useState(prompts[0]?.id ?? "");

  return (
    <PromptLibrary
      prompts={prompts}
      query={query}
      selectedId={selectedId}
      onQueryChange={setQuery}
      onSelect={setSelectedId}
      onInsert={(id) => {
        const prompt = prompts.find((p) => p.id === id);
        if (prompt) aui.composer.setText(prompt.body);
      }}
    />
  );
}

"use client";

import { useState } from "react";
import { PromptLibrary } from "@/components/assistant-ui/elements/prompt-library";

const prompts = [
  {
    id: "bug-report",
    name: "Bug report",
    body: "Describe the bug, the steps to reproduce it, and the expected behavior.",
    variables: [],
  },
  {
    id: "summarize",
    name: "Summarize {topic}",
    body: "Summarize {topic} in three sentences for a non-technical reader.",
    variables: ["topic"],
  },
];

export function PromptLibraryPanel({
  onInsert,
}: {
  onInsert: (text: string) => void;
}) {
  const [query, setQuery] = useState("");
  const [selectedId, setSelectedId] = useState(prompts[0].id);

  return (
    <PromptLibrary
      prompts={prompts}
      query={query}
      selectedId={selectedId}
      onQueryChange={setQuery}
      onSelect={setSelectedId}
      onInsert={(id) => {
        const prompt = prompts.find((p) => p.id === id);
        if (prompt) onInsert(prompt.body);
      }}
    />
  );
}

Anatomy

<div data-slot="prompt-library">
  <div>
    <svg /* bookmark icon */ />
    <input role="combobox" aria-expanded aria-controls placeholder="Search prompts" />
  </div>
  <div role="listbox" aria-label="Saved prompts">
    {/* one option row per match, filtered by name */}
  </div>
  {/* "Nothing matches “query”" when there are no matches */}
  {/* preview: body text, then a chip per variable, only for the selected match */}
</div>

Filtering matches prompts against query by substring on name only, case-insensitively; the preview panel at the bottom renders only when selectedId is among the current matches, so a query that filters the selected prompt out of the list hides its preview along with it. With onSelect, arrow keys move the highlighted row within the current matches; if the selected id has been filtered out, ArrowDown starts from the first match and ArrowUp from the last. Enter inserts the highlighted match, the same action a double click on a row performs. With only onInsert, rows are tabbable and insert on one pointer or keyboard activation.

Examples

Formatting the variable count

The chip next to a match, and the chips in the preview, are display only; the element counts and lists variables but never substitutes them into body.

{prompt.variables.length > 0 && (
  <span>{`${prompt.variables.length} ${prompt.variables.length === 1 ? "var" : "vars"}`}</span>
)}

Restyle the list

The search field and the preview panel both use the shared field surface, and every count uses mono, from surfaces.tsx.

<PromptLibrary className="max-w-md" prompts={prompts} query={query} selectedId={selectedId} onQueryChange={setQuery} onSelect={setSelectedId} onInsert={onInsert} />

API reference