🤖 5 - Developing extensions with AI assistance

🚀 AI-assisted development in 2025¶

If you haven’t used AI-assisted development tools yet, you’re about to experience a significant shift in how you write code. AI coding assistants can help you explore APIs, generate boilerplate, debug errors, and iterate on features much faster than traditional workflows.

🎯 Setting expectations¶

Before we dive into tools and techniques, let’s set the right mindset for working with AI.

Key mental model: Think of your AI assistant as a fast, eager junior developer who:

• ✅ Learns quickly and has read tons of documentation (but maybe not the latest stuff)

• ✅ Can scaffold code and explore APIs incredibly fast

• ✅ Sometimes makes mistakes or misunderstands requirements

• ✅ Benefits from clear instructions and iterative feedback

• ✅ Gets better with guidance and context

The right mindset:

• Don’t get frustrated by small mistakes — iterate and guide

• Review all generated code (you wouldn’t merge a PR without review)

• Ask questions: “Why did you choose this approach?”

• Treat errors as learning opportunities for both you and the AI

• Don’t be afraid to roll back to the beginning and start over if AI doubled down on a wrong path

🧠 Understanding LLMs (large language models)¶

AI coding assistants are powered by Large Language Models (LLMs) — neural networks trained on vast amounts of text and code. These models can:

• Understand context from your codebase

• Generate code snippets based on natural language descriptions

• Explain existing code and suggest improvements

• Debug errors by analyzing stack traces and code patterns

☁️ Where LLMs live: deployment models¶

Frontier Models (Cloud-Hosted):

• Deployment: Run on massive server infrastructure by model providers

• Access: Pay-per-token via API keys

• Examples:

  • Claude Sonnet 4.5 (Anthropic): Best coding model, $3/$15 per 1M tokens

  • GPT-5 (OpenAI): Best overall reasoning, $1.25/$10 per 1M tokens

  • Gemini 2.5 Pro (Google): Best for speed/context (1M tokens), multimodal, $1.25/$10 per 1M tokens

  • Claude 4 Opus (Anthropic): Best for long-horizon coding (30+ hour tasks), $15/$75 per 1M tokens

• Pros: State-of-the-art capabilities, specialized for different tasks (coding vs reasoning vs speed), no local compute needed

• Cons: Requires internet connection, ongoing costs, data leaves your machine

Mid-tier and efficient models (cloud or local):

• Deployment: Can run on cloud APIs or self-hosted on consumer hardware

• Examples:

  • Claude Haiku

  • Qwen3-30B-A3B (approaching GPT-4o performance),

  • Mistral Small 3.2

  • Llama 3.3-70B

• Pros: Lower cost or free (if self-hosted), faster responses, good balance of capability and efficiency

• Cons: Less capable than frontier models, self-hosting requires GPU resources (typically 16GB+ VRAM)

Open-source & open-weight models (2025 state-of-the-art):

• Licenses: Vary from fully open (Apache 2.0, MIT) to restricted commercial use

• Deployment: Can be self-hosted using tools like Ollama, LM Studio, or vLLM

• Examples:

  • Qwen3-235B-A22B (Apache 2.0 license): 235 billion (235B) parameters with 22B active, 262 thousand (262K) token context, exceptional reasoning

  • GLM-4.5 (Open License): Strong coding and agentic abilities, runs on consumer hardware (laptops with 16GB+ RAM)

  • GLM-4.5 Air: Optimized for laptops with 48GB RAM when quantized

  • Qwen3-Coder: Specialized for code generation tasks

  • DeepSeek-R1: 671B parameters (37B active), MIT license, advanced reasoning (86.7% on AIME)

  • OpenAI GPT-OSS-120B/20B (Apache 2.0): Near o4-mini performance, runs on consumer hardware

• Pros: Full control, no API costs, data stays local, latest open models often outperform closed frontier ones

• Cons: Requires technical setup and adequate hardware (typically a laptop with 16GB+ VRAM for smaller models, 48GB+ for larger ones)

# Install Ollama
# macOS: Download from https://ollama.com/download/mac
# Windows: Download from https://ollama.com/download/windows
# Linux:
curl -fsSL https://ollama.com/install.sh | sh

# Download and run a recommended coding model
# For powerful machines (24GB+ VRAM):
ollama run qwen3-coder

# For laptops/consumer hardware (16GB RAM):
ollama run glm-4.5-air

