Using Claude Code for Web to Build a Share Terminal Sessions Tool
A tutorial by Simon Willison. Featured in the OTF curated resource library.
Project Overview
The project: a web app that lets developers share their terminal sessions in real-time. Think Google Docs, but for terminal output. One developer runs commands, and collaborators see the output live — useful for pair programming, debugging sessions, and teaching.
Why this project: It's complex enough to test Claude Code's capabilities across multiple domains (WebSockets, terminal emulation, authentication, real-time sync) but scoped enough to build in a single session.
The twist: This entire app was built using Claude Code's web interface — no local IDE, no terminal on the developer's machine. Everything happened through the browser-based Claude Code environment.
Building with Claude Code for Web
The step-by-step process of building the terminal sharing tool.
Project scaffolding
Started by describing the project to Claude Code: 'Build a terminal session sharing app with React frontend, Node.js backend, WebSocket for real-time updates, and xterm.js for terminal rendering.' Claude Code generated the project structure, package.json, and initial boilerplate.
Terminal emulation layer
Asked Claude Code to implement the xterm.js integration with proper ANSI code handling, resize support, and scroll-back buffer. The web interface made it easy to iterate — describing adjustments and seeing the terminal render update in the preview.
Real-time WebSocket layer
Claude Code built the WebSocket server and client. Each terminal session gets a unique room. Hosts broadcast their terminal output; viewers receive and render it. The implementation included reconnection logic and buffered playback for late joiners.
Authentication and sharing
Added user authentication and shareable session links. Each session gets a unique URL. The host controls who can view (public or invite-only). Claude Code handled the auth flow, session management, and permission checking.
Building Core Features
Live Terminal Mirroring
The core feature: real-time terminal output streaming from host to viewers. Built with WebSockets and xterm.js, with sub-100ms latency on most connections. Viewers see exactly what the host sees, including colors and formatting.
Session Recording
Every session is automatically recorded with timestamps. Viewers who join late can replay the session from the beginning or jump to live. Recordings are stored as efficient event logs, not screen captures.
Collaborative Annotations
Viewers can highlight terminal output and leave comments — visible to all participants. Useful for code reviews and debugging sessions where you want to point at specific output.
Embeddable Widget
Sessions can be embedded in documentation, blog posts, or tutorials via an iframe. The embedded view is read-only and adapts to the container width.
Lessons Learned
Claude Code for Web is viable for real projects. The browser-based environment handled this non-trivial app without issues. The preview pane was especially useful for iterating on the terminal rendering.
Be specific about real-time requirements. Claude Code's first WebSocket implementation was basic. Asking specifically for 'reconnection logic, message buffering for late joiners, and heartbeat pings' produced a much more robust implementation.
Terminal emulation is tricky. ANSI escape codes, Unicode support, and cursor positioning have edge cases that Claude Code didn't handle perfectly on the first pass. Providing specific failing examples ('this ANSI sequence renders incorrectly: [specific code]') got fast fixes.
The web interface excels for iterative work. Describe → preview → adjust is faster in the browser than in a local IDE for this type of visual, interactive project. You see results immediately without switching windows.