Song Siwattanasombat

Loading portfolio

Back to projects

A hybrid chat prototype for five days of sample school café menus, combining exact price filtering with streamed local-model responses.

  • Next.js 15
  • React 19
  • TypeScript
  • App Router
  • Route Handlers
  • Ollama
  • Web Streams
  • CSS
  • Vercel

School Café Assistant AI is an educational chat prototype for exploring a fixed five-day menu. It answers supported budget questions from typed data and streams other menu, ingredient, and allergen questions through a configurable local Ollama model.

Students and staff may need a quick answer about a day, price, ingredient, or allergen without scanning a full menu.

  • The dataset covers 7–11 September 2026 only.
  • Items include Hot Food or Cold Food categories, prices, ingredients, and listed allergens.
  • The interface returns short answers and must not imply access to menus outside the dataset.
  • This unaffiliated educational prototype provides sample allergen information, not medical or food-safety advice.

From Menu Data to Chat Prototype

  1. 1Define the Five-Day Menu and Scope
  2. 2Model Days, Categories, Prices, and Allergens
  3. 3Design the Chat Interface
  4. 4Create the Next.js Chat Route
  5. 5Add Exact Price Filtering
  6. 6Connect and Stream Ollama Responses
  7. 7Handle Loading, Errors, and Reset

The workflow moved from typed menu data and interface design to exact filtering, local-model streaming, and error handling.

Question to Streaming Answer

Choose a weekday prompt or type a question
Valid message and not already loading?

No

Keep the current conversation unchanged

Yes

Add the user message and empty assistant bubble
Next.js /api/chat route
Supported budget query?

Yes

Generate an exact answer from menu data

No

Stream the conversation through Ollama
Decode chunks and append assistant text
Render the answer and scroll to the newest message

Users select a weekday prompt or write a question; the answer streams into one visible assistant message.

The frontend and chat route share one small, typed application.

  • Next.js 15 App Router keeps the single page and server route in one repository.
  • React 19 handles messages, input, loading, modal state, and scrolling without a global store.
  • TypeScript makes message, request, menu, and item contracts explicit.
  • Custom CSS provides the responsive visual design, focus states, and reduced-motion support.

Exact application logic handles supported queries before the local model is used.

  • Ollama supports local experimentation without cloud credentials or per-request fees.
  • OLLAMA_BASE_URL and OLLAMA_MODEL keep the host and model configurable.
  • The Web Streams API progressively forwards Ollama's newline-delimited JSON.
  • A local price filter returns exact typed-data results for supported budget questions.

Hybrid Chat Architecture

User Browser
React Chat InterfaceMessages · composer · modal
Next.js Route HandlerPOST /api/chat · Node.js runtime

Deterministic Path

Price Pattern ParserInclusive or strict comparison
Typed Menu DataDays · items · prices · allergens
Local JSON-Line Response

Model Path

Ollama Chat APIConfigurable URL + model
Local Language ModelCPU-compatible development setup
Streaming Response Body

Both paths return newline-delimited JSON that the browser decodes into the active assistant message.

The React interface calls a Next.js route connected to typed menu data, exact filtering, and Ollama streaming.

Deterministic First, Model Second

Read the latest user message
Contains a supported price phrase?

No

Forward the conversation to Ollama

Yes

Extract the amount and comparison type
Day or 7–11 September date found?

No

Ask the user to specify a day or date

Yes

Load the matching daily menu
Apply at-or-below or strictly-under comparison
Group matches into Hot Food and Cold Food
Return prices and listed allergens as a local stream

A supported price phrase plus a day or date triggers exact filtering; every other request goes to Ollama.

The interface keeps chat behaviour simple and makes the prototype's scope visible.

  • Weekday shortcuts reduce typing; Enter sends and Shift+Enter adds a line.
  • Loading prevents duplicate sends, while typing and reset states provide feedback.
  • The About dialog, focus styles, keyboard controls, and reduced-motion support improve accessibility.
  • Visible dates and disclaimers communicate the fixed, educational scope.

The prototype still needs broader data, stricter grounding, automated tests, and production safeguards.

  • Replace the hard-coded menu with an authorised CMS, database, or school-managed feed.
  • Ground Ollama with a dedicated system prompt; local CPU responses may still be slow or inconsistent.
  • Extend exact intent handling beyond price to allergens, ingredients, preferences, and availability.
  • Add route and streaming tests, then production rate limits, logging, validation, and a reachable model service.