# For reasoning tasks:
ollama run deepseek-r1

# Use with Cursor/Cline via OpenAI-compatible API
# Point to http://localhost:11434/v1

🛠️ AI tools for extension development¶

Not all AI coding tools are created equal. In this workshop, we’ll use agentic AI tools that can understand your codebase, execute commands, and iterate with you—a fundamentally different and more productive experience than chat or autocomplete.

We’ll work with Cursor to demonstrate the AI-assisted workflow, then repeat key steps using Claude Code for a CLI-based approach. Both tools offer similar capabilities, so you can choose whichever fits your preferred workflow after the workshop.

1. 🖱️ Cursor¶

• What it is: A fork of VS Code with deep AI integration

• Pricing: Free Hobby plan (includes one-week Pro trial, limited agent requests, and limited tab completions). Paid plans $20-200/mo offer extended/unlimited usage limits and faster response times. See cursor.com/pricing for details.

• LLM Options:

  • Built-in models (Claude Sonnet 4.5, GPT-5, Gemini 2.5 Pro and more) with Cursor subscription

• Best for: Developers who want a polished, GUI-driven experience

• Download: cursor.com

2. 💻 Claude Code¶

• What it is: Command-line interface for Claude, optimized for coding workflows

• LLM Options:

  • Requires Claude subscription or Anthropic API key. Can also work through cloud providers, like Amazon Bedrock

  • Works with Opus 4.1, Sonnet 4.5, Haiku 4.5, and other Claude models

• Best for: CLI warriors who live in the terminal

• Install: See official setup instructions

🏁 Getting started¶

📦 Repo¶

For this module, we will start with an existing extension that we built in chapter 2. If you are not caught up or just joining us for the afternoon session, please grab a reference implementation from our demo repository.

In 🧬 2 - Anatomy of an extension, we started off by cloning an official JupyterLab extension template. This template was recently enhanced to include AI-specific configurations and rulesets. Then, we built a JupyterLab extension that displays random images with captions from a curated collection.

Now, we’ll use AI to extend this viewer with image editing capabilities.

🔄 Option 1: Continue with your own extension¶

If you completed the anatomy module and want to continue with your extension:

1. Navigate to your extension directory:

   cd ~/Projects/jupytercon2025-extension-workshop

2. Ensure your extension is on the final commit from the anatomy module (with the layout restoration feature).

3. Verify your extension is working:

   # Activate your environment
   micromamba activate jupytercon2025
   
   # Build and start JupyterLab
   jlpm build
   jupyter lab

4. Skip to AI tool below.

📥 Option 2: Fork the finished extension¶

If you’d prefer to start fresh or didn’t complete the anatomy module:

1. Ensure you are authenticated with GitHub CLI:

   See Chapter 2 → Create a GitHub repository and clone it locally (steps 2-3) for GitHub CLI authentication and gh auth setup-git.

2. Fork the demo repository to your GitHub account and clone it locally:

   cd ~/Projects
   gh repo fork jupytercon/jupytercon2025-developingextensions-demo --clone --remote
   cd jupytercon2025-developingextensions-demo

   This sets origin to your fork and upstream to the original, so you can commit and push to your fork while still pulling updates from the source repo.

3. Install and verify the extension works:

   # Create/activate environment
   micromamba create -n jupytercon2025 python pip nodejs=22 gh "copier~=9.2" jinja2-time
   micromamba activate jupytercon2025
   
   # Install the extension in development mode
   pip install --editable ".[dev,test]"
   jupyter labextension develop . --overwrite
   jupyter server extension enable jupytercon2025_extension_workshop
   
   # Build and start JupyterLab
   jlpm build
   jupyter lab

Make sure your git tree is clean, there are no unsaved and uncommitted files. This is going to be important later

🛡️ Set up your safety net: Git workflow¶

Before diving into AI-assisted development, establish a safety workflow. AI can generate code that breaks your extension, so you need the ability to roll back instantly.

The Four Safety Levels:

Level 1: Unsaved      →  Files on disk (Cmd/Ctrl + Z to undo)
Level 2: Staged       →  git add (can unstage)
Level 3: Committed    →  git commit (can reset)
Level 4: Pushed       →  git push (permanent)

Keep an eye on Source Control

• Open the Source Control view (Ctrl + Shift + G)

• Keep this panel visible alongside your AI chat

• You’ll review all AI-generated changes here before committing

We’ll cover the detailed git workflow when you start generating code in Exercise B.

