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(toUIMessageStreamResponse

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 Tool Approval Basic preview

HIL Tool Approval Basic

Chat assistant with human approval workflows for safe tool execution.

aihuman-in-the-loop+6
View pattern →
Marketing Plan & Implement Agent preview

Marketing Plan & Implement Agent

Two-phase marketing agent with brand context: Stage 0 extracts brand info from URL or manual input, planning phase gathers requirements and creates a plan with todos, implementation phase executes the plan using web scraping and research tools. Uses callOptionsSchema + prepareCall for dynamic agent configuration.

aiagents+9
View pattern →
HIL Agentic Context Builder preview

HIL Agentic Context Builder

Build brand context through AI-guided questioning and web research. Gathers insights to create detailed brand profiles.

aihuman-in-the-loop+8
View pattern →
Branding Agent preview

Branding Agent

Extract brand design systems from any website using Firecrawl, then use AI tools to export tokens, generate color palettes, check accessibility, and analyze brand personality.

aiagents+8
View pattern →