Skip to content

# Banana Code Hands-On Tutorial for New Developers #1

Closed
Closed
# Banana Code Hands-On Tutorial for New Developers#1
Assignees
mgreiler
Labels
documentationImprovements or additions to documentationenhancementNew feature or requestgood first issueGood for newcomersquestionFurther information is requested
@mgreiler

Description

@mgreiler
mgreiler
opened on Apr 23, 2026

Transform this hands-on tutorial covered in this issue, into a well formatted, responsive part of the website docs, so that it matches the rest of the style of the website and docs.

Here is the docs content:

Banana Code Hands-On Tutorial for New Developers

Who this is for

This tutorial is for people who:

  • are new to programming,
  • use AI heavily to write or understand code,
  • want to learn how to work with Banana Code effectively,
  • want more than “ask AI for code” and instead learn a real workflow.

This is not just a feature list. It’s a hands-on walkthrough with realistic use cases:

  • creating code,
  • changing code,
  • reviewing code,
  • debugging code,
  • understanding code,
  • and using slash commands to stay in control.

What Banana Code is

Banana Code is an AI coding assistant that runs in your terminal.

You can use it to:

  • create files and features,
  • edit existing code,
  • explain code,
  • review code,
  • run commands,
  • debug errors,
  • search your project,
  • and switch between working styles using slash commands.

Think of it as a coding partner that can:

  1. read your project,
  2. propose a plan,
  3. make changes,
  4. run checks,
  5. help you understand what happened.

What you’ll learn

By the end of this tutorial, you should know how to:

  • start Banana Code,
  • ask for new code,
  • ask it to modify existing code,
  • use /plan before making bigger changes,
  • use /ask for explanations without edits,
  • use /security for code review,
  • use /context, /clean, /chats, and other useful commands,
  • debug errors with the AI,
  • and work in a safer, more intentional way.

Before you start

1. Install Banana Code

npm install -g @banaxi/banana-code

Then start it:

banana

On first run, it will guide you through setup.

2. Create a practice project

Make a small folder for experimenting:

mkdir banana-tutorial
cd banana-tutorial

Create these files.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Banana Tutorial App</title>
</head>
<body>
  <h1>Task List</h1>
  <input id="taskInput" placeholder="Enter a task" />
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>

  <script src="script.js"></script>
</body>
</html>

script.js

const input = document.getElementById("taskInput");
const addBtn = document.getElementById("addBtn");
const taskList = document.getElementById("taskList");

addBtn.addEventListener("click", () => {
  const text = input.value;
  const li = document.createElement("li");
  li.textContent = text;
  taskList.appendChild(li);
  input.value = "";
});

This is intentionally simple. We’ll use it for the exercises.

Now run:

banana

Part 1: Your first interaction

When Banana Code opens, try this:

Explain what this project does.

This is a simple first step. It helps you see whether the AI understands your project.

You can be more specific:

Read the project and explain it like I am a beginner developer.

Why this matters

A lot of beginners jump directly to:

build me X

But a better workflow is:

  1. understand current state,
  2. define goal,
  3. make change.

That is much more reliable.

Part 2: Attaching files with @

Banana Code supports file mentions.

Try:

Explain this file: @script.js

Or:

What does @index.html connect to in @script.js?

Why this matters

When you mention files directly:

  • the AI gets clearer context,
  • explanations are more accurate,
  • you reduce vague answers.

For beginners, this is one of the easiest ways to get better results.

Part 3: Creating code

Now let’s create a real feature.

Goal

Add the ability to delete tasks.

Try this prompt:

Add a delete button next to each task in @script.js. Keep the code beginner-friendly and explain what you changed after.

Banana Code may inspect files, then edit them.

Better version of the same prompt

A stronger prompt is:

Add a delete button next to each task.
Requirements:

  • keep the current app structure,
  • use plain JavaScript only,
  • keep the code easy for a beginner to read,
  • explain the final code in simple terms.

What you are learning here

