Skip to main content

​
Chat Interface Overview

The NikCLI chat interface is your primary tool for interacting with AI agents. It provides a natural language interface that understands development context and can execute complex tasks through simple conversation.

Natural Language

Communicate with AI using everyday language

Context Awareness

Automatically understands your project structure

Real-time Feedback

Get live progress updates during task execution

Interactive Approval

Review and approve changes before execution

​
Starting a Chat Session

​
Basic Startup

# Start NikCLI
nikcli

# You'll see the welcome screen
╭─────────────────────────────────────────────────────╮
│                                                     │
│                   🚀 NikCLI v0.1.4                  │
│          Context-Aware AI Development Assistant     │
│                                                     │
╰─────────────────────────────────────────────────────╯

✅ Node.js 18.17.0 (compatible)
✅ Git 2.42.0 (detected)
✅ Anthropic API (configured)
✅ Project context (auto-detected)

Ready for autonomous development! Type /help for commands.

>

​
Chat Modes

  • 💬 Default Chat
  • 📋 Planning Mode
  • 🤖 Autonomous Mode
Interactive Mode - Standard conversational interface
> Create a React component for user authentication

🔍 Analyzing project structure...
📁 Found React TypeScript project
🎯 Creating authentication component...

Would you like me to:
1. Create a simple login form
2. Include registration functionality
3. Add password reset features

Please specify your requirements.
Features:
  • Step-by-step guidance
  • Clarification requests
  • Manual approval for changes
  • Learning-friendly explanations

​
Communication Patterns

​
Effective Communication

Good Examples:
> Create a responsive navigation component with mobile hamburger menu,
  dropdown submenus, and smooth animations using Framer Motion

> Implement user authentication with JWT tokens, email verification,
  password reset, and role-based access control

> Add real-time notifications using WebSockets with toast messages,
  sound alerts, and browser push notifications
What Makes These Effective:
  • Clear functionality requirements
  • Specific technology mentions
  • Implementation details included
Context Examples:
> Following the same pattern as UserCard.tsx, create a ProductCard
  component with image, title, price, and add-to-cart functionality

> Using our existing error handling pattern from authService.ts,
  add error handling to the payment processing flow

> Without adding new dependencies, implement a simple modal system
  that works with our current React setup
Benefits:
  • Maintains code consistency
  • Respects existing patterns
  • Works within constraints
Reference Examples:
> Look at the UserService.ts file and create a similar ProductService
  with CRUD operations for products

> Examine the current authentication flow and add OAuth login
  options while maintaining the same user experience

> Based on the styling in components/Button.tsx, create consistent
  Input and Select components
Why This Works:
  • Leverages existing patterns
  • Maintains consistency
  • Reduces learning curve

​
Advanced Communication

  • Multi-step Requests
  • Iterative Development
  • Alternative Approaches
Break complex tasks into steps:
> I need to implement a dashboard. First, create the layout structure
  with header, sidebar, and main content areas

[After completion]

> Now add the sidebar navigation with menu items for users, products,
  orders, and analytics

[After completion]

> Finally, create placeholder components for each dashboard section
  with proper routing

​
Real-time Interaction Features

​
Progress Tracking

NikCLI provides real-time updates during task execution: 
> Create a complete e-commerce checkout flow

🔍 Analyzing project structure...
📁 Found Next.js project with Stripe integration
🎯 Planning checkout implementation...

Progress Updates:
├── ✅ Cart summary component (2 minutes ago)
├── 🔄 Payment form with Stripe Elements (in progress)
│   └── 📝 Adding form validation
│   └── 🔗 Integrating Stripe API
├── ⏳ Order confirmation page
└── ⏳ Email notification system

Current: Implementing secure payment processing...

​
Interactive Approvals

📝 Ready to modify the following files:

┌─ src/components/CheckoutForm.tsx (new file)
├─ src/pages/checkout.tsx (modify)
├─ src/styles/checkout.css (new file)
└─ package.json (add stripe dependency)

