Coding with AI

AI-Assisted Web Development

Last updated 2026-09-22

What's new

2026-09-22
  • Codex (a tool by OpenAI that helps you do tasks with AI, like writing, designing, or coding) can be used to build skills, create branded deliverables, and even automate tasks, all without needing a technical background.
  • The Codex desktop app (a program you download to use Codex easily) is recommended for a consistent experience, and it uses the same subscription as ChatGPT (a popular AI chatbot), so you won't need a new account.
  • Codex is more powerful than Work (a tool for non-technical knowledge work) and can do everything Work can do, plus more, making it a better investment for learning and using in the long run.
  • The course will teach you how to use Codex effectively with natural language (regular English, not code) and explain core concepts simply, helping you become a pro AI builder.
2026-09-19
  • You can use AI to build a website for a local business for free, using a tool like GoDaddy's Arrow AI builder (a beginner-friendly, no coding AI tool for creating websites), to get your foot in the door and then offer paid maintenance and higher-value services.
  • The strategy involves building trust by first offering a free website, then charging a low monthly fee to maintain it, and finally selling more profitable services once the client is comfortable with you.
  • This approach is inspired by businesses that start with a cheap, easy-to-understand product (like a burger) to sell more profitable items (like drinks and fries) later, keeping the initial offer simple and the follow-up offers related and easy to add.
  • Focus on one service (like website creation) until you have a steady stream of clients, then gradually add more services (like automations or consulting) to expand your business.
2026-09-16
  • Codex (a powerful AI app) and GPT6 (a state-of-the-art AI model) can build any type of app, create 3D models, and even control your computer to accomplish tasks.
  • The Codex app is accessed through the ChatGPT desktop app, not the web browser, and requires a subscription plan for full access.
  • Codex is designed to work best with GPT6 and future models, as they are trained specifically for this app, making it more powerful than using the model in other platforms.
  • You can enhance Codex's capabilities by choosing different models and adding plugins, allowing you to customize and improve its performance.
2026-08-25
  • A free tool called **ScrollCraft** (a plugin for AI assistants like Claude) turns basic websites into interactive, scroll-driven pages with smooth animations.
  • It asks simple questions to match your site’s style—like "travel agency" or "perfume brand"—then rebuilds it with premium design while keeping your original text and branding.
  • Instead of generic AI slop, it creates unique layouts with subtle effects (e.g., zooming, animations) to hook visitors and make scrolling engaging.
  • Works by installing the plugin in **CloudCode** (a desktop tool for AI coding) and pasting your existing files—no coding skills needed.
2026-08-16
  • Codex (a tool that helps automate tasks) now has a browser feature that can control your browser, test websites, and find bugs, even when you're not signed in.
  • You can use Codex to annotate (mark and describe) issues on a website, and it will help fix them, making it easier to design and test websites.
  • Codex can run tests in the background (headless mode) or show you what it's doing (headed mode), and it can simulate (pretend to be) users to find unexpected issues.
  • This tool can help you test your website or app thoroughly, finding problems you might miss, and it can work on both desktop and mobile views.
2026-08-13
  • Most businesses don't need to "train" AI (teach it from scratch with massive data and money), as that's only for big companies like Anthropic (AI developers) or OpenAI (AI developers).
  • Instead, use "projects" (folders in AI tools like Claude or ChatGPT) to organize tasks, and add "rules" (instructions) and "files" (documents) to help the AI understand your business context.
  • AI tools can also create "notes" (records of your preferences) over time, improving their understanding of your specific needs without constant input from you.
2026-08-10
  • OpenAI (a company making AI tools) might release a new, powerful AI model called Doug later this year, which could be even more advanced than their current models like Astra.
  • Alibaba (a large tech company) has a new AI model, Kiana, that's showing strong performance in coding tasks, and you can try it out on a platform called Arena (a website where you can test different AI models).
  • A new tool called ContextDev (a service that helps AI developers get clean data from websites) can help you extract structured data, generate AI-ready markdown, and pull brand assets like logos and colors from websites using a single API (a way for different software applications to communicate with each other).

Key points

What it is

  • AI-assisted web development uses artificial intelligence to build websites and web applications, often reducing the need for manual coding.
  • It enables AI agents (autonomous programs that perform tasks for you) to interact with the web more efficiently than mimicking human clicks.
  • This approach allows for faster development and creates apps that can perform tasks on your behalf, like managing your inbox or calendar.

