React Runs Your Terminal: Let’s Build One Live
summary
Live-codes a working terminal React app from an empty index.tsx using Ink renderer and Yoga flexbox, wiring useState/useEffect/useInput to fetch six AI models (OpenAI/Vercel/Claude) and stream responses via a Vercel SDK wrapper. Builds a Troll Code AI CLI with model dropdown, text input + onSubmit, spinner, and a real file picker that reads the filesystem and attaches files. Shows performance fixes (millions of per-frame objects → Int32 arrays + double buffers) to push ~30fps to 60fps and confirms the demo streams and file upload flow working.
AI-written summary · about
chapters (6)
- 0:00Introduction and setup
- 6:36Building a terminal React app
- 18:52Implementing chat functionality
- 26:33File attachments and demo
- 28:22Performance optimizations in Ink
- 30:57Summary and closing
related talks
05mReact for Command-Line Interfaces! (feat. Ink)
28mWriting command-line interfaces (CLIs) with React. Wait, what? Yeah!
33mMaking The Terminal Great Again
17mReact Server Components in AI Applications
27mReact: Learn Once Write Anywhere
29mEvolving the Visual Programming Environment with React
22mTweak your page in real time, without leaving the comfort of your editor
38mReact as a Developer Health Tool