[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()
}
</article></body></html>

About

Tags

Share

More from shadcn

More Templates Like This

About

Tags

Share

About

Tags

Share

More from shadcn

More Templates Like This