gitwtfhub

wtf is chatbot-template?

shadcn-ui/chatbot-template — explained in plain English

Analysis updated 2026-08-14

656TypeScriptAudience · developerComplexity · 3/5Setup · moderate

TL;DR

A starter chatbot template using Next.js and shadcn/ui that connects to AI models via Vercel's AI Gateway. It includes streaming responses, tool calling, web search, and human-in-the-loop questions.

Mindmap

mindmap
  root((repo))
    What it does
      Streaming chat UI
      Tool calling examples
      Web search with citations
      Human-in-the-loop questions
    Tech stack
      Next.js
      AI SDK
      shadcn/ui
      Vercel AI Gateway
    Deployment
      One-click Vercel deploy
      Local dev needs pnpm
      Gateway credential required
    Security
      Public unauthenticated API
      Rate limiting recommended
      Spend limits recommended
    Customization
      Add tools in tools dir
      Add parts in parts dir
      Model list in lib/models.ts

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Build a customer support chatbot with streaming responses and web search capabilities.

REASON 2

Create a research assistant chatbot that can look up GitHub repository stats on demand.

REASON 3

Prototype an AI assistant that asks clarifying questions before answering complex queries.

REASON 4

Learn how to integrate tool calling and human-in-the-loop flows into a Next.js chat app.

What's in the stack?

TypeScriptNext.jsAI SDKshadcn/uiVercel AI Gatewaypnpm

How it stacks up

shadcn-ui/chatbot-templatexiaotianfotos/homeraildenoland/denokv
Stars656657652
LanguageTypeScriptTypeScriptTypeScript
Last pushed2026-06-11
MaintenanceMaintained
Setup difficultymoderatehardmoderate
Complexity3/54/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Requires pnpm for dependency installation and a Vercel AI Gateway credential obtained from a linked Vercel project or dashboard API key.

No license information is provided in the repository explanation, so usage terms are unclear.

Wtf does this do

This repository is a minimal chatbot template built with Next.js, the AI SDK, and shadcn/ui. It is designed to run on the Vercel AI Gateway, which handles the connection to the AI models. The project provides a starting point for developers who want to create a chat application with streaming responses, tool calling, and web search capabilities. The template includes several features. It supports streaming chat with markdown rendering, allowing responses to appear progressively as they are generated. It includes a tool calling example, where the AI can use tools to fetch information. One tool looks up GitHub repositories and shows stats like stars and forks. Another uses each provider's built-in search tool to search the web, showing a "Searching the web" status and then citations for the results. The template also includes a human-in-the-loop questionnaire, where the model can ask clarifying questions and the user answers them directly in the chat interface. Deploying to Vercel requires no configuration. Vercel deployments authenticate to the AI Gateway automatically, and usage runs on your team's AI Gateway credits. For local development, you need to install dependencies with pnpm and provide a gateway credential, either by pulling a token from a linked Vercel project or by creating an API key in the Vercel dashboard. The model list is defined in a file called lib/models.ts, where the first entry is the default model. The README includes a security warning. The API route that handles chat is public and unauthenticated, meaning every request spends your AI Gateway credits. The route validates the request body, restricts models to an approved list, caps output tokens, and aborts generation if the client disconnects. However, these limits bound a single request, not overall volume. The README recommends adding rate limiting, setting a spend limit, and adding authentication if the chatbot is not meant to be public. Developers can add their own tools by creating a file in the tools directory and a corresponding component in the parts directory. Message types are inferred from tool definitions, so renaming a tool field produces a build error rather than a silent failure.

Yoink these prompts

Prompt 1
Help me add a new tool to the shadcn-ui/chatbot-template that fetches the latest weather for a given city and displays it in the chat. Walk me through creating the tool file and the corresponding parts component.
Prompt 2
I want to add authentication to the shadcn-ui/chatbot-template API route so only logged-in users can use the chatbot. Show me how to modify the route handler to check for a session before proceeding.
Prompt 3
Using the shadcn-ui/chatbot-template, help me change the default AI model by editing lib/models.ts to put my preferred model first in the list.
Prompt 4
Help me set up rate limiting for the shadcn-ui/chatbot-template chat API route using Upstash Redis to prevent abuse on the public unauthenticated endpoint.

Frequently asked questions

wtf is chatbot-template?

A starter chatbot template using Next.js and shadcn/ui that connects to AI models via Vercel's AI Gateway. It includes streaming responses, tool calling, web search, and human-in-the-loop questions.

What language is chatbot-template written in?

Mainly TypeScript. The stack also includes TypeScript, Next.js, AI SDK.

What license does chatbot-template use?

No license information is provided in the repository explanation, so usage terms are unclear.

How hard is chatbot-template to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is chatbot-template for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.