Back to portfolio
AI Chatbot logoConversational AI app

AI Chatbot

ChatGPT-style AI conversation app with a rich message workspace, markdown and code rendering, model switching, conversation library, and settings — built with Next.js and a mock-first AI provider.

Next.jsTypeScriptTailwind CSS v4AIChatZustand

The chatbot app is a standalone Next.js AI conversation product with a clean, dense workspace. The main chat surface combines a conversation sidebar, new-chat action, model selector, message thread with markdown and code rendering, a prompt composer with starter suggestions, and a stop-generation control. Previous conversations are accessible from the sidebar and the dedicated library route.

The app is mock-first by default — assistant responses run through typed mock logic that simulates AI reply behavior including streaming. A server-only OpenAI provider can be swapped in via environment variables, giving the project a clear path to real AI without changing the UI layer. Conversation history persists across page refreshes when the history setting is enabled.

Presentation

Mockups

Chatbot light theme — chat workspace with productivity conversation
Chatbot light theme — settings and conversation history
Chatbot dark theme — rich conversation workspace with code blocks
Chatbot dark theme — conversation library and model controls
Details

App presentation

Chat App

Conversation workspace, markdown and code rendering, model selector, library, and settings.

A Next.js App Router chatbot with a real-product feel. The main workspace shows a collapsible sidebar with a conversation list and new-chat button, a model selector, a message thread that renders markdown headings, lists, tables, blockquotes, and fenced code blocks with syntax highlighting, and a prompt composer with starter prompt suggestions. The library route provides a full conversation history view with search and pinned conversations. The settings route exposes default model, response style, and chat-history toggle. The app is built around Zustand for chat state, TanStack Query for async data, React Hook Form and Zod for the settings form, and a server-side AI provider abstraction that defaults to mock responses.

  • Rich message thread renders markdown headings, lists, tables, blockquotes, and syntax-highlighted code blocks.
  • Model selector lets users switch between demo models with different response styles.
  • Conversation sidebar with new-chat action, conversation list, pin support, and delete confirmation.
  • Library route with full conversation history, search, and quick-resume actions.
  • Settings form controls default model, response style, and history persistence via React Hook Form and Zod.
  • Mock AI provider simulates streaming responses; real OpenAI provider available via environment variable.

Chat Workspace

  • Main route `/` shows the full workspace: sidebar, model selector, message thread, and prompt composer.
  • Starter prompts guide new users into the first conversation without a blank-state experience.
  • Messages render full markdown including tables and fenced code blocks with copy actions.
  • Stop-generation control lets users interrupt a long response mid-stream.

Conversation Management

  • Each conversation is stored with title, model, timestamps, and pin state.
  • The sidebar lists recent and pinned conversations; clicking one resumes the thread.
  • Library route `/library` provides a searchable full-history view with metadata and quick actions.
  • Conversation history persists across refresh when the history setting is on.

Models And Settings

  • Model selector exposes demo models (Depth, Orbit, Swift) each with distinct mock response styles.
  • Settings route `/settings` uses a validated form for default model, response style, and history toggle.
  • The AI provider is abstracted server-side — mock logic by default, OpenAI-compatible when env vars are set.
  • Light, dark, and system theme modes are supported via a theme dialog.

Technical Notes

  • Next.js App Router with route groups for marketing, chat, library, settings, and API routes.
  • Zustand manages conversation and message state; TanStack Query handles async fetching.
  • API routes handle conversation CRUD and chat submission, keeping AI calls server-only.
  • Vitest test suite covers services, state logic, and component behavior.