# frontend Projects at AI Tinkerers

> Canonical HTML: https://aitinkerers.org/technologies/frontend
> Markdown URL: https://aitinkerers.org/technologies/frontend.md
> Technology record last updated: 2026-02-24T00:24:28Z
> Generated: 2026-09-23T06:38:48Z

Frontend is the client-side development layer: it builds the visible, interactive user interface (UI) using the core web stack—HTML, CSS, and JavaScript.

This is where the user experience (UX) is engineered: we translate design assets into functional, high-performance web applications. Core technologies—HTML for structure, CSS for 90%+ of styling, and JavaScript for complex interactivity—are non-negotiable standards. Modern development leverages frameworks like React, Vue.js, or Angular to manage state and component architecture efficiently, often handling 100+ components in a single-page application (SPA). We use build tools (e.g., Webpack, Vite) to bundle and optimize code, ensuring sub-2-second load times and 60 FPS (frames per second) rendering for a smooth, responsive interface across all devices.

- Official technology site: https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_development
- Public AI Tinkerers demos and talks: 6
- Result page: 1 of 1

## Recent Public Talks and Demos

### [Training a small world model into a superhuman player at competitive pokemon](https://toronto.aitinkerers.org/talks/rsvp_UxzGmf_2Ipo)

World models are the hot new "it" in AI, and I will demo a simple world model capable of superman performance in 1v1 competitive pokemon play in pokemon showdown. I will walk over the following points 1) what is competitive pokemon and why is it harder than Go. I will explain why pokemon team selection is the largest factor in success, followed by strategic pokemon switches. 2) the world model encoder, predictor and decoder architecture and training pipeline. A deeper analysis will go over some of the training logs in weights and biases, the tokenizer and embedding interpretability 3) The world model bot will be available for players to challenge on pokemonshowdown.com

- Event context: AI Tinkerers Toronto - June 2026 - with Relay Financial x PostHog — 2026-06-30 — Toronto
- Public talk page: https://toronto.aitinkerers.org/talks/rsvp_UxzGmf_2Ipo

### [Building an AI publishing platform with an AI dev squad](https://tokyo.aitinkerers.org/talks/rsvp_CzSJETAJ9-4)

CloudAuthor — a full-stack AI authoring platform, 14 agents, 27 skills, 300+ tests, built in 2 months on .NET Aspire and TypeScript/Vite. Live demo in two halves. First, I'll run the end-to-end publishing pipeline through CloudAuthor's agents: ideation → research → quote-finding → drafting → editing → banner creation → Japanese translation → carousel generation. Each stage is a specialized agent handing off to the next, all streaming in front of you. Then I'll switch to Visual Studio Code and show the squad of 7 specialized coding agents I actually use to build CloudAuthor itself — the agents that wrote the agents.

- Event context: AI Tinkerers Tokyo - Shinagawa: May 26th Meetup — 2026-05-26 — Tokyo
- Public talk page: https://tokyo.aitinkerers.org/talks/rsvp_CzSJETAJ9-4

### [Revolutionalizing audiobooks with AI](https://dubai.aitinkerers.org/talks/rsvp_WNyvbI0-h8Q)

75000+ Audiobooks narrated to you through the power of AI. Will start with completely explaining the product along with a working demo of the app. A user chosen book (from the 75000+) book catalogue being narrated live with AI.

- Event context: AI Tinkerers Dubai - May Demo Day — 2026-05-23 — Dubai
- Public talk page: https://dubai.aitinkerers.org/talks/rsvp_WNyvbI0-h8Q

### [Claude in the Channel: Building an Autonomous Frontend Agent for No-Code Teams](https://tokyo.aitinkerers.org/talks/rsvp_ILK68XIsX3A)

I’ll demonstrate how I turned a Slack channel into a functional "Frontend Desk" where designers and admin staff ship production code without touching an IDE, or having to pay for a no-code platform or a content delivery network (CDN). The system connects a Slack bot to a Claude-powered agent sitting on a server with a live clone of our React/Vite/Tailwind repository. I’ll walk through the technical plumbing that allows the bot to: * Ingest design specs and SVGs directly from Slack threads. * Contextualize those assets within a complex codebase to perform precise UI updates. * Trigger a password-protected staging environment for instant visual feedback. * Execute a `/approve` flow that handles the merging and deployment to GitHub Pages.

- Event context: AI Tinkerers Tokyo - Toranomon Meetup - February 19, 2026 — 2026-02-19 — Tokyo
- Public talk page: https://tokyo.aitinkerers.org/talks/rsvp_ILK68XIsX3A

