Quick Start Tutorial

Learn NextCLI's core features through hands-on exercises. Get started with Autocomplete, Edit, Chat, and Agent mode in minutes.

Welcome to NextCLI! This interactive tutorial will guide you through all four core features using practical examples. Follow along step-by-step to learn more about NextCLI's capabilities.

Prerequisites: Make sure you have installed NextCLI and configured a model provider in config.yaml.

🔄 Autocomplete

What it does: Provides intelligent inline code suggestions as you type, powered by AI.

Create a Test File

Create a new file called tutorial.js (or use any language you prefer) in your IDE

Try Autocomplete

Copy this starter code and place your cursor at the end of the comment:

// TODO: Implement a sorting algorithm function
function sortingAlgorithm(arr) {
  // Place cursor here and press Enter
}

Press Enter and watch NextCLI suggest code completions. Press Tab to accept suggestions.

See the Magic

NextCLI will intelligently suggest function implementations based on the context and comment.

Autocomplete works best when you provide clear function names, comments, or type annotations that give context about your intent.

✏️ Edit

What it does: Make quick, targeted changes to specific code sections using natural language instructions.

Add Sample Code

Paste this bubble sort implementation in your file:

function sortingAlgorithm(x) {
  for (let i = 0; i < x.length; i++) {
    for (let j = 0; j < x.length - 1; j++) {
      if (x[j] > x[j + 1]) {
        let temp = x[j];
        x[j] = x[j + 1];
        x[j + 1] = temp;
      }
    }
  }
  return x;
}

Highlight the Function

Highlight the entire function in your editor

Open Edit Mode

Press Cmd/Ctrl + I to open Edit mode

Give Instructions

Type: "make this more readable and add TypeScript types"

Watch the Magic

Watch NextCLI refactor your code automatically!

Review Changes

NextCLI will show you a diff of the proposed changes. Accept or reject individual changes as needed.

Edit is perfect for refactoring, adding documentation, fixing bugs, or converting between languages/frameworks.

💬 Chat Mode

What it does: Interactive AI assistant that can analyze code, answer questions, and provide guidance without leaving your IDE.

Add Another Function

Add this second sorting function to your file:

function sortingAlgorithm2(x) {
  for (let i = 0; i < x.length; i++) {
    for (let j = 0; j < x.length - 1; j++) {
      if (x[j] > x[j + 1]) {
        let temp = x[j];
        x[j] = x[j + 1];
        x[j + 1] = temp;
      }
    }
  }
  return x;
}

Start a Conversation

Highlight the function
Use the keyboard shortcuts below to add it to Chat.
Ask: "What sorting algorithm is this and how can I optimize it?"

Explore Further

Try these follow-up questions:

"Show me how to implement quicksort instead"
"What's the time complexity of this algorithm?"
"Can you write unit tests for this function?"

Chat Mode Keyboard Shortcuts

Cmd/Ctrl + L
New Chat / New Chat With Selected Code / Close NextCLI Sidebar If Chat Already In Focus

Cmd/Ctrl + Shift + L
Focus Current Chat / Add Selected Code To Current Chat / Close NextCLI Sidebar If Chat Already In Focus

Use Chat for code reviews, debugging help, learning new concepts, or brainstorming solutions to complex problems.

🤖 Agent Mode

What it does: An autonomous coding assistant that can read files, make changes, run commands, and handle complex multi-step tasks.

Switch to Agent Mode

Open the NextCLI panel
Click the dropdown in the bottom left of the input box
Select "Agent" mode

Give Agent Mode a Complex Task

Try this prompt:

"Write comprehensive unit tests for the sorting functions   in this file. Create the tests in a new file using Jest, and make sure to test   edge cases like empty arrays and single elements."