How to use it

  • Start by using AI coding tools like Codex or Claude Code, and describe what you want in plain language to generate code.
  • Integrate tools like WebMCP to make your agent more capable, turning existing HTML forms into AI-accessible tools without needing JavaScript.
  • Use plugins to extend your AI agent's capabilities, allowing it to open browser tabs, click buttons, type text, and control your computer directly.

Watch out for

  • Avoid treating the browser as just a display window; use it as an active workspace where the AI can navigate and manipulate data.
  • Don't expect AI to mimic human clicking behavior; writing code is more effective for tasks like building complex spreadsheets.
  • Remember that AI outputs may initially be around 60% quality, but these tools are designed to improve over time.

Tools named

  • Codex (AI coding tool that understands plain-English instructions), Claude Code (AI coding tool that understands plain-English instructions), WebMCP (system that lets AI agents discover and invoke tools from your browser), Google Stitch (website building tool), 21st.dev (website building tool), Agent Browser (browser for AI to test and interact with websites)

Lesson 1: What is AI-Assisted Web Development and why it matters

AI-assisted web development is when you use artificial intelligence tools to build websites and web applications, often without needing to write all the code yourself. Instead of a human manually typing every line, the AI can generate whole sections of a site or even redesign an entire company website in days instead of months, as one developer noted: "this would have meant several product marketers, a designer, a couple of consulting PMs, a web team, and it would have taken 2 months," but with AI, you can just "give it a go."

This matters for AI development because the web is becoming "agent-ready." Historically, the web was built for human eyes and human clicks. Now, AI agents (programs that act on your behalf) use the web too, performing tasks like booking tickets or shopping online. But making AI mimic human clicks is inefficient. Instead, writing code is a more effective way for AI to handle tasks, like building complex spreadsheets. This shift means that code becomes the foundation for a general AI agent, not just a developer tool.

To make agents work, they need good web access. One video described the pain of "duct-taping together a search API, a headless browser, a scraping tool" that breaks frequently. New systems, like Microsoft's Web IQ, gives agents fresh web information to "reason, verify, and complete tasks," rather than showing links and rankings to humans. Ultimately, AI-assisted web development lets you create apps that "do things on your behalf"—clearing your inbox or booking your calendar—without requiring you to scroll and click manually.

Sources

Lesson 2: How to use AI-Assisted Web Development: step-by-step

## How to Use AI-Assisted Web Development Step by Step

Start by opening Codex or Claude Code (AI coding tools that understand plain-English instructions) and type a prompt like "build a landing page for my portfolio." The tool sends an AI agent (an autonomous system that performs tasks for you) to write the code. You don't need to be technical — just describe what you want in plain language, and the agent handles the implementation.

Next, integrate tools that make your agent more capable. Use WebMCP (a system that lets AI agents discover and invoke tools from your browser) to turn existing HTML forms into AI-accessible tools. Add a few attributes like "tool name" and "tool description" to your form, and the browser automatically passes input fields to your agent — zero JavaScript needed. Plugins (add-ons that extend what your AI agent can do) let your agent open browser tabs, click buttons, type text, and control your computer directly.

For visual website building, combine Claude Code with Google Stitch and 21st.dev. This stack generates websites that don't look like generic AI slop. Use the "loop engineering" method: name your inspiration source, load design components, make small tweaks, and iterate. Create a `claude.md` file (a configuration file that tells your AI agent how to behave) to store your preferences and templates.

When you want your agent to see what it's building, use Agent Browser. Install it with `npm install -g agent-browser` and your AI can browse websites, fill forms, and test your app automatically. The future is AI that operates software — not just writes code.

Sources

Lesson 3: Best practices and pitfalls

When using AI tools like Codex or Claude for web development, a common pitfall is treating the browser as a simple display window rather than an active workspace. These tools now feature in-app browsers (browsers inside the AI interface) that can open tabs, navigate sites, and manipulate data across multiple pages simultaneously. This transforms the browser from a place you browse into a place where you get work done.

A major mistake is expecting AI to mimic human clicking behavior. Soudio noted that writing code is a more effective way for AI to handle tasks like building complex spreadsheets. Codex uses plugins (add-on tools connecting AI to applications) that manage context more effectively, allowing the AI to work longer without losing track. These plugins let the AI open browser tabs, access files, or even fully control your computer to click and type.

Best practices include starting a new chat and going straight to the browser to navigate anywhere before asking the AI to edit or take action. You can also use the slash goal feature to give Codex a specific objective. For verification, simply ask the AI to check its own work by controlling a browser — anything you can do on a computer to verify, the AI can do as well. Remember that today's AI is the worst it will ever be, so expect initial outputs around 60% quality. The key is leveraging these tools as operating systems for getting work done, not just as chatbots that browse the web.

Sources