---
title: "20 — AI Development Tools: Editors, Codex, and the APIs Behind Them"
uid: ai-engineer-development-tools
tags: ["ide", "windsurf", "cursor", "replit", "development-tools", "roadmap:ai-engineer", "codex", "claude-code"]
excerpt: "AI-native editors, coding agents, model APIs: not competitors, but three integration points. The real choice is where the AI sits in the loop."
date: 2026-08-13T03:28:35+0000
source: https://www.aveshina.my.id/en/blog/ai-engineer-development-tools
---

The AI tooling that now surrounds coding looked like an ever-growing list of competitors — until I noticed they sit at different points in the same loop. The map that fixed it: **these tools split into three shapes — AI-native editors, coding agents, and the raw model APIs that power both — and the choice is about where the AI sits in the loop.** [1] An AI-native editor embeds suggestions where I'm already typing. A coding agent takes goals and works through a codebase more autonomously. A raw model API lets me build the AI feature myself. They're not competitors so much as different integration points, and most developers use all three layers in a week.

The framing that finally landed is a spectrum of autonomy. At one end, the AI is a fancy autocomplete — I type, it suggests, I accept or reject, and I stay fully in control. In the middle, the AI is a pair programmer that can answer questions, refactor a function, or draft a feature given a spec, but I'm still driving. At the far end, the AI is an agent that takes a goal ("implement and test this feature"), navigates the codebase, writes code, runs tests, and reports back. The further along that spectrum, the more the AI does and the more carefully I have to review what it produced.

```figure
<svg viewBox="0 0 740 280" xmlns="http://www.w3.org/2000/svg" class="my-6 w-full max-w-2xl" role="img" aria-label="A spectrum of AI dev tool autonomy. Left: AI-native editor with inline autocomplete (you type, it suggests). Middle: coding agent pair-programming from a spec. Right: autonomous agent navigating a codebase, writing code, running tests. A bottom row shows the raw model APIs that power all three.">
  <g font-family="ui-sans-serif, system-ui, sans-serif" text-rendering="geometricPrecision">

    <!-- spectrum line -->
    <line x1="40" y1="140" x2="700" y2="140" stroke="#94a3b8" stroke-width="1.5"/>
    <text x="40" y="40" font-size="11" font-weight="700" fill="#1e1b4b">Fancy autocomplete</text>
    <text x="370" y="40" font-size="11" font-weight="700" fill="#1e1b4b" text-anchor="middle">Pair programmer</text>
    <text x="700" y="40" font-size="11" font-weight="700" fill="#1e1b4b" text-anchor="end">Autonomous agent</text>

    <!-- editor -->
    <rect x="40" y="60" width="180" height="140" rx="10" fill="#e0e7ff" stroke="#6366f1" stroke-width="1.5"/>
    <text x="130" y="84" font-size="11" font-weight="700" fill="#1e1b4b" text-anchor="middle">AI-native editor</text>
    <text x="130" y="104" font-size="10" fill="#1e1b4b" text-anchor="middle">Cursor · Windsurf</text>
    <rect x="56" y="118" width="148" height="22" rx="3" fill="#fff" stroke="#6366f1"/>
    <text x="64" y="133" font-size="9" font-family="ui-monospace, monospace" fill="#1e293b">const x = █</text>
    <rect x="56" y="146" width="148" height="22" rx="3" fill="#c7d2fe" stroke="#4f46e5"/>
    <text x="64" y="161" font-size="9" font-family="ui-monospace, monospace" fill="#1e1b4b">→ computeTotal()</text>
    <text x="130" y="188" font-size="9" font-style="italic" fill="#1e1b4b" text-anchor="middle">you type, it suggests</text>

    <!-- agent pair programmer -->
    <rect x="280" y="60" width="180" height="140" rx="10" fill="#fef9c3" stroke="#ca8a04" stroke-width="1.5"/>
    <text x="370" y="84" font-size="11" font-weight="700" fill="#422006" text-anchor="middle">Coding agent</text>
    <text x="370" y="104" font-size="10" fill="#422006" text-anchor="middle">Claude Code · Codex</text>
    <rect x="296" y="118" width="148" height="50" rx="4" fill="#fff" stroke="#ca8a04"/>
    <text x="304" y="134" font-size="9" font-family="ui-monospace, monospace" fill="#422006">&gt; refactor auth.js</text>
    <text x="304" y="148" font-size="9" font-family="ui-monospace, monospace" fill="#422006">  to use the new session</text>
    <text x="304" y="162" font-size="9" font-family="ui-monospace, monospace" fill="#422006">  API, run the tests</text>
    <text x="370" y="188" font-size="9" font-style="italic" fill="#422006" text-anchor="middle">goal-driven, you review</text>

    <!-- autonomous -->
    <rect x="520" y="60" width="180" height="140" rx="10" fill="#dcfce7" stroke="#16a34a" stroke-width="1.5"/>
    <text x="610" y="84" font-size="11" font-weight="700" fill="#052e16" text-anchor="middle">Autonomous agent</text>
    <text x="610" y="104" font-size="10" fill="#052e16" text-anchor="middle">ReAct + tools + tests</text>
    <rect x="536" y="118" width="148" height="50" rx="4" fill="#fff" stroke="#16a34a"/>
    <text x="544" y="134" font-size="9" font-family="ui-monospace, monospace" fill="#052e16">navigate → edit → run</text>
    <text x="544" y="148" font-size="9" font-family="ui-monospace, monospace" fill="#052e16">→ fix → iterate</text>
    <text x="544" y="162" font-size="9" font-family="ui-monospace, monospace" fill="#052e16">→ report back</text>
    <text x="610" y="188" font-size="9" font-style="italic" fill="#052e16" text-anchor="middle">most autonomy, careful review</text>

    <!-- model APIs row -->
    <rect x="120" y="220" width="500" height="40" rx="8" fill="#fce7f3" stroke="#db2777" stroke-width="1.5"/>
    <text x="370" y="238" font-size="11" font-weight="700" fill="#500724" text-anchor="middle">Raw model APIs power all three</text>
    <text x="370" y="254" font-size="9.5" fill="#500724" text-anchor="middle">Claude · GPT/Codex · Gemini · Hugging Face models</text>
  </g>
</svg>
```

## AI-native editors: AI where I'm already typing

**Cursor** and **Windsurf** are the leading AI-native code editors — editors built from the ground up around LLM features rather than having AI bolted onto a traditional IDE [2][3]. They provide code generation, intelligent autocompletion, refactoring suggestions, and context-aware chat, all inside a familiar editor environment. The unifying idea is _proximity_: the AI lives where my cursor lives, so the friction of "ask the AI" collapses to a keystroke.

The distinction between Cursor and Windsurf is more about flavor than category. Both are forks of the VS Code editor with deep AI integration; both can read the surrounding codebase for context; both support inline suggestions and multi-file edits. The choice between them is the same kind of choice as between any two editors — workflow fit, the specific features that matter to me, and which one's AI behavior I find least annoying. The roadmap also points at **Replit**, a browser-based IDE that adds real-time collaboration and AI features, valuable when I want zero local setup or need to share a coding session [4].

## Coding agents: goal-driven, with review

**Claude Code** and **Codex** represent the next step along the autonomy spectrum — coding agents that take goals and act on them [5][6]. Claude Code is Anthropic's agent for understanding natural-language prompts and translating them into functional code across languages — automating repetitive tasks, generating snippets, creating whole functions or modules from descriptive instructions, and able to navigate a codebase to do it [5]. **Codex** is OpenAI's model for translating natural language into code, adept at interpreting comments and instructions to produce functional code in Python, JavaScript, and more [6].

The difference between an AI-native editor and a coding agent is the shape of the interaction. The editor's AI is reactive — I'm typing, it suggests. The agent's AI is proactive given a goal — I describe what I want ("refactor this module to use the new API, then run the tests"), and it works through the steps. The tradeoff is exactly the autonomy spectrum: more agency means more done for me, and more careful review required, because the agent made decisions I wouldn't have made. The agents that work best in practice are the ones that show their work — the Thought-Action-Observation trace from the agents post — so I can verify the reasoning, not just the final diff.

## The model APIs underneath

Underneath every editor and every agent is a raw model API, and the roadmap's "Development Tools" section threads these together for good reason — the same models that power the tools are available to me directly when I build AI features. **Claude's** and **Gemini's** APIs power agents and editors that use those models; **OpenAI's** APIs (including the image-generation, vision, and Whisper speech APIs covered in the multimodal post) power features that need those capabilities [7][8]. **Hugging Face Models** is the open-weights registry, giving access to pre-trained models for NLP, vision, and audio that I can run myself or through hosted inference [9].

The practical implication: the same model that suggests code in my editor is the model I'd call from a server. When I build an AI dev tool of my own — a custom code reviewer, a documentation generator, a test-writer — I'm composing the same APIs. The line between "using AI dev tools" and "building AI dev tools" is thinner than it looks, because the underlying capability is the same set of model APIs.

## Frameworks for multimodal dev features

