Back to Skills

setup

Installs and configures assistant-ui in a project via the CLI, and picks the right runtime for a backend. Use for first-time install, scaffold, or config: `npx assistant-ui@latest create my-app` (templates default, minimal, cloud, cloud-clerk, langgraph, mcp), `npx assistant-ui@latest init [--yes] [--overwrite]` in an existing Next.js app, or `npx assistant-ui@latest add` registry components (markdown-text, thread-list). Also use to choose a runtime hook for a backend: useChatRuntime (AI SDK), u

16stars2forksUpdated 6/16/2026

Security Assessment

High Risk(45/100)

Detected risks:

Secret Exposure([references/cloudflare-agents.md] API_KEY=)
Sensitive File Access([references/devtools.md] .env, [references/mastra.md] .env, [references/ai-sdk.md] .env)
Privilege Escalation([references/google-adk.md] runAs)
Security Score45/100

About setup

The setup skill provides comprehensive installation and configuration support for assistant-ui, a library for building AI chat interfaces. It guides users through the complete setup process, from scaffolding new projects to integrating assistant-ui into existing Next.js applications. The skill covers CLI command usage, template selection, and runtime hook configuration for various backend integrations including Vercel AI SDK, LangGraph, and custom streaming APIs.

This skill offers multiple setup pathways depending on project requirements. For new projects, it provides access to curated templates like minimal starters, cloud-backed persistence solutions, and authentication-integrated setups. For existing Next.js applications, it handles seamless integration through the init command with options for non-interactive deployment in CI/CD environments. The skill also manages registry component additions for extending functionality with pre-built UI elements like markdown rendering and thread lists.

Developers building AI chat applications, product teams integrating conversational interfaces, and DevOps engineers automating deployment pipelines are the primary users. The skill is particularly valuable for teams needing to quickly prototype AI assistants, migrate between backend services, or maintain consistent UI patterns across multiple projects. It emphasizes non-modification of generated template code to preserve best practices and reduce maintenance overhead.

FAQ

What's the difference between create and init commands?

The create command scaffolds a new project in an empty or new directory with template selection. The init command integrates assistant-ui into an existing Next.js project that already has a package.json file. If init doesn't find an existing project, it automatically forwards to create.

How do I run setup commands in CI/CD pipelines without interactive prompts?

Use the --yes flag with the init command (npx assistant-ui@latest init --yes) to run non-interactively. For create commands in non-interactive shells, omit template selection and it will default to the 'default' template automatically.

Which runtime hook should I use for my backend?

Use useChatRuntime for Vercel AI SDK, useLangGraphRuntime for LangGraph agents, useAgUiRuntime for AG-UI protocol, useA2ARuntime for A2A protocol, useLocalRuntime for custom streaming APIs, and useExternalStoreRuntime for Redux or Zustand state management.

Can I use assistant-ui with frameworks other than Next.js?

Yes, the skill mentions support for Vite and TanStack Start setups. Consult the reference files for framework-specific configuration details beyond the default Next.js integration.

Should I modify the code generated by CLI templates?

No. The skill explicitly states never to modify generated template code unless explicitly requested. This preserves best practices and reduces maintenance issues.

All Files

15 files
references/ai-sdk-legacy.md5.8 KB
View
references/devtools.md3.1 KB
View
references/mastra.md7.4 KB
View
SKILL.md5.3 KB
View
references/ai-sdk.md8.3 KB
View
references/google-adk.md9.9 KB
View
references/registry-components.md7.7 KB
View
references/a2a.md2.9 KB
View
references/cloudflare-agents.md9.7 KB
View
references/langchain.md7.0 KB
View
references/styling.md2.8 KB
View
references/ag-ui.md2.7 KB
View
references/custom-backend.md9.1 KB
View
references/langgraph.md5.7 KB
View
references/tanstack.md3.7 KB
View

Install setup

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill