shadcn-ui/chatbot-template

A minimal chatbot template built with Next.js, AI SDK, shadcn/ui, shadcn/react, shadcn/typeset. It runs on the Vercel AI Gateway.

What it solves

It provides a minimal, production-ready starting point for developers to build AI chatbots. It eliminates the boilerplate required to set up streaming responses, tool calling, and a polished user interface using modern web frameworks.

How it works

The template uses Next.js and the Vercel AI SDK to handle streaming text responses. It integrates with the Vercel AI Gateway for model management and authentication. The frontend is built with shadcn/ui components, utilizing a specialized message scroller and typeset for markdown rendering.

Tool calling is handled through a modular system where each tool (like web search or GitHub repo lookups) has its own definition file and a corresponding UI component to render the tool's state (streaming, available, or error) in the chat interface.

Who it’s for

Web developers who want to quickly deploy a functional AI chatbot with a professional UI and advanced features like tool calling and human-in-the-loop interactions.

Highlights

  • Streaming Chat: Supports real-time response streaming with markdown rendering.
  • Tool Calling: Includes examples for web search and GitHub repository lookups.
  • Human-in-the-Loop: Features a questionnaire component that allows the model to ask clarifying questions to the user.
  • Type-Safe Tools: Uses InferUITools to ensure tool inputs and outputs are fully typed, preventing runtime errors during development.

Related

  • Project
  • Project
  • Project
  • Project
  • Project