For features that integrate multiple AI capabilities — say, a tool that reads a design image, generates code from it, and writes tests — the framework layer from earlier applies here too. **LangChain** and **LlamaIndex** support multimodal applications, letting me chain a vision model, a code model, and a test runner into one workflow [10][11]. The development-tools section of the roadmap closes the loop: the frameworks I'd use to build any AI feature are the same ones I'd use to build an AI-assisted dev feature, because the primitive operations — call a model, parse the output, decide the next step — are identical.

## How I use this

My own workflow uses all three layers, and the discipline is matching the layer to the task. For line-by-line coding — writing a function, fixing a typo, renaming a symbol — I use an AI-native editor (Cursor or Windsurf), because the inline suggestion is the lowest-friction help and I stay fully in control. For larger tasks — implement a feature from a spec, refactor a module, write a set of tests — I use a coding agent (Claude Code or Codex), giving it a goal and carefully reviewing the trace and the diff, because the agency saves real time but the decisions need verification. For building AI features of my own, I drop to the raw model APIs and the frameworks, composing the same capabilities the tools use into whatever shape my product needs. The unifying habit is to never trust the AI output unverified at any layer — inline suggestions can be subtly wrong, agent diffs can introduce bugs, and my own API-based features need evals just like any other. The autonomy spectrum is real, but review is constant across all of it.

## References

[1] Anthropic, "Claude Code Overview," 2025. [Online]. Available: [https://code.claude.com/docs/en/overview](https://code.claude.com/docs/en/overview)

[2] Cursor, "Cursor Docs," 2025. [Online]. Available: [https://cursor.com/docs](https://cursor.com/docs)

[3] Windsurf, "Getting Started," 2025. [Online]. Available: [https://docs.windsurf.com/windsurf/getting-started](https://docs.windsurf.com/windsurf/getting-started)

[4] Replit, 2024. [Online]. Available: [https://replit.com/](https://replit.com/)

[5] Anthropic, "Claude Code in Action," 2025. [Online]. Available: [https://anthropic.skilljar.com/claude-code-in-action](https://anthropic.skilljar.com/claude-code-in-action)

[6] OpenAI, "Codex," 2025. [Online]. Available: [https://chatgpt.com/codex](https://chatgpt.com/codex)

[7] Google, "Google Gemini," 2024. [Online]. Available: [https://gemini.google.com/](https://gemini.google.com/)

[8] OpenAI, "OpenAI Image Generation," 2024. [Online]. Available: [https://platform.openai.com/docs/guides/images](https://platform.openai.com/docs/guides/images)

[9] Hugging Face, "Models," 2024. [Online]. Available: [https://huggingface.co/models](https://huggingface.co/models)

[10] LangChain, 2024. [Online]. Available: [https://www.langchain.com/](https://www.langchain.com/)

[11] LlamaIndex, "Multi-modal," 2024. [Online]. Available: [https://docs.llamaindex.ai/en/stable/use_cases/multimodal/](https://docs.llamaindex.ai/en/stable/use_cases/multimodal/)

```quiz
Q: AI dev tools split into three shapes based on…
- the programming language they support
- where the AI sits in the loop: AI-native editors (inline), coding agents (goal-driven), and the raw model APIs that power both
correct: 1
explain: The three shapes are different integration points of the same underlying models. The choice is about autonomy and proximity, not capability.

Q: The key difference between an AI-native editor and a coding agent is…
- editors use different models than agents
- editors are reactive (suggest as you type); agents are proactive given a goal, working through steps you then review
correct: 1
explain: Editors collapse "ask the AI" to a keystroke. Agents take a goal and act on it. More agency means more done for you and more careful review required.

Q: Why does the line between "using AI dev tools" and "building AI dev tools" feel thin?
- because the tools are closed-source
- because the same model APIs that power the tools are available to you directly when you build features
correct: 1
explain: Underneath every editor and agent is a raw model API. Building an AI dev feature means composing the same APIs the tools use.

Q: Along the autonomy spectrum (autocomplete → pair programmer → autonomous agent), what stays constant?
- the amount of code the AI writes
- the need to verify output — inline suggestions, agent diffs, and your own API features all need review
correct: 1
explain: Autonomy changes how much the AI does. It does not remove the need to verify. Subtle errors are possible at every layer.

Q: Replit's distinguishing feature versus Cursor or Windsurf is…
- it is the only one with AI
- it is browser-based with real-time collaboration, useful for zero-setup or shared sessions
correct: 1
explain: All three have AI. Replit's difference is the browser-based, collaborative environment, which matters for specific workflows over raw AI capability.
```