⚙️ AI tool¶

We will be using Cursor and Claude Code throughout this tutorial. Please install them if you would like to follow along. Other tools work similarly, but we won’t cover them here.

🎨 Setting up Cursor¶

1. Download Cursor

   • Visit cursor.com and download the installer for your operating system

   • Install Cursor like any other application

2. Create a Cursor account

   • Launch Cursor

   • You’ll be prompted to sign in or create an account

   • Sign up for a free account

   • The Hobby plan includes a one-week Pro trial

⌨️ Setting up Claude Code¶

1. Install Claude Code

   Follow the official setup instructions for your operating system.

   Recommended: Native installers

   • macOS/Linux: curl -fsSL https://claude.ai/install.sh | bash

   • Windows PowerShell: irm https://claude.ai/install.ps1 | iex

   Alternative: npm (lives in your environment)

   If you already have Node.js 22 installed in your jupytercon2025 environment:

   micromamba activate jupytercon2025
   npm install --global @anthropic-ai/claude-code

   See the full installation guide for all options.

2. Set up AWS Bedrock authentication

   We will be using Claude models provided by AWS Bedrock in this tutorial.

   Required environment variables:

   # macOS/Linux
   export AWS_BEARER_TOKEN_BEDROCK=your-bedrock-api-key
   export CLAUDE_CODE_USE_BEDROCK=1
   export AWS_REGION=us-east-1  # or your region

   Additional customization (optional)

   To customize models:

   export ANTHROPIC_MODEL='global.anthropic.claude-sonnet-4-5-20250929-v1:0'
   export ANTHROPIC_SMALL_FAST_MODEL='us.anthropic.claude-haiku-4-5-20251001-v1:0'

   Recommended token settings for Bedrock:

   export CLAUDE_CODE_MAX_OUTPUT_TOKENS=4096
   export MAX_THINKING_TOKENS=1024

   Why these token settings?

   • CLAUDE_CODE_MAX_OUTPUT_TOKENS=4096: Bedrock’s throttling sets a minimum 4096 token penalty. Setting lower won’t reduce costs but may cut off responses.

   • MAX_THINKING_TOKENS=1024: Provides space for extended thinking without cutting off tool use responses.

By now, you should have:

• ✅ Cursor installed with a free account created

• ✅ Claude Code installed with an API key configured

• ✅ Your extension repository open and ready to work with

📋 Exercise A (15 minutes): Understand AI rules¶

Before jumping into code generation, let’s set up the “invisible infrastructure” that makes AI assistants work well. This configuration is what makes the difference between mediocre and excellent AI-generated code.

AI rules¶

AI Rules (also called Cursor Rules, or system prompts) are instructions that automatically precede every conversation with your AI assistant. They’re like permanent coaching that guides the AI’s behavior.

For this workshop, the official copier template provides AGENTS.md and can create symlinks for Claude Code and Gemini CLI. You should already have these rules configured in your repo if you selected ‘Y’ on the copier’s question about AI tools. Let’s understand what’s there and why it helps.

What’s in your AGENTS.md file¶

1. Open Cursor app

2. Set up cursor cli command

3. Open your extension folder in Cursor

cd ~/Projects/jupytercon2025-extension-workshop
# OR `cd ~/Projects/jupytercon2025-developingextensions-demo` if using a fork of example repo
cursor .

4. Take a moment to get familiar with the interface Main area for coding tabs, left side panel for file browser and extensions, right side panel for a chat interface. All should look very similar to VSCode or JupyterLab.

5. Check that the rules file exists: Look for AGENTS.md file in your extension root

6. Review the ruleset file Open AGENTS.md Key sections you’ll find:

   JupyterLab-Specific Patterns:

   • How to register commands

   • When to use ReactWidget vs Widget

   • REST with ServerConnection, state with IStateDB

   Development Workflow:

   • Run jlpm build for TS changes; restart Jupyter for Python changes

   • Debug via browser console and server logs

   Code Quality Essentials:

   • Prefer user notifications (Notification.*, showErrorMessage); avoid leaving console.log() in committed code

   • Define interfaces; avoid any; use type guards

   Project Structure:

   • Frontend in src/; backend Python in <extension_name>/

   • Commands in src/index.ts; routes in <extension_name>/routes.py

   Common Pitfalls to Avoid:

   • ❌ No document.getElementById() — use JupyterLab APIs

   • ❌ Don’t hardcode URLs — use ServerConnection.makeSettings()

   • ❌ Don’t forget dispose() methods

   • ❌ Don’t mix npm and jlpm

