Chat Bots

Pattern

Chat-Base Clone

A comprehensive Chatbase clone demo with widget interface, model selection, web search integration, and human-in-the-loop tool approval workflows.

IntermediateNov 2025View the full pattern on desktop
Chat-Base Clone preview

Problems solved

  • Ship a Chatbase-style embeddable chat widget shell
  • Switch models through an AI Gateway router
  • Enable web search with sources and reasoning in the stream
  • Gate tools behind human-in-the-loop approval

Use cases

  • Support widgets for marketing sites
  • Multi-model help desk chats
  • Search-backed product assistants
  • Embedded agents with approval-gated tools

AI SDK APIs

streamTextconvertToModelMessagesuseChatgatewaytool(toUIMessageStreamResponsecreateUIMessageStreamResponse

Tags

aichatchatbasewidgetmodel-selectorweb-searchhuman-in-the-looptool-approvalai-sdkstreaming

Requirements

Node.js
24+
Memory
512MB
Other
  • OpenAI API key
  • Perplexity API key (optional)

Environment variables

External services

openaiperplexityupstash

Ready to use?

View the full interactive pattern with live preview and copy the source code.

View the pattern on desktop

Related patterns

HIL Agentic Context BuilderBuild brand context through AI-guided questioning and web research. Gathers insights to create detailed brand profiles.Oct 2025
HIL Inquire Multiple ChoiceGather information through AI-driven multiple choice questions. Includes approval workflows and real-time rendering.Oct 2025
HIL Inquire Text InputGather detailed information through AI-driven text input questions. Includes approval workflows and real-time rendering.Oct 2025
AI Wizard Brand StrategyA full-screen AI levee interface where each stage is an adaptive interview with lock-based progression and dynamic tool-driven prompts.Feb 2026