Command Palette

Search for a command to run...

Hectal
Phase 0Beginner1 of 16 in AI Frontend

Start Here: AI Features Through a Frontend Developer's Eyes

What a language model looks like from the browser: slow, streamed, sometimes wrong. The three hops of every AI feature, and your first streamed answer.

This phase assumes you know some JavaScript and a little React, and nothing about AI. You will not train a model or study how one works inside. You will learn what a model looks like from the browser: a service that takes text, answers slowly, answers in pieces, costs money per word, and is sometimes wrong without saying so.

Those four facts decide almost everything about the screens you build. You'll see where an AI request really goes (browser, your server, the model provider), why the secret key never reaches the browser, and how to show an answer while it is still arriving.

Every example runs real browser code against a scripted stand-in model inside the page, so it works with no account and no key, and prints the same thing every time. By the end you'll have built the first version of Mitra, the shop assistant this course grows phase by phase.

0/5 · 0%
5 topics ~2 h 14 code blocks & diagrams
Start with the first topic
1
0.1

What an AI Feature Is

An AI feature sends text to a language model and shows the text that comes back. For the frontend, a model is a service that is slow, answers in small pieces, can answer differently each time, can be wrong without any error, and charges for every word.

24 min 4 code practice

2
0.2

The Anatomy of an AI Feature

Every AI feature has three hops: the browser asks your server, your server asks the model provider with a secret key, and the answer travels back the same way. The key, the instructions and the checks live on your server, never in the browser.

25 min 3 code practice

3
0.3

How This Course's Live Editor Works

The live editor has no server, no network and no API key, so it runs the server part inside the page with serve() and replaces the model with a scripted stand-in. The browser code you write and read is real; only the model's words are scripted.

24 min 3 code practice

4
0.4

Your First Streamed Answer

A streamed answer is shown by reading the response body piece by piece and adding each piece to the screen. A request moves through four states (idle, waiting, streaming, done) plus failure, and the screen must show every one of them.

24 min 2 code practice

5
0.5

Build: Mitra v0

The first version of Mitra, the shop assistant this course builds: one question box, one streamed answer, a button that is disabled while an answer runs, and a clear message when something fails.

26 min 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Show the Answer

The route /api/chat is ready and answers with JSON in the usual chat shape. When the button #ask is clicked, send a POST to /api/chat and put the model's reply into the paragraph #answer.

Beginner
2

Stream Into the Page

The route /api/ask streams its answer piece by piece. When #ask is clicked, read the stream and add each piece to #answer as it arrives.

Beginner
3

Check the Status Before You Read

This route is busy the first time: it answers 429. The second time it answers normally. Right now the page shows the server's raw error JSON as if it were the answer.

Beginner
4

Keep the Partial Answer

This route sends two pieces of the answer and then the connection drops. The current code loses everything and fails with an uncaught error.

Beginner
5

Mini Mitra

Build a small Mitra in React. The route /api/chat is ready: it streams an answer to { question }, and it crashes (status 500) if the question contains the word crash.

Intermediate