Why this matters: These rules teach AI the JupyterLab patterns before it writes any code. Without them, AI might use generic React patterns or wrong APIs. With them, AI generates code that follows JupyterLab conventions from the start.

Customize your AGENTS.md¶

It can be helpful to modify the provided generic “JupyterLab extension” AI rules to include your favorite tools, package managers, and conventions.

Let’s modify the rules to include the package manager we are using and the environment name, so that the Cursor would have an easier time building our extension.

Open your AGENTS.md file and find the “Environment Activation (CRITICAL)” section. Modify it to specify our workshop environment:

 ### Environment Activation (CRITICAL)

 **Before ANY command**, ensure you're in the correct environment:

-```bash
-# For conda/mamba/micromamba (replace `conda` with `mamba` or `micromamba` depending on the prompter's preferred tool):
-conda activate <environment-name>
-
-# For venv:
-source <path-to-venv>/bin/activate  # On macOS/Linux
-<path-to-venv>\Scripts\activate.bat # On Windows
-```
+Use micromamba:
+```bash
+micromamba activate jupytercon2025
+```

 **All `jlpm`, `pip`, and `jupyter` commands MUST run within the activated environment.**

This tells the AI assistant to use micromamba with the jupytercon2025 environment that we’re using in this workshop, making it easier for the AI to run build commands correctly. If you use other environment manager, adjust accordingly.

Verify that Cursor recognizes the rules¶

1. Open the Cursor Chat panel (Cmd/Ctrl + L) and choose Ask Mode

2. Paste the following prompt into a chat to verify that Cursor is using our rules:

   What package manager should I use for JupyterLab extension frontend?

   AI should respond with jlpm, not npm or yarn - that comes from your AGENTS.md rules!

3. Get ready for development. Start a new chat choose Agent Mode and send this prompt:

   Prepare my extension for development:
   1. Check that I am using the correct environment `jupytercon2025`
   2. Check that my environment have JupyterLab and nodejs installed
   3. Check that TypeScript is configured correctly
   4. Verify extension is installed
   5. Build my extension

   AI should respond with (Claude Sonnet 4.5):

   • Checking your environment and switching to jupytercon2025 for the rest of the commands

   • Verify tools like jlpm are available in the environment

   • Checking that extension is currently installed by looking into the outputs of jupyter labextension list and jupyter server extension list

   • Building the extension for you

   • Providing a summary of operations and suggestions on how to get it running

Here’s how it looks

🏗️ Exercise B (30 minutes): Build it!¶

🔄 Your git workflow for AI-generated code¶

Now that you’re about to generate substantial code with AI, let’s establish a disciplined workflow for reviewing and staging changes.

Adopt this workflow:

# After AI generates code:
# 1. Review changes in Source Control panel (Cmd/Ctrl + Shift + G)

# 2. Test if it works - build and verify
jlpm build
jupyter lab  # Test the feature

# 3. Stage changes you like (selectively):
git add src/widget.ts              # stage individual files
git add jupytercon2025_extension_workshop/routes.py

# 4. If AI continues and breaks something:
git restore src/widget.ts          # revert to last staged/committed version

# 5. Once everything works and is staged:
git commit -m "Add image filter buttons with AI assistance"

# 6. If you need to undo a commit (but keep the changes):
git reset --soft HEAD~1            # undo commit, keep changes staged

# 7. If you need to undo a commit AND the changes:
git reset --hard HEAD~1            # ⚠️ destructive - use carefully

Keep Source Control panel visible:

• Ctrl + Shift + G to open

• Shows all modified files with diff preview

• Click any file to see exactly what changed

• Stage/unstage with + and - buttons

Understanding your starting point¶

Before we extend the functionality, a quick reminder on what the extension currently does:

Power and peril of one-shot prompts¶

Before we dive into our structured approach, let’s witness what modern AI can accomplish with a single, well-crafted prompt. This demonstration shows both the impressive capabilities and important limitations of AI-driven development.

With the right context and a detailed prompt, AI can build complete features in minutes. Here’s a prompt that could generate our entire image editing extension:

Extend this image viewer extension to add image editing capabilities:

Add editing controls to the widget:
- Buttons for filters: grayscale, sepia, blur, sharpen
- Basic crop functionality (50% crop from center)
- Brightness/contrast adjustments (slider controls)
- Save edited image back to disk

