Zhenyang Tang

Implemented Lab

<- Back to labs

AI Model Console

A full-stack architecture lab for model request workflows, request history, and usage visibility.

Summary

Status

Implemented

Stack

Next.js, TypeScript, React Query, FastAPI, Pydantic

Focus

Model request workflows, server state, API contracts

Access

Internal demo

Overview

AI Model Console focuses on the product system around model calls: model selection, prompt execution, request metadata, history, usage summary, and API contracts.

Architecture highlights

  • React Query manages server-owned data such as models, request history, request detail, and usage summary.
  • Page components compose feature hooks instead of calling API functions directly.
  • Prompt submission is modeled as a mutation that invalidates history and usage queries.

State ownership

The project separates server-owned data, local UI state, and backend-derived metadata.

Server-owned data

Models, request history, request detail, and usage summary.

Client UI state

Selected model, prompt draft, active request id, and drawer open/closed state.

Backend-owned derived data

Request status, latency, token estimates, estimated cost, and usage summary.

Mutation invalidation

Prompt submission invalidates history and usage summary instead of duplicating local state.

Screenshots

Main console overview
Model request workflow with usage summary and request history.
Request detail drawer
Request detail drawer with prompt, output, latency, token usage, and estimated cost.

Server-state update

Prompt submission is a mutation. After success, related server-state queries are invalidated instead of manually syncing duplicated local state. 

onSuccess: () => {
  queryClient.invalidateQueries({ queryKey: ['history'] });
  queryClient.invalidateQueries({ queryKey: ['usageSummary'] });
}

Trade-offs

  • Mock execution instead of real model calls, so the lab can focus on request lifecycle and API contracts.
  • React Query instead of Redux or thunk logic, because the main complexity is server-owned data.
  • No global client store was added because the remaining client state is local and small.