### [EmergentDB: How Evolutionary Algorithms Made My Vector Database 82x Faster](https://singapore.aitinkerers.org/talks/rsvp_hHLd9-vXn8A)

Vector databases power semantic search, RAG, and recommendation systems—but tuning them is a nightmare. Should HNSW use M=8 or M=32? What's the right ef_construction value? Most teams guess and pray. EmergentDB solves this through evolutionary computation. Instead of manual tuning, it uses the MAP-Elites algorithm to evolve the optimal index configuration for your specific workload. The system maintains a "quality-diversity grid" that explores the trade-off space between recall, latency, and memory—automatically selecting between HNSW, Flat, and IVF indices with evolved hyperparameters.

- Event context: AI Tinkerers - The Age of AI & Infrastructure (Singapore) — 2026-02-11 — Singapore
- Public talk page: https://singapore.aitinkerers.org/talks/rsvp_hHLd9-vXn8A

### [AI powered component streaming with structured outputs](https://nyc.aitinkerers.org/talks/rsvp_xkAbUm8_k40)

A demonstration on how to get more deterministic values out of LLMs and use the output shape to stream dynamic components in your frontend

- Event context: AI Tinkerers NYC March 2024 Meetup — 2024-03-27 — New York City
- Public talk page: https://nyc.aitinkerers.org/talks/rsvp_xkAbUm8_k40

## Related Technologies

- [Vite](https://aitinkerers.org/technologies/vite) ([Markdown](https://aitinkerers.org/technologies/vite.md)) — 17 public demos
- [ARM NEON](https://aitinkerers.org/technologies/arm-neon) ([Markdown](https://aitinkerers.org/technologies/arm-neon.md)) — 1 public demo
- [Backend](https://aitinkerers.org/technologies/backend) ([Markdown](https://aitinkerers.org/technologies/backend.md)) — 7 public demos
- [chat bot](https://aitinkerers.org/technologies/chat-bot) ([Markdown](https://aitinkerers.org/technologies/chat-bot.md)) — 1 public demo
- [Claude](https://aitinkerers.org/technologies/claude) ([Markdown](https://aitinkerers.org/technologies/claude.md)) — 174 public demos
- [Claude API](https://aitinkerers.org/technologies/claude-api) ([Markdown](https://aitinkerers.org/technologies/claude-api.md)) — 21 public demos
- [Claude Code](https://aitinkerers.org/technologies/claude-code) ([Markdown](https://aitinkerers.org/technologies/claude-code.md)) — 216 public demos
- [Cloudflare](https://aitinkerers.org/technologies/cloudflare) ([Markdown](https://aitinkerers.org/technologies/cloudflare.md)) — 17 public demos
- [DOM](https://aitinkerers.org/technologies/dom) ([Markdown](https://aitinkerers.org/technologies/dom.md)) — 1 public demo
- [EmergentDB](https://aitinkerers.org/technologies/map-elites-evolutionary-algorithm-index-types-hnsw) ([Markdown](https://aitinkerers.org/technologies/map-elites-evolutionary-algorithm-index-types-hnsw.md)) — 1 public demo
- [Flat (brute-force)](https://aitinkerers.org/technologies/flat-brute-force) ([Markdown](https://aitinkerers.org/technologies/flat-brute-force.md)) — 1 public demo
- [GPT-5](https://aitinkerers.org/technologies/gpt-5) ([Markdown](https://aitinkerers.org/technologies/gpt-5.md)) — 30 public demos
- [HNSW](https://aitinkerers.org/technologies/hnsw) ([Markdown](https://aitinkerers.org/technologies/hnsw.md)) — 7 public demos
- [IVF](https://aitinkerers.org/technologies/ivf) ([Markdown](https://aitinkerers.org/technologies/ivf.md)) — 1 public demo
- [Library](https://aitinkerers.org/technologies/library) ([Markdown](https://aitinkerers.org/technologies/library.md)) — 4 public demos
- [LLMs](https://aitinkerers.org/technologies/llms) ([Markdown](https://aitinkerers.org/technologies/llms.md)) — 83 public demos
- [LZ4](https://aitinkerers.org/technologies/lz4) ([Markdown](https://aitinkerers.org/technologies/lz4.md)) — 1 public demo
- [MAP-Elites](https://aitinkerers.org/technologies/map-elites) ([Markdown](https://aitinkerers.org/technologies/map-elites.md)) — 2 public demos