Interactive Mode

Interactive mode provides a terminal-based visual interface for browsing and installing components. It’s perfect when you don’t know exactly which components you need or want to explore what’s available.

Launching Interactive Mode

Run the CLI without any flags:

npx claude-code-templates@latest

You’ll see the branded welcome screen:

════════════════════════════════════════════════════════════════

       🔮 Claude Code Templates

       Your starting point for Claude Code projects

════════════════════════════════════════════════════════════════

🚀 Setup Claude Code for any project language 🚀
                             v1.2.3

🌐 Templates: https://aitmpl.com
📖 Documentation: https://docs.aitmpl.com

The main menu offers several options:

? What would you like to do?
  📊 Analytics Dashboard - Monitor your Claude Code usage and sessions
  💬 Chats Mobile - AI-first mobile interface for conversations
  🤖 Agents Dashboard - View and analyze Claude conversations with agent tools
❯ ⚙️ Project Setup - Configure Claude Code for your project
  🔍 Health Check - Verify your Claude Code setup and configuration

Menu Options Explained

Project Setup Flow

Selecting “Project Setup” starts the component selection wizard.

Interactive Features

You can go back to previous steps using Ctrl+C and restarting, or by using the back option in some prompts.

Search and Filter

When selecting components, you can filter by typing:

? Select agents to install:
  Filter: security ▊
  
  Security
    ◯ security-auditor
    ◯ penetration-tester
    ◯ security-researcher

Type to filter, press Backspace to clear filter.

Select All / Deselect All

Some prompts support bulk selection:

Ctrl+A - Select all visible items
Ctrl+D - Deselect all items

Component Details

Some interactive prompts show component descriptions when you hover over them.

Health Check Mode

Selecting “Health Check” from the main menu:

Analytics Dashboard

Selecting “Analytics Dashboard” opens a web interface:

📊 Launching Claude Code Analytics Dashboard...
🌐 Dashboard available at: http://localhost:3001

The dashboard shows:

Session history and duration
Component usage statistics
Download counts for your installed components
Trending components in the community
Agent conversation analytics

Tunnel Mode: Add --tunnel flag to expose the dashboard publicly via Cloudflare:

npx claude-code-templates@latest --analytics --tunnel

Chats Mobile Interface

Selecting “Chats Mobile” launches a mobile-optimized chat interface:

💬 Launching Claude Code Mobile Chats...
🌐 Interface available at: http://localhost:3002

Optimized for:

Touch interactions
Small screens
Conversation history
Quick component installation

Non-Interactive Equivalent

Every interactive selection can be replicated with CLI flags:

npx claude-code-templates@latest
# ... make selections ...

npx claude-code-templates@latest \
  --template javascript-typescript \
  --agent backend-developer \
  --agent security-auditor \
  --command docker-setup \
  --command setup-testing \
  --mcp filesystem \
  --mcp web-fetch \
  --hook git/pre-commit-lint \
  --setting enable-telemetry \
  --yes

The CLI prints the equivalent command after installation for future automation.

Customizing Interactive Mode

Pre-select Components

You can start interactive mode with some components already specified:

npx claude-code-templates@latest \
  --agent security-auditor \
  --mcp filesystem
# Interactive mode opens with these pre-selected

Skip Specific Prompts

Use --yes to skip confirmation prompts:

npx claude-code-templates@latest --yes
# Skips "Proceed with installation?" confirmation

Target Directory

Specify directory before launching interactive mode:

npx claude-code-templates@latest --directory ./my-project
# Interactive mode installs to ./my-project

Keyboard Shortcuts Reference

Shortcut	Action
Arrow Up/Down	Navigate options
Space	Toggle selection (checkboxes)
Enter	Confirm and continue
Ctrl+C	Cancel and exit
Ctrl+A	Select all (where supported)
Ctrl+D	Deselect all (where supported)
Backspace	Clear filter text
Tab	Auto-complete (in some prompts)

