Recipe: Multi-model chat UI
Build a TypingMind-style interface where users switch between Claude, GPT-4o, and Gemini in a single chat thread.
Overview
This recipe wires Meridian's unified chat endpoint to a model-selector dropdown. Messages route to the chosen provider while preserving conversation context in a shared thread.
Prerequisites
- • Meridian API key with chat scope
- • Next.js 14 App Router project
- • Tailwind CSS configured
Step 1 — Model selector
Create a dropdown with model IDs. Meridian accepts claude-sonnet-4-20250514, gpt-4o, and gemini-2.5-pro. Store the active model in state.
Step 2 — Chat endpoint
POST to /v1/chat/completions with the selected model and the full message array. Meridian returns standard OpenAI-format streaming chunks.
Step 3 — Thread persistence
Accumulate assistant responses in a messages array. When the user switches models mid-thread, append the new system prompt and continue. Each model sees the full history.
Pro tip
Tag each message with its originating model so the UI can render per-model avatars and color accents.