Appendix F. Generating with AI
This chapter covers
- Using AI tools to generate web component code
- Using AI tools to consume web component code
- Comparing the generated code
AI is everywhere. It’s fundamentally changed how software engineers work, and turned novices into full-time coders in months instead of years via methods like vibe coding. Most importantly, it’s not going away.
Now it’s our turn to jump on the bandwagon. We’ll explore how effective AI tools are at generating web component code and applications that use web components by comparing hand-written code to AI-generated code for vanilla, Lit, Stencil, FAST, and wrec components.
Note
For in-depth discussions of topics like LLM prompting, context windows, and agentic coding workflows, see AI Agents in Action, Second Edition.
There are many AI tools available, and they are improving rapidly. All the examples here use Codex with the GPT-5.4 model, with reasoning set to Medium.
Think of this generated code as the worst case scenario. It’s pretty good now, and will only get better as the tools improve. Also, if there’s something in the generated code that you don’t like, it’s easy to get the tools to improve it with follow-up prompts.
To compare the generated results, we need a component that is easy to understand, but still includes state and interaction.
Note
All the hand-written and generated code for this chapter can be found in the web-component-book-code GitHub repository.