CtrlK
BlogDocsLog inGet started
Tessl Logo

assistant-ui-setup

Installs and configures assistant-ui with the `assistant-ui` CLI (`create`, `init`, `add`, `update`, `upgrade`, `codemod`, `doctor`, `info`, `mcp`, `agent`) and picks the runtime adapter for a backend. Use for first-time install (`npx assistant-ui@latest create`, templates, `--example` scaffolds), adding to an existing Next.js app (`init`), or keeping an install current. Covers the runtime hook per backend: `useChatRuntime` (AI SDK v7), `useLangGraphRuntime`, `useStreamRuntime` (LangChain), `useAdkRuntime`, `useA2ARuntime`, `useAgUiRuntime`, `useEveAgentRuntime`, `useOpenCodeRuntime`, `useLocalRuntime`, `useExternalStoreRuntime`, `useDataStreamRuntime`, and `useAssistantTransportRuntime`, plus wiring guides for Mastra, Cloudflare Agents, Claude Managed Agents, LLM gateways, and Electron, the Expo (`--native`) and React Ink (`--ink`) scaffolds, and the hosted MCP docs server. Once a runtime exists, use elements for the styled Thread, runtime for hooks and adapters, and update for a deep migration.

74

Quality

93%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

assistant-ui Setup

Always consult assistant-ui.com/llms.txt for the latest API.

The assistant-ui CLI scaffolds projects, adds components, and keeps an install current. This skill covers the CLI end to end and the decision of which runtime adapter to wire up next; installing the styled UI itself is elements.

References