Use Pillow (PIL) on the backend to process images. The backend should:
- Accept the image filename and editing operation via REST API
- Apply the transformation using appropriate Pillow methods
- Return the processed image to the frontend as base64-encoded data

The frontend should:
- Update the displayed image immediately after each edit
- Show the current filter/transformation applied
- Allow chaining multiple edits before saving

Technical requirements:
- Add Pillow to the Python dependencies
- Create a new REST endpoint `/edit-image` in routes.py
- Add filter buttons to the widget toolbar
- Maintain the existing refresh functionality

What happens with this prompt?¶

When you give this prompt to an AI agent like Cursor or Claude Code, it will typically:

1. Analyze your existing codebase to understand the current structure

2. Make architectural decisions about implementation patterns

3. Generate 200+ lines of code across multiple files

4. Update dependencies in pyproject.toml

5. Create new endpoints in your backend

6. Modify the frontend widget with new UI controls

7. Run build commands to verify everything compiles

Send the prompt and watch as it generates the entire feature. In about 2-3 minutes, you will have a fully functional image editor!

Review the generated code

• Cursor will suggest changes across multiple files

• Read through each change carefully

• Notice the architectural choices

• Look for comments explaining the approach

• Check if dependencies were added correctly

Accept or modify the suggestions

• Click “Accept” to apply all changes

• Or click individual files to review and edit before accepting

Test the functionality:

jlpm build
pip install -e .
jupyter lab

Test the new features:

• Open the image viewer widget

• Try each filter button

• Check the browser console for errors (F12 or Cmd+Option+I)

• Check the terminal running jupyter lab for Python errors

• Find at least 3 decisions you might have made differently

The hidden cost: Decisions made without you¶

While impressive, this one-shot approach makes numerous decisions on your behalf:

Architecture Decisions:

• ❓ Base64 encoding vs. temporary file URLs?

• ❓ Stateful vs. stateless image processing?

• ❓ Where to store edited images?

UI/UX Decisions:

• ❓ Button placement and styling

• ❓ Slider ranges and defaults

• ❓ Error message presentation

• ❓ Loading state indicators

Technical Implementation:

• ❓ PIL filter parameters (blur radius, sharpen intensity)

• ❓ Image format handling (JPEG quality, PNG transparency)

• ❓ Memory management for large images

• ❓ Caching strategy for processed images

Code Quality:

• ❓ Error handling approach

• ❓ TypeScript type definitions

• ❓ Test coverage

Visual debugging with screenshots¶

AI can understand what your extension looks like! This is powerful for debugging UI issues or requesting design changes.

Try it now:

1. Open your extension in JupyterLab (should still be running from earlier)

2. Take a screenshot of the extension widget:

   • macOS: Press Cmd + Shift + 4, then drag to select the widget area

   • Windows: Use Snipping Tool or Win + Shift + S

   • Linux: Use your screenshot tool (varies by desktop environment)

3. Open Cursor chat (Cmd/Ctrl + L) and drag or paste the screenshot into the chat

4. Try one of these prompts with your screenshot:

   [Drop screenshot here]
   
   Please adjust the filter button spacing:
   - Add 8px margin between buttons
   - Increase padding inside each button to match JupyterLab's standard button styling

When to use screenshots:

• ✅ Layout and spacing problems (“buttons are misaligned”)

• ✅ Color and theming issues (“doesn’t match JupyterLab theme”)

• ✅ Showing desired design (“make it look like this”)

• ✅ Component placement (“move this above that”)

The debugging workflow for errors: Don’t manually debug—let AI help! It can read error messages, understand context, and propose fixes. If you encounter TypeScript compilation errors or Python exceptions, copy the error message into chat and ask AI to fix it.

Roll back when done¶

This is where your git safety net proves its worth! The one-shot prompt likely generated 200+ lines across multiple files. Let’s practice using the Four Safety Levels to safely undo everything.

To completely undo all changes made by the one-shot prompt:

# Level 2 → Level 1: Discard all changes to tracked files
git restore .

# Clean up any new untracked files created by AI
# (like new dependencies or generated files)
git clean -fd    # removes untracked files
git clean -Xdf   # also removes files ignored by .gitignore

Verify clean state:

git status  # Should show "nothing to commit, working tree clean"

Now you’re ready to proceed with the structured, phased approach in Exercise C.

