> Markdown version of [/videos/1201-livecoding-with-ai](https://www.wearedevelopers.com/videos/1201-livecoding-with-ai). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Livecoding with AI

Intercept GitHub Copilot's network traffic to reveal exactly how AI models stream code. Watch a complete web application built from a single photograph in just 30 minutes.

- **Speakers:** [Rainer Stropek](https://www.wearedevelopers.com/@rainer-stropek)
- **Event:** World Congress 2024
- **Published:** August 29, 2024
- **Duration:** 31:39
- **URL:** https://www.wearedevelopers.com/videos/1201-livecoding-with-ai

## Summary

A modern AI-assisted development workflow is demonstrated by building a German word clock application from scratch in just 30 minutes. Starting with a photograph of a physical clock, multimodal models like ChatGPT (GPT-4o) instantly generate foundational HTML and CSS scaffolding. This bypasses initial boilerplate toil and accelerates the jump directly into implementing business logic.

The workflow relies heavily on "comment-driven development," where the developer writes natural language specifications and the AI acts as a co-pilot to implement the logic. By intercepting GitHub Copilot's network traffic with a man-in-the-middle proxy, the session reveals the underlying mechanics of AI code generation. It highlights how Copilot optimizes performance by utilizing faster, less expensive models (GPT-3.5) for streaming statement completion via server-sent events, while reserving more capable models (GPT-4 Turbo) for complex chat queries and follow-up prompts.

Despite massive speed gains, AI tools still lack broad architectural awareness and are restricted by token limits, making strictly typed languages like TypeScript crucial for supplying necessary metadata. Because AIs hallucinate when lacking context, developers must evolve from rapid code writers to critical code readers. Blindly generating both business logic and its associated unit tests is a recipe for disaster; while AI accelerates output, the human developer must retain absolute control and accountability over the final codebase.

**Keywords:** AI-assisted software development, multimodal AI code generation, github copilot internals, comment-driven development, server-sent events streaming, LLM token limitations, typescript metadata optimization, automated unit testing with jest, AI code review skills, man-in-the-middle proxy debugging, web UI scaffolding, chatgpt GPT-4o capabilities, GPT-3.5 statement completion, AI hallucination mitigation

## Chapters

1. **Building a word clock with artificial intelligence in thirty minutes** (00:01) — Executing a rapid live coding session to demonstrate building a word clock using generative models.
1. **Generating structural HTML and CSS from reference images** (01:03) — Supplying screenshots to multimodal artificial intelligence to instantly create styled frontend components.
1. **Generating TypeScript types from existing HTML structure** (04:19) — Automating tedious boilerplate generation by prompting an assistant to extract data types from markup code.
1. **Writing application logic using comment-driven development** (07:01) — Using descriptive English comments to prompt code completion tools for specific functional behaviors.
1. **Intercepting AI code completion traffic with a proxy** (08:37) — Setting up a local network proxy to inspect the data exchanged between the editor and completion services.
1. **Creating complex calculation methods with contextual chat prompts** (14:09) — Selecting relevant code snippets to provide scoped context for generating targeted mathematical functions while avoiding hallucination.
1. **Analyzing the internal system prompts of AI assistants** (17:24) — Inspecting network payloads to reveal the internal system instructions and model version routing driving conversational tools.
1. **Automating unit test generation to verify artificial intelligence output** (21:53) — Generating test suites for automatically written functions to enforce reliability and catch unexpected logical errors.
1. **Translating raw data into application state logic** (25:30) — Instructing a chat assistant to map specific data calculations directly into functional user interface states.
1. **Addressing AI limitations and best practices in development** (29:00) — Exploring techniques for providing metadata to models, the benefits of strict typing, and handling token limits.

## Related Moments

- [Introduction to AI code generation and developer habits](https://www.wearedevelopers.com/videos/600-stack-overflow-community-and-ai) (from "Stack Overflow: Community and AI")
- [Discussion on AI hallucinations and practical developer workflows](https://www.wearedevelopers.com/videos/805-openai-for-fintech-building-a-stock-market-advisor-chatbot) (from "OpenAI for FinTech: Building a Stock Market Advisor Chatbot")
- [Learning software engineering through pair programming with AI assistants](https://www.wearedevelopers.com/videos/1348-what-s-new-with-google-gemini) (from "What’s New with Google Gemini? ")
- [Overcoming initial skepticism of AI code generation](https://www.wearedevelopers.com/videos/100119-it-s-not-vibe-coding-if-you-know-what-you-re-doing) (from "It's Not Vibe Coding If You Know What You're Doing")
- [Shifting developer workloads and realistic AI productivity gains](https://www.wearedevelopers.com/videos/1830-wearedevelopers-live-speculaitions) (from "WeAreDevelopers LIVE - SpeculAItions")
- [The evolution of AI coding assistants](https://www.wearedevelopers.com/videos/1387-agents-for-the-sake-of-happiness) (from "Agents for the Sake of Happiness")

## Related Articles

- [MLOps And AI Driven Development](https://www.wearedevelopers.com/magazine/82-mlops-and-ai-driven-development)
- [How we Build The Software of Tomorrow](https://www.wearedevelopers.com/magazine/120-how-we-build-the-software-of-tomorrow)
- [Dev Digest 137 - AI'm not sure about this](https://www.wearedevelopers.com/magazine/485-dev-digest-137-ai-m-not-sure-about-this)
- [Dev Digest 108 - Git off my cloud!](https://www.wearedevelopers.com/magazine/407-dev-digest-108-git-off-my-cloud)

## Related Jobs

- [AI Software Engineer (Germany)](https://www.wearedevelopers.com/jobs/48317-ai-software-engineer-germany) at **Sunhat**
- [Senior AI Developer](https://www.wearedevelopers.com/jobs/ext/2836034-senior-ai-developer) at **PwC**
- [Senior AI Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/2552851-senior-ai-frontend-engineer) at **TeamViewer Germany GmbH,**
- [Software Engineer - Video](https://www.wearedevelopers.com/jobs/ext/2600051-software-engineer-video) at **Twilio**
- [Senior AI/ML Engineer](https://www.wearedevelopers.com/jobs/48352-senior-ai-ml-engineer) at **PagerDuty**
- [AI Full Stack Engineer](https://www.wearedevelopers.com/jobs/ext/2731034-ai-full-stack-engineer) at **Almedia**