When asking AI to create code, good prompts include:

  • the goal,
  • constraints,
  • preferred style,
  • explanation request.

That often produces better code than:

add delete

Part 4: Using /plan before larger changes

Now suppose you want a bigger feature:

  • add local storage,
  • mark tasks complete,
  • filter tasks.

Instead of letting the AI immediately edit files, use:

/plan

Then ask:

I want to improve this task app with:

  • mark tasks as complete,
  • save tasks in localStorage,
  • allow deleting tasks,
  • keep the UI simple.
    First give me a step-by-step plan and which files you would change.

What /plan does

In Plan Mode, Banana Code should:

  • propose a plan first,
  • avoid large immediate edits,
  • give you a chance to approve.

This is extremely useful for beginners because it prevents “AI went too far and changed everything.”

Good beginner habit

Use /plan for:

  • new features,
  • refactors,
  • multi-file changes,
  • anything you don’t fully understand yet.

Then switch back with:

/agent

when you want it to actually make the changes.

Part 5: Changing existing code safely

Now let’s ask Banana Code to modify the app in a controlled way.

Try:

In @script.js, prevent empty tasks from being added. If the input is empty or only spaces, do nothing. Then explain the change simply.

This is a classic editing task:

  • small scope,
  • one file,
  • easy to verify.

What to notice

Good code-edit requests often include:

  • target file,
  • exact behavior,
  • edge case,
  • explanation request.

For example:

In @script.js, trim whitespace before adding a task.

That is much better than:

fix task input

Part 6: Reviewing code with /ask

Sometimes you do not want edits. You just want understanding.

Switch to Ask Mode:

/ask

Then try:

Review @script.js and tell me:

  • what is good,
  • what is fragile,
  • what could be improved for readability,
  • but do not change the code.

What /ask does

Ask Mode is read-only in spirit:

  • no editing,
  • no project changes,
  • better for learning and code understanding.

This is great for early-stage developers because it turns Banana Code into a tutor instead of an auto-editor.

Example beginner prompts for /ask

  • “Explain @script.js line by line.”
  • “What part of this code handles user interaction?”
  • “What would happen if input.value is empty?”
  • “What are 3 ways this code could break?”
  • “How would a more advanced developer structure this?”

When you want editing back:

/agent

Part 7: Reviewing code for quality

Let’s do a code review request.

Try:

Review this small app like a friendly senior developer. Focus on:

  • readability,
  • maintainability,
  • simple improvements a beginner can understand.

What this teaches

AI is not just for writing code. It is also useful for:

  • reviewing your logic,
  • spotting bad habits,
  • suggesting cleaner structure.

As a beginner, this is one of the best ways to improve.

Part 8: Using /security for safe coding habits

Now switch modes:

/security

Then ask:

Check this project for beginner-level security and safety issues. Explain anything risky in simple language.

For this toy app, there may not be serious issues, but the exercise matters.

Why this is useful

As projects grow, /security can help look for:

  • unsafe input handling,
  • exposed secrets,
  • weak auth logic,
  • dangerous backend patterns.

For beginners, it builds the habit of asking:

is this safe?

Return to normal mode when done:

/agent

Part 9: Debugging with Banana Code

Now let’s simulate a bug.

Open script.js and intentionally break it by changing this line:

const addBtn = document.getElementById("addBtn");

to:

const addBtn = document.getElementById("wrongId");

Now your button won’t work.

Go back to Banana Code and say:

The Add button no longer works. Help me debug the problem step by step. Start by inspecting the files.

You can also be more explicit:

Debug why clicking the Add button does nothing. Check @index.html and @script.js and explain the root cause before fixing it.

This is a very important workflow

A good debugging workflow with AI is:

  1. describe the visible symptom,
  2. give the relevant files,
  3. ask for root cause,
  4. then ask for fix.

That is much better than:

it’s broken fix it

Good debugging prompt template

