Skip to content

Systems & architecture

AI engineering for web developers

From a streaming chat UI and RAG that answers correctly to MCP servers for agents and LLM app security — what a web developer needs to ship AI features to production.

4 parts86 min readUpdated Oct 24, 2026

Parts

  1. Part 1

    Building a Streaming AI Chat UI That Stays Smooth: SSE, ReadableStream, Incremental Markdown and a Stop Button

    The frontend half that AI chat tutorials tend to skip: picking a transport, parsing SSE by hand when events are split across chunks, a Route Handler that keeps the API key safe and propagates cancellation upstream, message-parts state, batching renders with requestAnimationFrame, safe incremental markdown, autoscroll, accessibility and error handling.

    19 min

  2. Part 2

    RAG That Actually Answers Correctly: Chunking, Hybrid Search with pgvector, Reranking and Evaluation

    Anyone can build a RAG demo in an afternoon; making it answer correctly is the hard part. This post walks through a TypeScript RAG pipeline on PostgreSQL/pgvector: structure-aware chunking, hybrid search fused with RRF in a single SQL query, reranking, filtering by permission before ranking, citations, and how to measure quality with numbers.

    25 min

  3. Part 3

    Model Context Protocol in Practice: Building a Production MCP Server in TypeScript

    MCP isn't magic, it's a well-designed JSON-RPC protocol. This post explains hosts, clients, servers, primitives and transports as of the 2026-07-28 spec, then builds a read-only TypeScript server over order data: tool design, pagination, testing with the Inspector, OAuth for remote servers, and the security holes you need to close.

    19 min

  4. Part 4

    LLM and Agent Application Security: Prompt Injection, Excessive Agency and the OWASP Top 10 for LLMs

    A practical threat model for applications that put an LLM between tools and private data: direct and indirect prompt injection, the lethal trifecta, and the design patterns that keep the damage contained, mapped against the OWASP Top 10 for LLM Applications.

    23 min

Series review

0/8 answered · 0 correct

8 questions drawn from the parts of this series. Answers here count toward each post's own quiz.

  1. Question 1 of 8StarterWhat does streaming an LLM response actually improve for the user?
  2. Question 2 of 8IntermediateWhy does the author choose POST + fetch streaming over EventSource for an LLM chat?
  3. Question 3 of 8IntermediateA company has about 3 million tokens of documents, each user group may see a different subset, and answers must cite sources. The model's context window is 1 million tokens. Which approach fits?
  4. Question 4 of 8IntermediateA user asks "how do I fix error VPN-403", but vector search returns the VPN installation guide, while the passage containing the exact string VPN-403 sits at rank 12. What is the most sensible fix?
  5. Question 5 of 8IntermediateYou want an MCP order-lookup server to be genuinely read-only. Where should the "read-only" boundary live to be most trustworthy?
  6. Question 6 of 8AdvancedA remote MCP server (Streamable HTTP) receives an access token from a client. How should the server treat it according to the spec?
  7. Question 7 of 8IntermediateYour team proposes a prompt-injection classifier with 95% accuracy and treats it as the security boundary. Why is that not enough?
  8. Question 8 of 8IntermediateAn agent reads customer emails (untrusted), accesses private order data and can issue refunds. According to the lethal trifecta / Rule of Two, what should you do first?

Other series

Series