Kiro Basic Tutorials

From zero to mastering AI programming tool usage techniques

Estimated 30 minutes
Beginner Friendly
Practical Guide

Tutorial Contents

{{ section.step }}

{{ section.title }}

{{ section.description }}

1
Getting to Know Kiro Interface

After launching Kiro for the first time, understand the functions and layout of each interface component

Main Interface Areas

🗂️ Sidebar Panel

  • • Explorer: View and manage project files
  • • Search: Global search and replace functionality
  • • Source Control: Git version control integration
  • • Extensions: Manage plugins and extensions
  • • Kiro Chat: AI assistant chat interface

📝 Editor Area

  • • Code Editor: Main coding area
  • • Tabs: Manage multiple open files
  • • Breadcrumb Navigation: Show current file location
  • • Status Bar: Display file information and quick actions

Tips

Use Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS) to open the command palette and quickly access all features.

2
Creating and Managing Projects

Learn how to create new projects or open existing projects in Kiro

Creating New Project

1

Open Welcome Page

Click "File" → "New Workspace" or use shortcut Ctrl+Shift+N

2

Select Project Template

Choose from preset templates such as React, Vue, Python, Node.js, etc.

3

Configure Project Information

Fill in project name, save location and other basic configurations

Open Existing Project

Local Project

Open local folder as workspace:

File → Open Folder
or press Ctrl+K, Ctrl+O

Remote Project

Clone project from Git repository:

Ctrl+Shift+P
Type "Git: Clone"

3
Basic Editing Operations

Master the basic code editing features in Kiro

Intelligent Code Completion

Kiro provides powerful AI-driven code completion:

Auto-completion

  • • Suggestions appear automatically while typing
  • • Press Tab to accept
  • • Press Esc to dismiss

Manual trigger

  • • Ctrl+Space show suggestions
  • • Ctrl+Shift+Space parameter hints
  • • Ctrl+I AI-generated code

Common Shortcuts

File Operations

New File Ctrl+N
Save File Ctrl+S
Open File Ctrl+O

Editing

Undo Ctrl+Z
Redo Ctrl+Y
Find & Replace Ctrl+H

4
Using the AI Assistant

Learn how to interact effectively with Kiro's AI Assistant

Open the AI Chat Interface

Method 1: Shortcut

Ctrl+Shift+P → "Kiro: Open Chat"

Fastest method, suited for advanced users

Method 2: Sidebar

Click the "Kiro Chat" icon in the sidebar

Suitable for beginners and visual workflows

AI Conversation Tips

Context Referencing

Use the # symbol to reference context:

#File - reference current file
#Folder - reference entire folder
#Codebase - reference entire codebase
#Terminal - reference terminal output

Common Prompts

💡 Code Generation

"Write a function that ..."

"Create a React component for ..."

🐛 Bug Fixing

"What does this error mean?"

"How can I fix this bug?"

🔍 Code Explanation

"Explain what this code does"

"How does this algorithm work?"

⚡ Optimization Suggestions

"How can I optimize this code?"

"Is there a better implementation?"

5
Hands-on Practice

Consolidate knowledge through a practical mini-project

Practice Project: Simple To-Do App

Project Goal

Create a simple To-Do application to practice Kiro's basic features

1

Create Project Structure

Use the AI Assistant to create the basic project structure

"Create HTML, CSS, and JavaScript file structure for a simple To-Do app"
2

Implement Core Features

Have the AI Assistant help implement add, delete, and mark-as-done features

"Implement adding a new todo item with input validation"
3

Optimize and Improve

Use AI suggestions to improve code quality and UX

"How can I improve the UI and UX of this To-Do app?"

After Completing the Basics

Continue learning Kiro's advanced features

Core Features

Dive deeper into Specs, Hooks, Steering and more

Learn Features

Advanced Applications

Learn advanced topics like MCP integration and custom configuration

Advanced Tutorials

FAQ

View common questions and solutions

View FAQ