Changes summary:
• Create checkout form component
• Add Stripe payment integration
• Update routing for checkout page
• Install required dependencies

Do you want to proceed? (y/n/details)

🔧 Ready to execute the following commands:

1. npm install @stripe/stripe-js @stripe/react-stripe-js
2. npm run build
3. npm test -- checkout

These commands will:
• Install Stripe payment dependencies
• Build the project with new changes
• Run tests for checkout functionality

Approve execution? (y/n/individual)

🛡️ Security approval required:

The following operation requires elevated permissions:
• Modifying environment variables
• Adding API keys to .env file
• Creating webhook endpoints

Risk level: MEDIUM
Reason: Adding external service integration

Continue with security review? (y/n/review)

​
Error Handling and Recovery

  • Graceful Error Handling
  • Conflict Resolution
  • Validation Failures
❌ Error encountered during component creation:

Error: Cannot find module 'styled-components'

🔄 Auto-recovery options:
1. Install styled-components dependency
2. Switch to CSS modules approach
3. Use inline styles temporarily

How would you like to proceed? (1/2/3/manual)

​
Keyboard Shortcuts and Navigation

​
Essential Shortcuts

Mode Switching

Shift + Tab: Cycle through modes
  • Default Chat → Planning → Autonomous
ESC: Return to default chat mode

Command Access

/: Open command menuCtrl + C: Stop current operation↑/↓: Navigate command history

Quick Actions

Tab: Auto-complete commands/pathsCtrl + L: Clear screenCtrl + D: Exit NikCLI

Navigation

Ctrl + R: Search command historyCtrl + A: Move to line beginningCtrl + E: Move to line end

​
Command Completion

NikCLI provides intelligent auto-completion:
  • Command Completion
  • File Path Completion
  • Context-Aware Suggestions
> /ag[Tab]
Completions:
/agent    - Run specific agent
/agents   - List available agents
/auto     - Autonomous mode

> /agent [Tab]
Available agents:
universal-agent    - Full-stack development
react-expert      - React specialization
backend-agent     - API development

​
Customization and Preferences

​
Chat Appearance

# Set color scheme
nikcli config set color-scheme dark
nikcli config set color-scheme light
nikcli config set color-scheme auto

# Custom color configuration
nikcli config set colors.primary "#4EC5F1"
nikcli config set colors.success "#00D4AA"
nikcli config set colors.warning "#FFB800"

# Enable/disable animations
nikcli config set animations true

# Set verbose output
nikcli config set verbose-output true

# Configure progress indicators
nikcli config set show-progress true
nikcli config set progress-style detailed

# Auto-approval settings
nikcli config set auto-approve-low-risk true

# Confirmation preferences
nikcli config set require-confirmation false

# Timeout settings
nikcli config set response-timeout 120

​
Session Management

  • Session Persistence
  • Context Management
  • Export and Sharing
# Enable chat history
/history on

# Save current session
/save-session "authentication-implementation"

# Load previous session
/load-session "authentication-implementation"

# List all sessions
/sessions

​
Best Practices

Start Simple

Begin with basic requests and gradually increase complexityExample progression:
  1. “Create a button component”
  2. “Add click handlers and props”
  3. “Include loading states and variants”
  4. “Add accessibility features”

Use Planning Mode

For complex features, use planning mode first
/plan create "user authentication system"
# Review the plan
/plan execute

Provide Feedback

Help NikCLI learn your preferences“This looks good, but can you make the styling more consistent with our design system?”“Perfect! Use this same pattern for the other components.”

Review Changes

Always review generated code before final approval
# Review diffs are shown automatically in the UI
# To clear cached approvals in this session:
/clear-approvals

​
Next Steps

Autonomous Mode

Learn how to use autonomous mode for complex tasks

Workflow Patterns

Discover proven patterns for different scenarios

CLI Commands

Master all available commands and shortcuts

Examples

See practical examples of chat interactions
The chat interface learns from your interactions. The more you use it, the better it becomes at understanding your coding style and project requirements.