📊 Exercise C (20 minutes): Product manager framework¶

The better way: structured, iterative development¶

While one-shot prompts are impressive for demos, professional development requires a more thoughtful approach. We’ll now proceed with a structured workflow that:

1. Plans before coding - Understand the architecture first

2. Implements in phases - Build incrementally with checkpoints

3. Reviews each step - Catch issues early

4. Maintains control - You make the key decisions

5. Manages AI context - Start with fresh chats for each phase

This takes longer but results in:

• ✅ Code you understand and can maintain

• ✅ Architecture that fits your needs

• ✅ Proper error handling and edge cases

• ✅ Learning opportunities at each step

The rise of the product manager mindset¶

AI works best with detailed specifications, not agile “figure it out as we go.” Embrace structured planning.

Before generating any code, we’ll have AI create a phased implementation plan. This:

• ✅ Keeps AI focused and prevents scope creep

• ✅ Gives you a roadmap to refer back to

• ✅ Makes it easy to resume work across sessions

• ✅ Documents architectural decisions

1. Create a plans directory:

   mkdir plans

2. Start a new chat in Cursor and use this prompt:

   I'm extending a JupyterLab image viewer to add image editing capabilities.
   
   Please create a detailed implementation plan and save it to plans/image-editing-feature.md
   
   **Requirements:**
   - Add filter buttons (grayscale, sepia, blur, sharpen)
   - Use Pillow (PIL) on the backend for processing
   - New REST endpoint `/edit-image` for transformations
   - Update frontend to display edited images immediately
   - Basic crop functionality (50% from center)
   - Brightness/contrast sliders
   - Save edited image back to disk
   
   **DO NOT WRITE CODE YET.** Create a phased plan with:
   
   **Phase 1: MVP**
   - Basic filter buttons (grayscale, sepia)
   - Backend endpoint scaffolding
   - Frontend display of processed images
   
   **Phase 2: Advanced Filters**
   - Blur and sharpen filters
   - Crop functionality
   - Brightness/contrast adjustments
   
   **Phase 3: Polish**
   - Save functionality
   - Undo/redo buttons
   - Loading states and error handling
   
   For each phase, list:
   - Specific files to create/modify
   - Python/TypeScript dependencies needed
   - Testing approach
   - Potential issues to watch for
   
   Save this plan to plans/image-editing-feature.md

3. Review the plan:

   • Open plans/image-editing-feature.md

   • Read through each phase

   • Ask questions if anything is unclear:

     In Phase 1, why did you choose to handle images as base64?
     What are the alternatives?

4. Commit the plan:

   git add plans/image-editing-feature.md
   git commit -m "Add implementation plan for image editing feature"

Why this matters: You now have a versioned plan that AI (and you) can reference. As you work through phases, AI will stay focused on the current step.

Implement phase by phase¶

1. Start a NEW chat for Phase 1 (Cmd/Ctrl + L to focus on chat panel, then Cmd/Ctrl + N to start a new chat)

2. Reference the plan:

   We are ready for Phase 1 of @plans/image-editing-feature.md
   
   Please implement the MVP: basic grayscale and sepia filters with
   backend endpoint and frontend display.

   Note the @plans/... syntax tells AI to read that specific file.

3. Review changes in Source Control (keep this panel open!)

   • Open Ctrl + Shift + G to see all modified files

   • Click each file to review the diff

   • Look for unexpected changes or files you didn’t anticipate

4. Test the implementation:

   jlpm build
   jupyter lab

   • Try the new filter buttons

   • Check browser console (F12) for errors

   • Verify backend logs in terminal

5. Stage and commit after Phase 1 works:

   # Stage only the files you've reviewed and approved
   git add src/widget.ts
   git add jupytercon2025_extension_workshop/routes.py
   git add pyproject.toml
   # and more if needed
   
   # Commit with a descriptive message
   git commit -m "Phase 1: Add basic image filters (grayscale, sepia)"

6. Start ANOTHER fresh chat for Phase 2:

   We are ready for Phase 2 of @plans/image-editing-feature.md
   
   Phase 1 is complete. Now implement advanced filters (blur, sharpen, crop).

7. Review, test, and commit after Phase 2 works:

   # Review in Source Control panel, test the features
   jlpm build
   jupyter lab
   
   # Stage and commit (review each file first!)
   git add src/widget.ts
   git add jupytercon2025_extension_workshop/routes.py
   # add any other modified files
   git commit -m "Phase 2: Add advanced filters (blur, sharpen, crop)"