Troubleshooting Interactive Mode

Terminal Display Issues

If the interface looks broken:

# Force UTF-8 encoding
export LANG=en_US.UTF-8
export LC_ALL=en_US.UTF-8

npx claude-code-templates@latest

Arrow Keys Not Working

Some terminals (especially in Docker) don’t support interactive prompts: Solution: Use non-interactive mode with flags instead:

npx claude-code-templates@latest \
  --agent security-auditor \
  --command docker-setup \
  --yes

Session Timeout

If you wait too long on a prompt:

⚠️ Session timeout. Exiting...

Solution: Restart and proceed quickly, or use --yes flag.

Component List Not Loading

If components don’t appear:

⚠️ Failed to load components. Please check your internet connection.

Solution: Check internet connection and retry. Components are fetched from GitHub.

Best Practices

First-Time Users

Run Health Check First: Understand your current setup
Start with Recommended: Let the CLI suggest components based on your project
Install Incrementally: Don’t install everything at once—add components as you need them

Team Onboarding

Generate Command: One person runs interactive mode
Copy Non-Interactive Command: Share the equivalent CLI command with team
Document in README: Add the command to project documentation

## Setup Claude Code

Run this command to install required components:

\`\`\`bash
npx claude-code-templates@latest \
  --agent backend-developer \
  --command docker-setup \
  --yes
\`\`\`

Exploring Components

Use interactive mode to discover components, then:

Note which components you selected
Visit aitmpl.com to read full documentation
Create a saved workflow for future projects

Next Steps

Batch Installation

Install multiple components at once

Workflows

Save your selection as a reusable workflow

Global Agents

Create agents accessible from anywhere

Component Browser

Browse all available components

Get Started

Core Concepts

Guides

Tools

Advanced

Interactive Mode

Interactive Mode

Launching Interactive Mode

Main Menu

Project Setup Flow

Interactive Features

Back Navigation

Search and Filter

Select All / Deselect All

Component Details

Health Check Mode

Analytics Dashboard

Chats Mobile Interface

Non-Interactive Equivalent

Customizing Interactive Mode

Pre-select Components

Skip Specific Prompts

Target Directory

Keyboard Shortcuts Reference

Troubleshooting Interactive Mode

Terminal Display Issues

Arrow Keys Not Working

Session Timeout

Component List Not Loading

Best Practices

First-Time Users

Team Onboarding

Exploring Components

Next Steps

Batch Installation

Workflows

Global Agents

Component Browser

​Interactive Mode

​Launching Interactive Mode

​Main Menu

​Project Setup Flow

​Interactive Features

​Back Navigation

​Search and Filter

​Select All / Deselect All

​Component Details

​Health Check Mode

​Analytics Dashboard

​Chats Mobile Interface

​Non-Interactive Equivalent

​Customizing Interactive Mode

​Pre-select Components

​Skip Specific Prompts

​Target Directory

​Keyboard Shortcuts Reference

​Troubleshooting Interactive Mode

​Terminal Display Issues

​Arrow Keys Not Working

​Session Timeout

​Component List Not Loading

​Best Practices

​First-Time Users

​Team Onboarding

​Exploring Components

​Next Steps

Batch Installation

Workflows

Global Agents

Component Browser

Interactive Mode

Launching Interactive Mode

Main Menu

Project Setup Flow

Interactive Features

Back Navigation

Search and Filter

Select All / Deselect All

Component Details

Health Check Mode

Analytics Dashboard

Chats Mobile Interface

Non-Interactive Equivalent

Customizing Interactive Mode

Pre-select Components

Skip Specific Prompts

Target Directory

Keyboard Shortcuts Reference

Troubleshooting Interactive Mode

Terminal Display Issues

Arrow Keys Not Working

Session Timeout

Component List Not Loading

Best Practices

First-Time Users

Team Onboarding

Exploring Components

Next Steps