News · New this week

ChatGPT in Chrome with 12 tabs: a system design walkthrough

The interview version of the design. Pick tabs, chunk, embed, take the top-k chunks, then answer with sources.

Riya has 12 tabs open and asks ChatGPT which battery wins. An interviewer then asks you to design an app like ChatGPT in Chrome. This is the standard interview design for that question. It isn't how any company's own system is built.

Why pasting every tab fails

The first answer most people give is to paste the text of all 12 tabs into the model. Reject that one. A model reads only a limited amount of text in one go, and that is the input limit. Pasting everything ignores it.

A friend might assume the AI reads every tab word for word. It doesn't. The design avoids that on purpose.

What we actually need is simple. Only the tabs the user chose should be used, and the answer should show its sources.

The pipeline, step by step

Tab picker. The user chooses which tabs go in. Because you choose, your privacy stays intact. Tabs you didn't allow never enter the flow.

Chunker. The text of each chosen tab is cut into small chunks, and every chunk carries the URL of its tab. Small pieces are easier to find than whole pages. The URL keeps each chunk tied to its tab.

Embedder. The question and every chunk are turned into lists of numbers. That is an embedding. Text with the same meaning ends up with numbers that sit close together.

Vector index. The index picks the chunks closest in meaning to the question. That is top-k, and in the reel k is five. Sending every chunk would cross the model's limit and push cost up, so only the top-k go forward.

LLM. The model that writes the answer receives the question and those chunks, along with the tab sources. It answers from that material.

So the whole thing runs as: pick tabs, chunk, embed, take top-k, answer.

What breaks first at peak

Under load, the embedder goes first. Embedding 12 long pages is slow, and the status line in the reel says exactly that. The fix is to embed all the tabs in parallel, so one slow page doesn't hold up the rest.

That is a good detail to volunteer in an interview. Naming the first bottleneck and a fix shows you've thought about the system running, not only drawn.

What to try

Next time you get this question, walk the five steps out loud and say why each one exists. Then answer the reel's closing question for yourself. Would you send all the tabs, or only the top-k chunks? You now have the reasons for picking the second.

  • #systemdesign
  • #rag
  • #embeddings
  • #chatgpt

More reels

All news →