8. Start ANOTHER fresh chat for Phase 3:

   We are ready for Phase 3 of @plans/image-editing-feature.md
   
   Phase 2 is complete. Now implement the polish features:
   - Save edited image functionality
   - Undo/redo buttons
   - Loading states and error handling

9. Review, test, and commit after Phase 3 works:

   # Review in Source Control panel, test the features
   jlpm build
   jupyter lab
   
   # Stage and commit
   git add src/widget.ts
   git add src/api.ts
   git add jupytercon2025_extension_workshop/routes.py
   git add jupytercon2025_extension_workshop/image_processing.py
   # add any other modified files
   git commit -m "Phase 3: Add save, undo/redo, and error handling"

Prompts as user stories¶

Now that Phase 3 is complete (with undo/redo, save, and history), consider adding a feature like Custom Filter Presets.

Wrap up¶

Key takeaways¶

✅ AI excels at:

• Scaffolding and boilerplate - New endpoints, UI components, tests

• Navigating unfamiliar APIs - Pillow, new JupyterLab features

• Systematic tasks - Following patterns, applying transforms

• Explanation and education - “Why did you choose this approach?”

• Self-correction - Fixing build errors, addressing type issues

• Iterative refinement - Adjusting based on your feedback

⚠️ AI may struggle with:

• Complex architectural decisions - When to use State DB vs. props

• Complex async bugs - Race conditions, timing issues, subtle promise chaining errors

• Performance optimization - Knowing when code is “fast enough”

• Project-specific conventions - Without AGENTS.md guidance

• Ambiguous requirements - “Make it better” vs. specific criteria

🎯 The sweet spot: AI is most effective when you provide:

1. Clear requirements (Product Manager mindset)

2. Project context (AGENTS.md rules, documentation)

3. Phased plans (not trying to do everything at once)

4. Iterative feedback (junior developer coaching)

5. Safety nets (Git commits at each checkpoint, testing)

💾 Final Git commit and push!

git add .
git commit -m "Complete image editor feature"
git push

🖥️ Demo: AI from the command line (10 minutes)¶

1. Start an interactive session:

   claude

2. Send the prompt from Exercise B:

   Use the same one-shot prompt from Exercise B to add image editing capabilities. Claude Code will read the referenced files automatically as you mention them in your prompt.

3. Review and apply changes:

   • Claude Code will show diffs for each file

   • Type y to accept, n to skip, or e to edit

   • Changes are applied directly to your files

Claude Code tips¶

Run commands without leaving the chat:

Can you also run `jlpm build` to verify this compiles?

or run the commands inside Claude Code by triggering bash mode with !. Claude Code will see your command and outputs and might use them later, i.e. for debugging

Ask for explanations:

Before you change the code, explain how Pillow's ImageFilter.BLUR works
and why you're choosing this approach.

Request tests:

Generate pytest tests for the new /edit-image endpoint.

🤔 Reflection and next steps¶

Phew! 😮‍💨 That was a lot! Now we’ve completed our exercises let’s take a moment to reflect:

💭 Quick reflection¶

Think about these questions — we’ll discuss as a group:

1. What surprised you most about working with AI?

   • Did it understand JupyterLab patterns better or worse than expected?

   • Were there moments where it “just got it” vs. moments where you had to guide it heavily?

2. Which technique was most valuable for you?

   • Planning first with phased implementation?

   • Using screenshots for UI debugging?

   • Starting fresh chats to manage context?

   • The AGENTS.md rules and documentation setup?

3. What would you do differently next time?

   • More detailed planning upfront?

   • Smaller phases?

   • Different prompting approach?

🔑 Key takeaways¶

🎓 Challenge extensions (optional)¶

🎯 What’s next?¶

You’ve now experienced the complete AI-assisted development workflow:

• ✅ Used AI to generate code for new features

• ✅ Debugged issues by iterating on prompts

• ✅ Learned to provide effective context and constraints

• ✅ Understood when to accept AI suggestions vs. when to customize

🌟 Continuing your journey¶

The next chapter provides independent exploration time where you can:

1. Build your own extension from scratch - Using the template and proven project ideas

2. Contribute to existing extensions - Give back to the community and learn from production code

Choose the path that interests you most, work at your own pace, and instructors will be available to help when you get stuck.