Think. Ask. Reflect. Code. Iterate.
I'm not a programmer or software engineer.
Good! If you were a professional software engineer paid to code, this article series would most likely recap what you already know. But if you fall into any of the categories of a learning professional who also develops code, you may find my series on developing with Artificial Intelligence (AI) helpful.
Are you interested in...
- Developing eLearning using some of the well-known industry authoring tools, and you want to take advantage of JavaScript code snippets, CSS hacks, or HTML modifications?
- Integrating code with libraries used in the current eLearning authoring tools?
- Building custom learning interactions with more actionable data than the default score, completion, and time spent based on industry standards such as SCORM or xAPI?
- Creating utility tools for your team to run internally within your organization's firewall? For example, I built a "Unified Survey Explorer" tool that includes all approved questions learning designers can use for more actionable "Level 1" surveys. Not only does the tool allow them to select the questions, but they can also preview them, and they can create their pre-prod version to test data collection. All built with AI.
- Experimenting with protypes before you propose implementation internally? What took weeks and months before to build, today can be up and running within hours.
- UX/UI design, to design interfaces? You can now import your Figma design directly into Windsurf, for example, through a Model Context Protocol (MPC) server. While it may sound like rocket science, it is pretty simple to set up and your design can come alive within minutes.
If at least one of these situations resonates with you, keep going! I'll share some of the lessons learned from testing 10 AI-supported development tools (Lovable, Cursor, Windsurf, GitHub Copilot free and paid, ChatGPT, Replit, Claude Code, and Bolt), writing more than 6000 lines of code, building 15 different projects end-to-end, creating and deploying prototypes, and integrating code snippets into existing tools.
Note
These tools evolve faster than I can type. Always check the new updates and comparisons available online. This article series is not promoting any specific tools, rather providing you with the fundamentals so you can choose one and use it without wasting credit or adding any frustration [1].
This first article covers the fundamentals of AI-driven development architecture and recommended setup, to avoid frustration later in the process.
In this article, you'll find...
- The Good, The Bad, And The Ugly About Using AI For Development
- The Temptation: AI Can Help With Incredible Speed
- EDIT
- How Does AI Support Code Development?
The Good, The Bad, And The Ugly About Using AI For Development
The good news is that AI can take your project from 0-80% so smoothly it's like sailing on a speed boat but without ever touching the wheel. The bad news is that you still need to pay attention to the last 20% at the end. And the ugly part is that you can arrive somewhere you never wanted to be.
Even a couple of years ago, when I wrote code, I relied on my own knowledge and expertise first, and Stackoverflow.com second. Stackoverflow was a magical place where, no matter what questions I had, someone had already asked before. And so, I just had to copy-paste the correct solution. And tweak it. And debug it. And curse it. But, overall, it was very helpful to support development.
The Temptation: AI Can Help With Incredible Speed
Today, AI development tools powered by Large Language Models act like Stackoverflow 2.0 on steroids. Some of these tools offer no-code development: you explain in plain English what you want, and it builds it for you. You get into your "vibe" and just chat with the application to make magic happen. You can write complex programs ten times faster without ever writing a line of code. AI can help you fill the gap between your imagination and your skills. At least, until something goes wrong...
Do not let your hands completely off the wheel!
It's tempting to vibe code your imagination into reality by letting AI take over completely. In my first experiment, I allowed the AI to write 99% of the code. I accepted every change as suggested (including deleting stuff). The result: 10x faster to 80% of where I wanted to be. But what a pain the next 20% was. It even apologized for completely ruining everything and acknowledged that I was frustrated. I do not recommend accepting all changes without understanding the reasoning behind them.
Again, do not fall for the temptation of letting all control go. AI can help you, but you also need to help AI. In fact, don't even start with code at all. Think. Ask. Reflect. Code. Iterate.
Let's start with understanding what's behind the magical tools and how to set it up as your environment for success.
Minimal Setup: Copy-Pasting
If you're planning to use AI for simple, standalone code snippets or styling your web pages with just copy-pasting code into your authoring tool, you may get away with the minimal setup: ChatGPT or the free GitHub Copilot. The challenge with the copy-pasting method is that you go back and forth between two applications; you don't have any syntax error checking; you can't put any secrets into the code (never feed AI with passwords and tokens); there is no automatic code completion support; no source control, and it can get messy to remember where the last working code was.
Better: Using A Dedicated Development Tool
If you go beyond simple code snippets, I strongly suggest setting up your computer for a stable, scalable, and flexible development environment. This is a one-time effort, but it's worth it. The end-to-end development process should contain the following major components:
- Editing
Use a dedicated tool that fully supports AI-assisted development. This includes syntax highlighting, coding through chat, and manual auto suggestions/completions. - Storage
Store your code somewhere else in a safe, well-organized, version-controlled manner. - Testing, preview, debug
Set up a local testing process so you can troubleshoot quickly. - Publishing/deployment
Publish the source code for others while controlling what goes into a preview vs. a live deployment. If anything goes wrong, roll back to a previous working version. - (Optional database)
You may not need an external database for all projects, but if you do, it should be integrated into your work environment as well. - (Optional tools)
Good to have utility tools and libraries installed for more control over the process.
What does this setup look like in a potential real-world scenario?
This article explores the most critical part of the setup: editing your code.
EDIT
This is where you edit the source code. Think of this as the "working code" you change, experiment, and iterate on. Working code in the sense that this is a local copy of your "single source of truth" code. Because you're storing the "single source of truth" source code elsewhere as well (GitHub, for example) so you don't have to worry about breaking things.
Editing code requires an application. While you can use simple text editors like Notepad++ to take advantage of full AI support, I suggest using Visual Studio code (VS code), a free Microsoft product that offers extensions you can choose to install.
Depending on which AI development tool you choose (more on this later), you may use a "plug-in" in VS code or their standalone development tool. You may hear the word IDE (as in integrated development environment), which is not only a code editor but also bundles debugging, execution, compiling, and automation in one.
Whether you're using the generic VS code with plug-ins or the dedicated AI dev tool as a standalone IDE, you'll need to connect to the Large Language Model so it can support your development.
- Stating the obvious
Regardless of what development tool you're using, they all connect to foundational Large Language Models such as GPT-5, Claude Sonnet 4, etc. So, yes, technically, you could directly interact with these models, but AI development tools offer a lot more convenience, flexibility, and power.
Connect Your Dev Tool With AI
As you can see in the architecture diagram, the application you use for code editing is connected to the LLMs. Generally, you can work with LLMs in two ways: bring your key or subscription.
- Bring your own key
This means you need an account set up with the LLM and you provide the secret tokens to the editor. You pay directly based on your use. - Subscription
This means that your development tool has a subscription plan you're paying for. For that subscription, you gain access to the models they have available.
- Stating the obvious
You do not have unlimited use of the LLM regardless of which option you choose. The difference is how you pay for the usage and how much control you want over that. - If a development tool such as Windsurf has limited credit per month, what happens when I run out of credit?
It depends on the dev tool. It may slow you down, enforce free models, or offer you buy extra credits until your credit allowance is reset. I'll share some tips and best practices in the series about how not to blow your monthly credit within two days.
How Does AI Support Code Development?
Once you have connected your development tool with AI, generally, there are two ways it can help you write code. Agent mode allows you to explain what you want in plain English (across all files in the project, not just one), and the dev tool just makes it happen. Or, you can manually edit the code, and it will magically suggest autocompletions. And by that, I do mean magically. It almost reads your mind about what you need to type. It not only predicts the completion of a line of code, but it can also suggest a whole block. How well they work depends on the tool.
If your goal is not only to get things done but to learn a language, I strongly suggest writing code using the autocompletion rather than just relying on the chat and accepting all changes blindly. In fact, if you do the latter, you'll be surprised by what you may find in your code (or may not find).
What Are Some Practical Ways AI Supports The Editing/Coding Process
- Understanding the project structure to explain what files are used for what.
- Searching across multiple files. And by that, I don't just mean search for the word "admin page" but literally, in plain language, you can ask, "Show me where in the code we're validating the admin login?"
- Highlighting parts of your code to ask AI to explain it line by line. You can do "what-if" scenarios without breaking the code: "What if I changed X to Y? What would happen?"
- Asking AI to analyze your code and suggest improvements, simplifications, or point out potential error handling issues.
- Debugging. AI can quickly add a debugging function that you can see in the console as you're troubleshooting. Then, you can ask AI to turn it off.
- Improving legacy code.
- Using a screenshot to tell AI what you want or what you see (some models do not support screenshots)
- Transforming data from one format to another instantly.
The possibilities are endless. Task #8, transforming text from one format to another, used to be one of the most boring, annoying, and repetitive tasks I had to do. For example, imagine you copy-paste a table from a web page and you need to reformat the whole thing, but only where they have references in one of the columns. This was either a manual effort or required sophisticated text processing code. Today, I can simply ask AI to reformat the text under specific conditions.
Always check the output
While the magical production is amazing, and most of the time correct, validate the results! I asked AI once to transform my data literacy quiz questions from a table format to a different format (JSON) for a new application. In seconds, I had the new format ready. It looked totally fine. However, when I tested the application, I found something strange: only correct answers were present in the quiz options. I checked the code and there it was (or actually, wasn't): AI has removed all the incorrect answers from the quiz questions. I guess this seemed like a "bonus" improvement I didn't ask for.
So far, we have looked at the edit code part of the architecture. This is already an improvement from copy-pasting code, but it doesn't offer any version control. If something goes wrong and you want to roll back to a previous version after making multiple changes, it may not be possible. This is what GitHub does.
However, if you want to start out experimenting with building simple code snippets or webpages, this setup is a good start. Just make sure you save the code somewhere else while you're working on a new feature, in case something goes wrong.
Final word on the editing
We'll cover Model Context Protocol (MCP) servers in the series, but since it is on the architecture diagram, for now, let's consider an MCP server as a connection to other applications and resources. For example, you can connect your Figma design directly to Windsurf and create a live, functioning page based on the Figma design.
In the next article, we'll cover the remaining architecture components (storing, previewing/testing, and deploying) and address some fundamental questions about selecting an AI-driven development tool.
References:
[1] Best AI Tools for Coding in 2025: 6 Tools Worth Your Time
Image Credits:
- The image within the body of the article has been created/supplied by the author.
