2.a: Web & IDE Tools for AI-Powered Coding

June 2026: Before diving into terminal agents (Chapter 2.b), this section covers web-based and IDE-integrated tools that many developers use alongside or before adopting Claude Code or Codex CLI.

ChatGPT for Coding

ChatGPT (chat.openai.com) offers robust coding capabilities through GPT-4o and o3 models. It is the most accessible starting point for AI-assisted coding — no local setup required.

What You Get

Tier	Code Capabilities	Best For
Free	GPT-4o (limited)	Learning, simple queries
Plus	GPT-4o unlimited, o3 limited, Canvas	Professional developers
Pro	o3 unlimited, priority access	Power users, complex tasks
Team	Shared workspace, admin controls	Small teams

Canvas Mode

ChatGPT's Canvas is an interactive code editing environment:

Side-by-side code viewing and editing
Inline AI suggestions
Direct code execution (Python)
Syntax highlighting for 50+ languages

Example workflow:
> "Create a Python web scraper that handles pagination and rate limiting, in Canvas"
(Canvas opens with interactive code editing)

When to Use ChatGPT for Code

Learning new frameworks or concepts
Quick prototyping and brainstorming
Debugging with error messages
Generating isolated code snippets
Mobile coding (via ChatGPT app)

Limitations

No direct repository access (cannot clone repos or create PRs)
Cannot execute most languages locally (Python only via Code Interpreter)
Context limited to what you paste in
No persistent project configuration

Claude.ai for Coding

Claude.ai provides web access to Claude models with Artifacts — an interactive panel for code, documents, and visualisations.

What You Get

Free tier: Access to Claude Sonnet with limited usage
Pro ($20/mo): Higher usage limits, priority access, Projects feature
Artifacts: Interactive code panels with preview

When to Use Claude.ai

Exploring ideas before committing to implementation
Working with long documents or large code samples (200K context)
Using Projects to organise related conversations with shared context
When you want to evaluate Claude's output before adopting Claude Code CLI

Cursor AI

Cursor is a VS Code fork with deep AI integration. It is the leading IDE-integrated AI coding tool.

Setup

Download from cursor.sh
Import your VS Code settings and extensions (automatic)
Sign in and choose a plan (free tier available)
Configure your preferred AI model (Claude or GPT options)

Key Features

Composer — The standout feature. Describe changes in natural language and Composer applies them across multiple files simultaneously:

Example:
> "Add error handling to all API endpoints in src/routes/ and create
   corresponding error response types in src/types/"
(Composer edits multiple files in a single pass)

Tab Completion — Inline suggestions as you type, with multi-line predictions.

Chat — Ask questions about your codebase with full project context.

Agent Mode — Autonomous task execution similar to terminal agents, but within the IDE.

When to Use Cursor

You prefer a visual IDE experience
You want inline completions plus agentic capabilities in one tool
Your workflow centres on a single project at a time
You want fast iteration with visual diffs

GitHub Copilot

The most widely adopted AI coding tool, integrated directly into VS Code and JetBrains.

Setup

Install the GitHub Copilot extension in your IDE
Sign in with your GitHub account
Choose a plan (free for students and open-source maintainers)

Key Features

Inline Suggestions — The original tab-completion experience. Copilot predicts what you will type next.

Copilot Chat — Ask questions, explain code, generate tests, all from a sidebar panel.

Copilot Workspace — Multi-file planning and implementation from GitHub Issues. You describe what you want, Copilot creates a plan, and you approve or modify each step.

When to Use Copilot

You want seamless GitHub integration (Issues, PRs, Actions)
You need enterprise features (SSO, policy controls, IP indemnity)
You want the free student/OSS tier
You prefer unobtrusive inline suggestions over agentic workflows

Continue.dev

A free, open-source extension for VS Code and JetBrains that connects to any model provider.

Setup

# Install from VS Code marketplace or JetBrains plugin repository
# Then configure your model provider in config.json:
{
  "models": [
    {
      "title": "Claude Sonnet 4.6",
      "provider": "anthropic",
      "model": "claude-sonnet-4-6",
      "apiKey": "your-key"
    }
  ]
}

When to Use Continue.dev

You want full control over which models and providers you use
Privacy is paramount (self-hosted option)
You want a free, open-source solution
You want to combine multiple model providers in one interface

Comparison: Web & IDE Tools

Feature	ChatGPT	Claude.ai	Cursor	Copilot	Continue.dev
Cost	$0-200/mo	$0-20/mo	$0-40/mo	$0-39/mo	Free (+ API)
Interface	Web/mobile	Web	IDE	IDE extension	IDE extension
Multi-File	Limited	Artifacts	Excellent	Good (Workspace)	Good
Inline Completion	No	No	Yes	Yes	Yes
Code Execution	Python only	No	Local	No	No
Repo Access	No	No	Full local	GitHub	Full local
Open Source	No	No	No	No	Yes
Best For	Learning, mobile	Long context, exploration	IDE-native AI	GitHub ecosystem	OSS, multi-model

Tips for Getting the Most from Web & IDE Tools

DO:

Be specific about your tech stack and versions
Provide context about your project architecture
Ask for explanations alongside code
Request tests and error handling
Iterate and refine incrementally

DON'T:

Paste thousands of lines without context
Expect the tool to understand your entire codebase from a snippet
Trust output blindly without review
Use for production secrets or credentials
Assume it knows your custom internal libraries

Next Steps

Web and IDE tools are excellent starting points, but for full agentic coding — where the AI navigates your repository, runs commands, and manages Git — you will want a terminal-based agent. The next section covers setting up Claude Code and OpenAI Codex CLI.

Next: 2.b: Setting Up Terminal Agents

Last Updated: June 2026 | ChatGPT, Claude.ai, Cursor, Copilot, Continue.dev