CLI tool for configuring and monitoring Claude Code - Quick setup for any project with framework-specific commands and real-time monitoring dashboard. Open source and runs locally.

New Claude Code Web UI - Just run this command and you will see a web interface with all the Claude Code Messages in real-time.

npx claude-code-templates@latest --chats

🌐 Browse Templates Online - Explore all available templates with interactive previews and installation commands.

# Run the tool (no installation required!)

npx claude-code-templates@latest

# Navigate to your project
cd your-project-directory

# Run the tool (no installation required!)
npx claude-code-templates@latest

You'll see an interactive welcome screen:

 ██████╗██╗      █████╗ ██╗   ██╗██████╗ ███████╗
██╔════╝██║     ██╔══██╗██║   ██║██╔══██╗██╔════╝
██║     ██║     ███████║██║   ██║██║  ██║█████╗  
██║     ██║     ██╔══██║██║   ██║██║  ██║██╔══╝  
╚██████╗███████╗██║  ██║╚██████╔╝██████╔╝███████╗
 ╚═════╝╚══════╝╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝

 ██████╗ ██████╗ ██████╗ ███████╗
██╔════╝██╔═══██╗██╔══██╗██╔════╝
██║     ██║   ██║██║  ██║█████╗  
██║     ██║   ██║██║  ██║██╔══╝  
╚██████╗╚██████╔╝██████╔╝███████╗
 ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝

████████╗███████╗███╗   ███╗██████╗ ██╗      █████╗ ████████╗███████╗███████╗
╚══██╔══╝██╔════╝████╗ ████║██╔══██╗██║     ██╔══██╗╚══██╔══╝██╔════╝██╔════╝
   ██║   █████╗  ██╔████╔██║██████╔╝██║     ███████║   ██║   █████╗  ███████╗
   ██║   ██╔══╝  ██║╚██╔╝██║██╔═══╝ ██║     ██╔══██║   ██║   ██╔══╝  ╚════██║
   ██║   ███████╗██║ ╚═╝ ██║██║     ███████╗██║  ██║   ██║   ███████╗███████║
   ╚═╝   ╚══════╝╚═╝     ╚═╝╚═╝     ╚══════╝╚═╝  ╚═╝   ╚═╝   ╚══════╝╚══════╝

🚀 Welcome to Claude Code Templates!

¿What would you like to do?
❯ 📊 Analytics Dashboard - Monitor your Claude Code usage and sessions
  🔍 Health Check - Validate your Claude Code configuration and system
  ⚙️ Project Setup - Configure Claude Code for your project

Choose your path:

• 📊 Analytics Dashboard: View your Claude Code sessions, usage patterns, and performance metrics
• 🔍 Health Check: Comprehensive system validation and configuration verification
• ⚙️ Project Setup: Configure Claude Code for your project with framework-specific commands and hooks

# Start coding with Claude
claude

Monitor and optimize your Claude Code agents with our comprehensive analytics dashboard:

• Live Session Tracking: See active conversations and their status in real-time
• Usage Statistics: Total sessions, tokens, and project activity with trends
• Conversation History: Complete session logs with export capabilities (CSV/JSON)
• Status Indicators: PM2-style visual indicators for conversation health
• File Watching: Automatic updates as you work with Claude Code
• Web Interface: Clean, terminal-style dashboard at http://localhost:3333
• Performance Monitoring: Track Claude Code agent performance and optimization opportunities
• Usage Patterns: Identify your most productive coding sessions and workflows

Monitor and analyze Claude agent interactions in real-time

graph TD
    A[Claude Code writes message] --> B[.jsonl file changes]
    B --> C[FileWatcher detects change]
    C --> D[handleConversationChange]
    D --> E[getParsedConversation]
    E --> F[notifyNewMessage]
    F --> G[WebSocketServer.broadcast]
    G --> H[Frontend WebSocketService]
    H --> I[AgentsPage.handleNewMessage]
    I --> J[Updates UI in real time]

Complete system validation and configuration verification:

• System Requirements: Validate OS, Node.js, memory, and network connectivity
• Claude Code Setup: Verify installation, authentication, and permissions
• Project Configuration: Check project structure and configuration files
• Custom Commands: Validate slash commands and syntax
• Hooks Configuration: Verify automation hooks and command availability
• Interactive Results: Real-time progress with immediate feedback and recommendations
• Health Score: Overall system health percentage with actionable insights

Intelligent project setup with framework-specific commands:

• Auto-Detection: Automatically detect your project type and suggest optimal configurations
• Quick Setup: Framework-specific commands for testing, linting, building, debugging, and deployment
• Optimized Workflows: Pre-configured commands tailored to your development stack
• Best Practices: Industry-standard configurations and development patterns

