TCHAIClass · V01.5 · Live Teaching Platform

Teach
Smarter.
Together.

A browser-based live classroom where the teacher pushes tools to every student in real time — and students get instant AI help from Claude, right inside the session.

Panel B → Select Tool Panel C → Push to Students AI Panel → Ask Claude Local WiFi · No Cloud Needed
▶ Get Started See How It Works
TCH · AI · CLASS
TEACHER
B
Tools
SELECT
C
Send
PUSH
D
Main Window
SHARED LIVE
E
Roster
STUDENTS
SERVER OK · SESSION XK7-29A · 4/5 STUDENTS
TCH · AI · CLASS
STUDENT
C
Tools
RECEIVED
D
Main Window
LIVE
E
React
✋ 👍
🤖
AI Help
NEW
CONNECTED · WHITEBOARD LIVE · AI ON
▼ SCROLL
ZONES Window Zone Map Where each panel is located — Teacher Console (left) · Student View (right) LAYOUT
TCH · AI · CLASS
TEACHER
A
Program Commands & Action Bar
TOP BAR
B
Teacher
Tools
TOOLS
C
Send to
Students
SEND
D
Main Window
Shared with Students
ACTIVE TOOL
E
Student
Roster
ROSTER
F
Status Bar · Server · Session · Students · Sync
▲ Teacher Console — 6 Zones
TCH · AI · CLASS
STUDENT
A
Program Commands & Session Info
TOP BAR
C
Tools from
Teacher
RECEIVED
D
Main Window
Live from Teacher
ACTIVE TOOL
E
Partici-
pation
✋ 👍 ❓
🤖
AI Help
NEW V01.5
F
Status Bar · Connection · Session · Tool · Time
▲ Student View — 5 Zones + AI Panel
A — Program Commands
B — Teacher Tools (teacher only)
C — Send / Receive Tools
D — Main Window (shared live)
E — Roster / Participation
🤖 — AI Help Panel (student, new V01.5)
F — Status Bar
SLIDE 01 Platform Overview Two synchronized windows — Teacher Console and Student View V01.5
TCH · AI · CLASS
TEACHER
A
Program
Commands
Session info
Theme · Clock
TOP BAR
B
Teacher
Tools
HTML · Python
Math · More
SELECT
C
Send to
Students
Push · Share
Broadcast
PUSH
D
Main Window
Active tool view
Shared live with students
SHARED WITH STUDENTS
E
Student
Roster
Active · Away
Hand raised · 🤖
ROSTER
SERVER OK
SESSION XK7-29A
4 / 5 STUDENTS
F — STATUS BAR
TCH · AI · CLASS
STUDENT
A
Program
Commands
Session info
Name · Key
TOP BAR
C
Tools from
Teacher
Pushed tools
My Notes
FROM TEACHER
D
Main Window
Tool loaded automatically
when teacher pushes
LIVE FROM TEACHER
E
Partici-
pation
✋ Hand
👍 React · Q&A
PARTICIPATE
🤖
AI Help
Fix · Add
Explain
NEW V01.5
CONNECTED
SESSION XK7-29A
WHITEBOARD LIVE · AI ON
F — STATUS BAR
A — Commands
B — Tools (Teacher only)
C — Send / Receive
D — Main Window (shared)
E — Roster / Participation
🤖 AI Help (new V01.5)
F — Status Bar
SLIDE 02 Panel Descriptions What each zone does — Teacher Console and Student View A · B · C · D · E · F
Teacher Console
  • A
    Program Commands & Action Bar
    Top bar across the full width. Shows the session key, course name, teacher name, theme toggle (dark / light), and live clock. Action buttons for Tool Window, Session, Q&A, and Event Log tabs sit here.
  • B
    Teacher Tools (teacher only)
    Left column — the tool library. Tools are grouped by category: HTML (Whiteboard, Chess, Slides), Python (Code Runner), Math (Calculator). Click a category to expand it, then click a tool to select it. The tool previews instantly in Panel D.
  • C
    Send to Students
    Left column below B. Shows a preview of the selected tool and the Push to All Students button. Also contains Broadcast Message, and End Session. One click sends the active tool to every connected student simultaneously.
  • D
    Main Window (shared live)
    The large centre area. Displays the active tool — Whiteboard, Chess board, Slides, or Code Runner. Whatever the teacher loads here is simultaneously pushed to all Student Panel D windows in real time over WebSocket.
  • E
    Student Roster
    Right column. Lists every student with their connection status — Active (green dot), Away (grey dot), or Hand Raised (amber blink). A 🤖 badge appears next to any student who has used AI Help. Includes Get Attention and Mute All buttons.
  • F
    Status Bar
    Bottom bar. Displays server status, active session key, student count (connected / total), sync indicator, and the active tool name. Green dots pulse when live; amber for partial connections.
