AI Agents

Live

A production-ready AI agent chat UI built with the Vercel AI SDK. Supports DeepSeek-style reasoning tokens, live tool invocation feedback, and a polished streaming chat experience.

AINext.jsVercel AI SDKTypeScript

AI Agent

Configure your API key to start chatting.

Your API key is stored locally and sent directly to the provider — never to our servers.

Use this in your project

View full source

Drop the AI agent chat UI into any Next.js (App Router) project. Users bring their own API key — nothing is stored on your server.

Quick InstallOne command — everything included

bash

npx shadcn@latest add https://gusschineider.com/r/agent-chat

Files added to your project

components/agent-chat-ui.tsxChat UI with streaming, tools & settings
app/api/chat/route.tsAPI route — multi-provider BYOK + hosted mode

Packages installed

aiv6 — Vercel AI SDK
@ai-sdk/reactuseChat hook
@ai-sdk/openai
@ai-sdk/anthropic
@ai-sdk/google
@ai-sdk/xai
@openrouter/ai-sdk-provider500+ models
react-markdown
lucide-react

Requires a Next.js App Router project with shadcn/ui initialized. The CLI will install all shadcn components automatically.

Then use it

app/page.tsx

// Any page or component in your Next.js app
import AgentChatUI from "@/components/agent-chat-ui";

export default function Page() {
  return (
    <div className="max-w-4xl mx-auto p-8">
      <AgentChatUI />
    </div>
  );
}