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.

Prerequisites

You need a Next.js App Router project with TypeScript and Tailwind CSS. The component uses shadcn/ui for base components.

bash

npx create-next-app@latest my-app --typescript --tailwind --app

bash

npx shadcn@latest init

Install AI dependencies

bash

npm install ai @ai-sdk/react @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/google @ai-sdk/xai @openrouter/ai-sdk-provider react-markdown lucide-react

Add required shadcn components

bash

npx shadcn@latest add accordion card avatar scroll-area input button badge collapsible textarea

Create the API route

This route accepts the user's API key and streams responses. It never stores keys server-side.

app/api/chat/route.ts

// app/api/chat/route.ts
import { createOpenAI } from "@ai-sdk/openai";
import { createAnthropic } from "@ai-sdk/anthropic";
import { createGoogleGenerativeAI } from "@ai-sdk/google";
import { convertToModelMessages, streamText } from "ai";
import type { LanguageModel } from "ai";

export const maxDuration = 60;

export async function POST(req: Request) {
  const { messages, provider, model, apiKey } = await req.json();

  if (!apiKey) return Response.json({ error: "API key required" }, { status: 400 });

  let aiModel: LanguageModel;
  switch (provider) {
    case "openai":     aiModel = createOpenAI({ apiKey })(model); break;
    case "anthropic":  aiModel = createAnthropic({ apiKey })(model); break;
    case "google":     aiModel = createGoogleGenerativeAI({ apiKey })(model); break;
    default: return Response.json({ error: "Unknown provider" }, { status: 400 });
  }

  const result = streamText({
    model: aiModel,
    system: "You are a helpful AI assistant.",
    messages: await convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

Copy the component

Copy components/AgentChatUI.tsx from the repository into your project:

View components/AgentChatUI.tsx on GitHub

Use it in your page

app/page.tsx

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

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

Notes

→ API keys are stored in localStorage and sent directly to the provider — never to your server.
→ The component uses Vercel AI SDK v6 — make sure your ai package is v6+.
→ Set export const maxDuration = 60 on the route for long responses.