Student View
  • A
    Program Commands & Session Info
    Top bar. Displays the student's name, session join key, course and class name, theme toggle, and live clock. Tab buttons for Tool Window and Q&A sit here. The active tool name is shown when a tool is live.
  • C
    Tools from Teacher (no Panel B)
    Left column. Shows tools that the teacher has pushed during this session. Students click a card to open that tool in Panel D. Also contains a private My Notes text area — notes are only visible to the student.
  • D
    Main Window (live from teacher)
    The large centre area. Loads automatically when the teacher pushes a tool — a green ● LIVE FROM TEACHER badge confirms the connection. Students can interact with the tool (draw on whiteboard, move chess pieces) within the same session.
  • E
    Participation
    Right column. Contains Raise Hand (notifies teacher with an amber badge), reaction buttons (👍 ❓ 🔄 ✅), session progress bar, elapsed time, and the Messages panel where teacher broadcasts appear.
  • 🤖
    AI Help Panel — NEW in V01.5
    Far right column, student only. Three modes: 🐛 Fix (paste broken code — Claude finds and explains the bug), ✚ Add (describe a feature to implement), ❓ Explain (get a plain-language explanation). Answers stream back in seconds. Teacher is notified and sees a 🤖 badge in the roster.
  • F
    Status Bar
    Bottom bar. Shows connection status, session key, active tool name, elapsed session time, and whether AI Help is enabled on the server. Green dots indicate live connection; a missing dot means reconnecting.
SLIDE 03 Step 2 — Teacher Pushes Tool to Students Panel C: Push to All Students → tool loads in every Student Panel D PANEL C → D
2
Teacher clicks
Push to All Students in Panel C
TCH · AI · CLASS — TEACHER
TEACHER
B
Tools
✏ Whiteboard ✓
C
SEND TO STUDENTS
Selected:
✏ Whiteboard

⬆ PUSH ALL ◀
D
Whiteboard (teacher)
E
Roster
AR · SK
DM · LF
WHITEBOARD PUSHED
PUSH
WebSocket
→
Student Panel D loads
the tool automatically
TCH · AI · CLASS — STUDENT
STUDENT
C
Tools from Teacher
✏ Whiteboard
← NEW!
D
LIVE FROM TEACHER
Whiteboard loaded
E
Participate
✋
👍
❓
🤖
AI Help
Fix/Add/
Explain
CONNECTED · WHITEBOARD LIVE
SLIDE 04 Step 3 — Student Asks AI for Help AI Panel: Fix / Add / Explain → Claude answers in seconds AI PANEL · NEW
3
Teacher sees 🤖 badge
in Roster Panel E
Roster — Panel E
AR
Ali Reza
Active
🤖 AI
SK
Sara K.
Active
DM
Darius M.
Active
🤖 AI
LF
Leila F.
Active
2 STUDENTS USED AI HELP
↗ Teacher notified instantly when a student asks Claude — name, mode, and question preview appear in Event Log
🤖
AI Help Panel — Student View
● ON
🐛 Fix
Paste broken code — Claude finds and fixes the bug
✚ Add
Paste code + describe a feature to add
❓ Explain
Paste code or a concept — get a plain explanation
Student's code (pasted):
for i in range(10)
    print(i
            ← missing )
🤖 Claude — 09:16:42
You are missing a closing parenthesis on line 2.
The fix: print(i) — add the closing )

Python requires every opening ( to have a matching closing ).
You're doing great — this is a very common beginner mistake! 🎉
SLIDE 05 Complete Workflow Summary Teacher → Panel B → Panel C → Student Panel D → AI Help → Teacher Panel E 6 STEPS
1
📂
Teacher
Panel B
Selects tool from the library
2
⬆️
Teacher
Panel C
Clicks Push to All Students
3
📡
Server
Sync
WebSocket broadcasts to all
4
🖥️
Student
Panel D
Tool loads automatically
5
🤖
Student
AI Panel
Ask Claude for help
6
👨‍🏫
Teacher
Panel E
Sees 🤖 badge in roster
⚡
Real-time sync
WebSocket — instant push over local WiFi, no delay
🔑
Join by key
Students enter a 6-character key to join any session
🤖
AI powered
Claude via Anthropic API — key stored in local .env file
📋
Session log
All events and AI chats auto-saved to sessions/logs/
Built with Flask · Flask-SocketIO · Anthropic API · Python 3 · Local WiFi V01.5
Ready to run your first session?

Start Teaching
with TCHAIClass

Three commands in Terminal and your classroom is live. Students join from any device on the same WiFi — no accounts, no installs, no cloud.

01
Install packages
Run once in Terminal
pip install flask flask-socketio
anthropic python-dotenv
--break-system-packages
02
Add your API key
Copy .env.template → .env
ANTHROPIC_API_KEY=
sk-ant-your-key-here

Get key: console.anthropic.com
03
Start the server
Open Terminal, run:
cd .../TchAIClass/Development
python3 server.py

Open: localhost:5000/teacher
← View Platform Overview 📋 Step-by-Step Guide ↑ Back to Top
TCHAIClass V01.5 · Local WiFi Mode · tchai class.com · Built by Yahya Nazar · CTRLDesigner.com  ·  Steps.html