I expected [expected behavior], but instead [actual behavior].
Please:

  1. inspect the relevant files,
  2. identify likely causes,
  3. explain the root cause,
  4. fix it,
  5. tell me how to prevent this in the future.

That prompt works very well for beginners.

Part 10: Let the AI explain errors

If you run code and see an error, paste it in directly.

For example:

I got this error:
Cannot read properties of null (reading 'addEventListener')
Explain what it means in beginner-friendly language and tell me where to look first.

This is one of the most useful ways to learn programming with AI.

Good beginner habit

Don’t just ask:

fix this error

Instead ask:

  • what it means,
  • why it happens,
  • how to fix it,
  • how to avoid it next time.

That turns debugging into learning.

Part 11: Use /context when conversations get long

After a while, conversations get big.

Use:

/context

This helps you see how much context is being used.

Why this matters

Long chats can make AI:

  • slower,
  • more expensive,
  • less focused.

If things start feeling messy, use:

/clean

This summarizes the conversation to keep the important parts while reducing clutter.

Good moment to use /clean

Use it when:

  • you’ve changed tasks,
  • the conversation is long,
  • the AI starts missing details,
  • you want a fresh but informed state.

Part 12: Resume work with /chats

One of the hardest things for beginners is losing momentum after closing a session.

Use:

/chats

This lets you reopen previous chat sessions.

Why this is useful

You can:

  • continue yesterday’s debugging,
  • revisit a feature discussion,
  • recover context without repeating everything.

This is especially useful when learning, because your project work becomes a sequence of guided sessions instead of isolated prompts.

Part 13: Generate project context with /init

Once your project gets a bit bigger, run:

/init

This creates a BANANA.md file summarizing your project.

Why this matters

It helps Banana Code understand:

  • what your project is,
  • what technologies it uses,
  • how the parts fit together.

For beginners, this is useful because you don’t need to repeatedly explain your project from scratch.

Part 14: Explore providers and models

Try:

/provider

and

/model

Why this matters

Different models are better at different things:

  • some are faster,
  • some are better at reasoning,
  • some are better at code explanation.

If a result feels weak, changing model can help.

For beginners, a simple habit is:

  • use a fast model for small edits,
  • use a stronger model for planning, debugging, or refactoring.

Part 15: A full beginner workflow

Here’s a very practical end-to-end workflow you can copy.

Scenario

You want to add “mark task complete” to your app.

Step 1: Understand the current app

Prompt:

Explain how tasks are currently added in @script.js.

Step 2: Plan the feature

Command:

/plan

Prompt:

I want to add a “mark complete” feature to each task.
Please give me a beginner-friendly plan first. Tell me which files need changes and what each change will do.

Step 3: Approve and edit

Command:

/agent

Prompt:

Go ahead and implement the plan. Keep the code simple and explain the result after editing.

Step 4: Review the new code

Command:

/ask

Prompt:

Explain the updated @script.js in simple terms. Which part handles marking tasks complete?

Step 5: Check code quality

Prompt:

Review this implementation and suggest 2 improvements that are useful for a beginner.

Step 6: Check safety

Command:

/security

Prompt:

Check whether this code introduces any unsafe patterns or beginner mistakes.

Step 7: Clean up context if needed

Command:

/clean

This is a strong Banana Code workflow:

  • understand,
  • plan,
  • implement,
  • review,
  • secure,
  • clean.

Part 16: Recommended prompt patterns for beginners

Here are prompt templates that work well.

1. Create something new

Build a simple [feature] in this project.
Requirements:

  • use [language/framework]
  • keep it beginner-friendly
  • avoid unnecessary complexity
  • explain the code after

2. Change existing code

In @file, change the behavior so that [desired behavior].
Keep the rest of the code structure similar and explain what changed.

3. Review code

Review @file for readability and beginner-friendliness.
Tell me what is good, what is confusing, and what should be improved.

4. Debug a bug

I expected [X], but I got [Y].
Inspect the relevant files, explain the root cause, then fix it.

5. Learn from code

