8e:I[903690,["/chat-static/_next/static/chunks/266cx9fcqhmpk.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3izupkw-ngr6g.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/2c5ox9lu2rsjl.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/044arc-ub2uux.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/15-iorql742-y.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1b432g4ll318n.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0zm6n3ha2zn20.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0xwmd_irkmviy.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/4323eeikb5rls.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/31lmwdrgjrqmt.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3g6lwkmkf0en3.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0n3hed92pnhfj.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1b65ltu_tg58c.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0okzg1a3oisyc.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0cphijp1xrry-.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0muhwnx2z-96f.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/02-dryx0k80qi.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0ersm4n5p19to.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1331umm3hmqi3.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/07950irnlkt05.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1w2m4qpgkkdqm.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0gtw50bn1e-ba.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/234cyf9_l3x2p.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/298ch5lnquhtd.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/21oyg6k8c6ix4.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1uxdv-3jy4-uk.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/32xjj617blghe.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3oaf6-ndpwq7-.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3isvx3-q1f0-g.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0voy48k9w-x1s.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1yz-91u-qfc8u.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0d89trthlp2gl.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/266cx9fcqhmpk.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3izupkw-ngr6g.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/2c5ox9lu2rsjl.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/044arc-ub2uux.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/15-iorql742-y.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1b432g4ll318n.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0zm6n3ha2zn20.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0xwmd_irkmviy.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/4323eeikb5rls.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/31lmwdrgjrqmt.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3g6lwkmkf0en3.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0n3hed92pnhfj.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1b65ltu_tg58c.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0okzg1a3oisyc.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0cphijp1xrry-.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0muhwnx2z-96f.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/02-dryx0k80qi.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0ersm4n5p19to.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1331umm3hmqi3.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/07950irnlkt05.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1w2m4qpgkkdqm.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0gtw50bn1e-ba.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/234cyf9_l3x2p.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/298ch5lnquhtd.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/21oyg6k8c6ix4.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1uxdv-3jy4-uk.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/32xjj617blghe.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3oaf6-ndpwq7-.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/3isvx3-q1f0-g.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0voy48k9w-x1s.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/1yz-91u-qfc8u.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5","/chat-static/_next/static/chunks/0d89trthlp2gl.js?dpl=dpl_Ex1K8QXwFpEUhHwN7XhewbEu63p5"],"SWRDataProvider"] 90:T165e,[V0_FILE]typescriptreact:file="components/chat-form.tsx" "use client" import { cn } from "@/lib/utils" import { useChat } from "ai/react" import { ArrowUpIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip" import { AutoResizeTextarea } from "@/components/autoresize-textarea" export function ChatForm({ className, ...props }: React.ComponentProps<"form">) { const { messages, input, setInput, append } = useChat({ api: "/api/chat", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() void append({ content: input, role: "user" }) setInput("") } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSubmit(e as unknown as React.FormEvent) } } const header = (

Basic AI Chatbot Template

This is an AI chatbot app template built with Next.js, the{" "} Vercel AI SDK, and Vercel KV.

Connect an API Key from your provider and send a message to get started.

) const messageList = (

{messages.map((message, index) => (

{message.content}

))}

) return (

{messages.length ? messageList : header}

) } [V0_FILE]typescriptreact:file="components/autoresize-textarea.tsx" "use client" import { cn } from "@/lib/utils" import React, { useRef, useEffect, type TextareaHTMLAttributes } from "react" interface AutoResizeTextareaProps extends Omit, "value" | "onChange"> { value: string onChange: (value: string) => void } export function AutoResizeTextarea({ className, value, onChange, ...props }: AutoResizeTextareaProps) { const textareaRef = useRef(null) const resizeTextarea = () => { const textarea = textareaRef.current if (textarea) { textarea.style.height = "auto" textarea.style.height = `${textarea.scrollHeight}px` } } useEffect(() => { resizeTextarea() }, [value]) return (

{
        onChange(e.target.value)
        resizeTextarea()
      }}
      className={cn("resize-none min-h-4 max-h-80", className)}
    />
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" entry="true"
import { ChatForm } from "@/components/chat-form"

export default function Page() {
  return <ChatForm />
}

[V0_FILE]typescriptreact:file="app/layout.tsx" entry="true"
import { cn } from "@/lib/utils"
import { TooltipProvider } from "@/components/ui/tooltip"
import { Inter } from "next/font/google"
import type { ReactNode } from "react"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "OpenAI and AI SDK Chatbot",
  description: "A simple chatbot built using the AI SDK and gpt-4o-mini.",
}

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body className={cn("flex min-h-svh flex-col antialiased", inter.className)}>
        <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="app/api/chat/route.ts" entry="true"
import { type CoreMessage, streamText } from "ai"
import { openai } from "@ai-sdk/openai"

export async function POST(req: Request) {
  const { messages }: { messages: CoreMessage[] } = await req.json()

const result = streamText({
    model: openai("gpt-4o-mini"),
    system: "You are a helpful assistant.",
    messages,
  })

return result.toDataStreamResponse()
}
84:["$","$L8e",null,{"chatId":"nhvl8UM4OpA","children":["$","$L8f",null,{"data":{"@\"active-block\",\"nhvl8UM4OpA\",":{"id":"b_BtIH0wVe39T","messageId":"HrrMJB7PA7UCzKpuKdolccYsa6RVYMUU","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"OpenAI and AI SDK Chatbot","type":"code-project","project":"OpenAI and AI SDK Chatbot"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"nhvl8UM4OpA\",":false,"":null},"children":"$L91"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from shadcn

More Templates Like This