CLI decision flow

  • New app / empty directory: npx assistant-ui@latest create <name>
  • Existing project with a package.json: npx assistant-ui@latest init
  • Add one or more styled components to a project that already has a runtime: npx assistant-ui@latest add <items...> (see elements)
  • Bump @assistant-ui/* versions: npx assistant-ui@latest update
  • Migrate across a breaking release: npx assistant-ui@latest upgrade (see update for the full migration map)
  • Connect an editor to the docs: npx assistant-ui@latest mcp
  • Collect environment info for a bug report: npx assistant-ui@latest info
  • Diagnose version drift or a broken install: npx assistant-ui@latest doctor
  • Open Claude Code with these skills preloaded: npx assistant-ui@latest agent "add a chat sidebar"

create

npx assistant-ui@latest create my-app
npx assistant-ui@latest create my-app -t cloud-clerk
npx assistant-ui@latest create my-app -e with-langgraph
npx assistant-ui@latest create my-app --native   # Expo, equivalent to -e with-expo
npx assistant-ui@latest create my-app --ink      # React Ink, equivalent to -e with-react-ink

Templates (-t, --template):

TemplateContents
defaultVercel AI SDK, useChatRuntime
minimalBare-bones starting point with local components
cloudAssistantCloud-backed persistence
cloud-clerkAssistantCloud persistence with Clerk auth
langchainLangGraph starter on the @assistant-ui/react-langchain adapter
mcpMCP tools plus the MCP Apps renderer
eveEve agent on eve/next

There is no langgraph template; the LangGraph-backed starter is langchain (react-langchain), and -e with-langgraph scaffolds the raw @assistant-ui/react-langgraph adapter instead.

Examples (-e, --example), each a full feature demo:

ExampleDemonstrates
with-ai-sdk-v7Vercel AI SDK v7
with-eveEve agent integration
with-artifactsHTML artifact rendering with live preview
with-langgraphLangGraph agent with custom tools
with-google-adkGoogle ADK agent
with-ag-uiAG-UI protocol
with-cloudAssistantCloud persistence
with-assistant-transportCustom backend via Assistant Transport
with-resumable-streamResumable stream that survives a reload mid-response
with-chain-of-thoughtReasoning, tool calls, source citations
with-external-storeExternal message store
with-interactablesAI-driven interactive UI components
with-openuiOpenUI generative UI
with-custom-thread-listCustom thread list UI
with-react-hook-formReact Hook Form integration
with-ffmpegFFmpeg video processing tool
with-elevenlabs-conversationalRealtime voice, ElevenLabs
with-livekitRealtime voice, LiveKit
with-elevenlabs-scribeVoice transcription, ElevenLabs
with-expoExpo / React Native (also --native)
with-react-inkTerminal UI chat (also --ink)
with-react-routerReact Router v7
with-tanstackTanStack Start

Other flags: -p, --preset <name-or-url> applies a playground preset (e.g. chatgpt) via shadcn add after scaffolding, and may combine with --template but not with --example, --native, or --ink; --use-npm / --use-pnpm / --use-yarn / --use-bun pin the package manager; --skip-install skips installing packages; --skills / --no-skills add or skip this repository's agent skills (prompted when omitted in a TTY). In a non-interactive shell, an omitted -t/-e defaults to the default template, and an omitted project directory defaults to my-aui-app.

init

npx assistant-ui@latest init

For an existing project with a package.json: detects the project, runs shadcn add for the quick-start component, adds the default components, and configures TypeScript paths. Flags: -y, --yes skips the confirmation prompt (use it in CI or an agent shell), -o, --overwrite replaces existing files, -c, --cwd <dir> picks the project, --use-npm / --use-pnpm / --use-yarn / --use-bun pin the package manager, and --skip-install skips installing packages. Run without a package.json and it forwards to create instead.

add

npx assistant-ui@latest add thread thread-list

Once a runtime is wired up, add fetches styled components from the assistant-ui registry (r.assistant-ui.com), installing their npm dependencies and TypeScript types and resolving registry dependencies (thread also pulls markdown-text, tool-fallback, reasoning, and more). -y, --yes skips the confirmation prompt (default true), -o, --overwrite replaces existing files, and -p, --path retargets the install directory. See elements for the full catalog, the runtime-connected (.aui) versus standalone split, and the Radix/Base UI style-aware registry URL.

Keeping an install current

CommandPurpose
assistant-ui update [--dry]Bump every installed @assistant-ui/* package to latest; --dry prints the command instead of running it
assistant-ui upgrade [-d] [-p] [--verbose]Run every bundled codemod for the current major in order; -d dry-runs, -p prints transformed files
assistant-ui codemod <name> <source> [-d] [-p]Run one named codemod instead of the full upgrade sequence
assistant-ui mcp [--cursor|--windsurf|--vscode|--zed|--claude-code|--claude-desktop]Register the hosted MCP docs endpoint (https://www.assistant-ui.com/mcp) for the named IDE, or the local @assistant-ui/mcp-docs-server stdio server for Zed and Claude Desktop, which only launch local servers
assistant-ui infoPrint CLI, OS, package manager, framework, installed @assistant-ui/*/ecosystem versions, as a paste-ready block for a bug report
assistant-ui doctor [--no-network]Diagnose an existing install (version drift across @assistant-ui/* packages, misconfiguration); --no-network skips the npm registry check for latest versions
assistant-ui agent "<prompt>" [--dry]Launch Claude Code preloaded with the assistant-ui skills and the given prompt; --dry prints the command instead of running it

Never run codemod v0-8/ui-package-split against a current (0.15.x) install; its @assistant-ui/react-ui destination predates the current runtime and upgrade already excludes it. For the full version table, migration order, and 0.15.x follow-up moves (registry paths, AuiConfig, threads.selectionChanged), see update.

Pick a runtime

By framework, when one already fits:

BackendHookPackageReference
Vercel AI SDK v7useChatRuntime@assistant-ui/ai-sdkai-sdk.md
LangGraph Cloud (raw SDK)useLangGraphRuntime@assistant-ui/react-langgraphlanggraph.md
LangGraph Cloud (useStream)useStreamRuntime@assistant-ui/react-langchainlangchain.md
Google ADK (JS or Python)useAdkRuntime@assistant-ui/react-google-adkgoogle-adk.md
A2A v1.0 agent serveruseA2ARuntime@assistant-ui/react-a2aa2a.md
AG-UI agent serveruseAgUiRuntime@assistant-ui/react-ag-uiag-ui.md
Eve (eve/next)useEveAgentRuntime@assistant-ui/eveeve.md
OpenCode server (experimental)useOpenCodeRuntime@assistant-ui/react-opencodeopencode.md
Claude Managed Agents sessionuseExternalStoreRuntime + useRemoteThreadListRuntime@assistant-ui/react (no dedicated adapter)claude-managed-agents.md

By need, when no framework adapter fits (full decision tree in custom-backend.md):

You needHookReference
A fetch call to your API; the runtime owns stateuseLocalRuntimecustom-backend.md
Messages already live in redux, zustand, tanstack-queryuseExternalStoreRuntimecustom-backend.md
Backend already emits the data stream protocoluseDataStreamRuntime../streaming/SKILL.md
Backend streams full agent-state snapshots, or needs bidirectional commandsuseAssistantTransportRuntime../streaming/SKILL.md

Framework and provider wiring guides, all layered on the AI SDK runtime above rather than a dedicated adapter: mastra.md (full-stack or separate server), cloudflare-agents.md (Durable Object agents), and providers.md (LLM gateways for routing and BYOK, a ChatGPT/Codex subscription for local dev without an API key, and Electron's hosted-backend versus local-main-process split).

Platform targets

TargetPackageScaffoldSkill
Web (React)@assistant-ui/reactcreatethis skill, elements
Expo / React Native@assistant-ui/react-native + @assistant-ui/metrocreate <name> --native (or -e with-expo)react-native
Terminal@assistant-ui/react-ink + @assistant-ui/react-ink-markdowncreate <name> --ink (or -e with-react-ink)ink

Vite-based web apps (TanStack Start, plain Vite, Nuxt) are not a create template; see tanstack.md for manual setup and the aui() compiler plugin from @assistant-ui/vite.

Common Gotchas

npx assistant-ui create picks the default template with no prompt

  • Stdin is not a TTY (CI, an agent shell). Pass -t/-e explicitly instead of relying on the interactive picker.

"Only one scaffold selector can be provided"

  • --template, --example, --native, and --ink are mutually exclusive. --preset may pair with --template but not with the other three.

init hangs in CI or an agent shell

  • Pass -y, --yes so it skips its confirmation prompt; add -o, --overwrite when it should replace files a previous run left behind.

A dependency on @assistant-ui/styles or @assistant-ui/react-ui fails to resolve or install

  • Both packages are retired (@assistant-ui/styles is marked deprecated on npm). Styling now comes from the elements the CLI copies into your project; remove the dependency and run npx assistant-ui@latest add thread.

Cannot find module '@/components/assistant-ui/thread'

  • Components moved under elements/ with a .aui suffix on runtime-connected files: @/components/assistant-ui/elements/thread.aui. See elements.

add reinstalls a component you already customized

  • Pass -o, --overwrite deliberately, or move your edits aside first; a plain add skips a file that already exists.

Registry install fails mid-create

  • create still finishes the project; rerun the printed retry command from the project directory once the registry or network issue clears.

Related Skills

  • elements -- install and customize the styled Thread, ThreadList, and 120+ catalog components via add
  • primitives -- unstyled building blocks when composing your own UI instead of elements
  • runtime -- the chosen runtime's hooks, adapters, events, and capabilities in depth
  • update -- version detection, the full migration map, and the codemod list behind upgrade
  • react-native -- Expo / React Native specifics once scaffolded with --native
  • ink -- React Ink terminal specifics once scaffolded with --ink
  • cloud -- AssistantCloud persistence behind the cloud and cloud-clerk templates
  • tools -- defining tools once a runtime is wired up
Repository
stevenknowswhy/ProfessionalBuyer
Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.