• CLAUDE.md - Main configuration file with language-specific best practices
• .claude/settings.json - Automation hooks and Claude Code settings
• .claude/commands/ - Custom commands for common development tasks
• .mcp.json - Model Context Protocol server configurations

Execute at key moments during Claude Code workflow:

• PreToolUse: Security checks, logging, statement detection
• PostToolUse: Auto-formatting, type checking, testing
• Stop: Final linting, bundle analysis
• Notification: Activity logging and monitoring

Extend Claude Code with specialized capabilities:

• IDE Integration: VS Code diagnostics & Jupyter execution
• Web Search: Real-time information retrieval
• Database Tools: PostgreSQL, MySQL connections
• Development Tools: Docker, GitHub, filesystem operations

Analyze and optimize your existing Claude Code configuration:

# View detailed command statistics
npx claude-code-templates --commands-stats

What you get:

• Command name, file size, and token count
• Lines, words, and last modified date
• AI-powered optimization recommendations
• Project-specific improvement suggestions

# Analyze automation hooks configuration
npx claude-code-templates --hooks-stats

What you get:

• Hook name, type, and status (enabled/disabled)
• Hook descriptions and purpose
• Hook summary by type (PreToolUse, PostToolUse, etc.)
• AI-powered hook optimization suggestions
• Missing hook recommendations for your workflow

# Analyze MCP server configurations
npx claude-code-templates --mcps-stats

What you get:

• Server name, category, and status (enabled/disabled)
• Command, complexity rating, and descriptions
• Server summary by category (IDE, Database, Web, etc.)
• AI-powered MCP configuration optimization
• Missing server recommendations for your workflow

cd my-react-app
npx claude-code-templates
# Auto-detects React and suggests optimal configuration

# React + TypeScript project
npx claude-code-templates --language javascript-typescript --framework react --yes

# Python + Django project
npx claude-code-templates --language python --framework django --yes

# Preview installation without making changes
npx claude-code-templates --dry-run

# Skip all prompts and use defaults
npx claude-code-templates --yes

# Install to custom directory
npx claude-code-templates --directory /path/to/project

# Run comprehensive system health check
npx claude-code-templates --health-check
npx claude-code-templates --health
npx claude-code-templates --check
npx claude-code-templates --verify

# Analyze existing commands 
npx claude-code-templates --commands-stats

# Analyze automation hooks
npx claude-code-templates --hooks-stats

# Analyze MCP server configurations 
npx claude-code-templates --mcps-stats

# Launch real-time analytics dashboard
npx claude-code-templates --analytics
npx cct --analytics

All these commands work exactly the same way:

npx claude-code-templates    # ✅ Recommended (package name)
npx claude-code-template     # Singular alias
npx create-claude-config     # Create-style command
npx claude-setup             # Setup-style command
npx claude-config            # Config-style command
npx claude-init              # Init-style command

npx cctemplates              # Claude Code Templates
npx cct                      # ⚡ Super short (3 letters)

• Automatic Backups: Existing files are backed up before changes
• Confirmation Required: Always asks before making changes (unless --yes flag)
• Dry Run Mode: Preview installation with --dry-run
• Cancel Anytime: Press Ctrl+C or answer 'No' to cancel
• Back Navigation: Modify previous selections during setup

• Hours of configuration research
• Manual CLAUDE.md creation
• Framework-specific command setup
• Automation hook configuration
• MCP server integration

npx claude-code-templates --language javascript-typescript --framework react --yes
# ✅ Done in 30 seconds!

• Community-Driven: Built by developers, for developers
• Always Updated: Latest best practices and framework support
• Extensible: Easy to add new languages and frameworks
• Transparent: All code is open and auditable
• Free Forever: MIT license, no vendor lock-in

We welcome contributions from the open source community! This project thrives on community input and collaboration.

Please read our Code of Conduct before contributing to ensure a welcoming environment for everyone. See CONTRIBUTING.md for detailed guidelines

This project is licensed under the MIT License - see the LICENSE file for details.

This project is built by the community, for the community. We believe in:

• 🌍 Open Collaboration: Everyone can contribute and improve the project
• 🔄 Knowledge Sharing: Share best practices and learn from others
• 🤝 Inclusive Environment: Welcome developers of all skill levels
• 📈 Continuous Improvement: Always evolving with community feedback
• 🆓 Free Forever: MIT license ensures it stays open and free

• Contributors: All contributors are recognized in our GitHub contributors page
• Community: Join discussions and help others in GitHub Discussions
• Star History: Show your support by starring the repository

• 🐛 Issues: Report bugs or request features
• 💬 Discussions: Join community discussions
• 🔒 Security: Report security vulnerabilities
• 📖 Documentation: Claude Code Official Docs
• 🤝 Contributing: Read our contribution guidelines

⭐ Found this useful? Give us a star on GitHub to support the project!