9b:I[903690,["/chat-static/_next/static/immutable/chunks/1hdsix4-vqiik.js","/chat-static/_next/static/immutable/chunks/2_5m3u4145ss0.js","/chat-static/_next/static/immutable/chunks/06fhmb9zv6uo6.js","/chat-static/_next/static/immutable/chunks/09xvrt12-2rl0.js","/chat-static/_next/static/immutable/chunks/1xgcq8c4f_8fq.js","/chat-static/_next/static/immutable/chunks/1hvqmnitid4xe.js","/chat-static/_next/static/immutable/chunks/3rr5l9ro89g8d.js","/chat-static/_next/static/immutable/chunks/3hsdob8hgrg37.js","/chat-static/_next/static/immutable/chunks/1pxmbozdcc9y7.js","/chat-static/_next/static/immutable/chunks/38yaqwe2ys7o6.js","/chat-static/_next/static/immutable/chunks/1yui69gkjunmr.js","/chat-static/_next/static/immutable/chunks/3em_xe-n6-qt7.js","/chat-static/_next/static/immutable/chunks/09-0bd882xikd.js","/chat-static/_next/static/immutable/chunks/3u4hk7y5fepx4.js","/chat-static/_next/static/immutable/chunks/3fps7vfyqxiw6.js","/chat-static/_next/static/immutable/chunks/0mvgw83jdcr8_.js","/chat-static/_next/static/immutable/chunks/3z_28wzzktgw2.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/363ke95s1ko6o.js","/chat-static/_next/static/immutable/chunks/416tmudpeffkz.js","/chat-static/_next/static/immutable/chunks/2ild4_8nnn7ys.js","/chat-static/_next/static/immutable/chunks/28kbmv3dy8txv.js","/chat-static/_next/static/immutable/chunks/22efgyn_v5u19.js","/chat-static/_next/static/immutable/chunks/0jb6ous0375oa.js","/chat-static/_next/static/immutable/chunks/1wjcpzg3nzemw.js","/chat-static/_next/static/immutable/chunks/1knar4f0vp2xn.js","/chat-static/_next/static/immutable/chunks/22609g7ehklky.js","/chat-static/_next/static/immutable/chunks/23g_9unic-14a.js","/chat-static/_next/static/immutable/chunks/3d94pkoo4if9r.js","/chat-static/_next/static/immutable/chunks/1h2xxp9cr5c5m.js","/chat-static/_next/static/immutable/chunks/0kwy-rkr6sgzi.js","/chat-static/_next/static/immutable/chunks/2irdqvyz3s8-x.js","/chat-static/_next/static/immutable/chunks/2e80bj61ftled.js","/chat-static/_next/static/immutable/chunks/11q-tf8omz4oz.js","/chat-static/_next/static/immutable/chunks/2l9h4spirx5z4.js","/chat-static/_next/static/immutable/chunks/3239rz_4jff-u.js","/chat-static/_next/static/immutable/chunks/3435domgao21b.js","/chat-static/_next/static/immutable/chunks/37xw6m9iyvjhu.js","/chat-static/_next/static/immutable/chunks/3ra8b37ai-3dk.js"],"ExplicitChatIdProvider"] 9c:I[838238,["/chat-static/_next/static/immutable/chunks/1hdsix4-vqiik.js","/chat-static/_next/static/immutable/chunks/2_5m3u4145ss0.js","/chat-static/_next/static/immutable/chunks/06fhmb9zv6uo6.js","/chat-static/_next/static/immutable/chunks/09xvrt12-2rl0.js","/chat-static/_next/static/immutable/chunks/1xgcq8c4f_8fq.js","/chat-static/_next/static/immutable/chunks/1hvqmnitid4xe.js","/chat-static/_next/static/immutable/chunks/3rr5l9ro89g8d.js","/chat-static/_next/static/immutable/chunks/3hsdob8hgrg37.js","/chat-static/_next/static/immutable/chunks/1pxmbozdcc9y7.js","/chat-static/_next/static/immutable/chunks/38yaqwe2ys7o6.js","/chat-static/_next/static/immutable/chunks/1yui69gkjunmr.js","/chat-static/_next/static/immutable/chunks/3em_xe-n6-qt7.js","/chat-static/_next/static/immutable/chunks/09-0bd882xikd.js","/chat-static/_next/static/immutable/chunks/3u4hk7y5fepx4.js","/chat-static/_next/static/immutable/chunks/3fps7vfyqxiw6.js","/chat-static/_next/static/immutable/chunks/0mvgw83jdcr8_.js","/chat-static/_next/static/immutable/chunks/3z_28wzzktgw2.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/363ke95s1ko6o.js","/chat-static/_next/static/immutable/chunks/416tmudpeffkz.js","/chat-static/_next/static/immutable/chunks/2ild4_8nnn7ys.js","/chat-static/_next/static/immutable/chunks/28kbmv3dy8txv.js","/chat-static/_next/static/immutable/chunks/22efgyn_v5u19.js","/chat-static/_next/static/immutable/chunks/0jb6ous0375oa.js","/chat-static/_next/static/immutable/chunks/1wjcpzg3nzemw.js","/chat-static/_next/static/immutable/chunks/1knar4f0vp2xn.js","/chat-static/_next/static/immutable/chunks/22609g7ehklky.js","/chat-static/_next/static/immutable/chunks/23g_9unic-14a.js","/chat-static/_next/static/immutable/chunks/3d94pkoo4if9r.js","/chat-static/_next/static/immutable/chunks/1h2xxp9cr5c5m.js","/chat-static/_next/static/immutable/chunks/0kwy-rkr6sgzi.js","/chat-static/_next/static/immutable/chunks/2irdqvyz3s8-x.js","/chat-static/_next/static/immutable/chunks/2e80bj61ftled.js","/chat-static/_next/static/immutable/chunks/11q-tf8omz4oz.js","/chat-static/_next/static/immutable/chunks/2l9h4spirx5z4.js","/chat-static/_next/static/immutable/chunks/3239rz_4jff-u.js","/chat-static/_next/static/immutable/chunks/3435domgao21b.js","/chat-static/_next/static/immutable/chunks/37xw6m9iyvjhu.js","/chat-static/_next/static/immutable/chunks/3ra8b37ai-3dk.js"],"SWRDataProvider"] 9d: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()
}
91:["$","$L9b",null,{"chatId":"nhvl8UM4OpA","children":["$","$L9c",null,{"data":{"@\"active-block\",\"nhvl8UM4OpA\",":{"id":"b_BtIH0wVe39T","messageId":"HrrMJB7PA7UCzKpuKdolccYsa6RVYMUU","source":"$9d","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},"children":"$L9e"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from shadcn

More Templates Like This