Explain @file like I’m a new developer.
Focus on what each main section does and why it exists.

6. Plan before changing

First make a plan for implementing [feature].
Don’t edit files yet. I want to review the plan first.

Part 17: Best slash commands for beginners

Here are the most useful ones to learn first.

/plan

Use when:

  • the change is large,
  • you want control before edits,
  • you’re not sure what the AI should do.

/agent

Use when:

  • you want Banana Code to edit and act normally.

/ask

Use when:

  • you want explanation only,
  • you don’t want accidental edits,
  • you’re learning or reviewing.

/security

Use when:

  • you want a security-focused review.

/context

Use when:

  • the chat gets long,
  • you want to understand context usage.

/clean

Use when:

  • the conversation is cluttered,
  • you want to compress history.

/chats

Use when:

  • you want to resume older sessions.

/init

Use when:

  • starting work in a project,
  • you want Banana Code to understand the codebase better.

/provider and /model

Use when:

  • you want better performance for the task,
  • you want to experiment with different model strengths.

/help

Use when:

  • you forget what commands exist.

Part 18: Common beginner mistakes when using AI coding tools

Mistake 1: Asking for too much at once

Bad:

Build a full app with auth, payments, dashboard, admin, analytics, tests

Better:

First plan the app structure. Then help me build the first page.

Mistake 2: Not giving files

Bad:

Fix my code

Better:

Fix the bug in @script.js and @index.html where the button click does nothing.

Mistake 3: Letting AI edit without understanding

Better workflow:

  • use /plan,
  • ask for explanation after edits,
  • review the result in /ask mode.

Mistake 4: Only asking for solutions, not explanations

Better:

Fix it and explain why the bug happened.

That’s how you actually improve.

Mistake 5: Not checking results

Always verify:

  • does the app run?
  • did the intended behavior change?
  • did anything else break?

AI is powerful, but you still need to validate.

Part 19: A mini exercise set

Here are some practice tasks you can do in order.

Exercise 1: Prevent empty tasks

Prompt:

In @script.js, stop empty tasks from being added.

Exercise 2: Add delete buttons

Prompt:

Add a delete button for each task and explain how it works.

Exercise 3: Add complete state

Prompt:

Add a way to mark tasks as completed. Keep it beginner-friendly.

Exercise 4: Review code

Use /ask and prompt:

Review the app and tell me 3 things a beginner could improve.

Exercise 5: Plan a bigger feature

Use /plan and prompt:

Plan how to add localStorage so tasks persist after refresh.

Exercise 6: Debug intentionally broken code

Break an ID or variable name, then prompt:

The app stopped working. Help me find the exact problem and explain it simply.

Part 20: The mindset that makes Banana Code useful

If you are an early-stage developer, the goal is not just:

get code fast

The better goal is:

use AI to learn faster while still staying in control

Banana Code works best when you use it as:

  • a planner,
  • a coding partner,
  • a reviewer,
  • a debugger,
  • and a tutor.

A good loop is:

  1. ask what exists,
  2. plan the change,
  3. implement carefully,
  4. review the result,
  5. debug when needed,
  6. ask why it worked.

That is how AI becomes a learning tool, not just a code vending machine.

Quick cheat sheet

Best modes

  • /agent — normal coding mode
  • /plan — plan first
  • /ask — explanation only
  • /security — security review

Best support commands

  • /context — inspect context usage
  • /clean — reduce clutter
  • /chats — resume old sessions
  • /init — create project summary
  • /model — switch model
  • /provider — switch provider
  • /help — see commands

Best prompt habit

Use:

  • goal,
  • files,
  • constraints,
  • desired explanation.

Example:

In @script.js, add delete buttons for tasks. Keep the code simple, use plain JavaScript, and explain the result in beginner-friendly terms.

Metadata

Metadata

Assignees

Labels

documentationImprovements or additions to documentationenhancementNew feature or requestgood first issueGood for newcomersquestionFurther information is requested

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions