6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/components/custom/sidebar-toggle.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentProps } from 'react';
2 |
3 | import { SidebarTrigger, useSidebar } from '@/components/ui/sidebar';
4 | import { BetterTooltip } from '@/components/ui/tooltip';
5 | import { cn } from '@/lib/utils';
6 |
7 | import { SidebarLeftIcon } from './icons';
8 | import { Button } from '../ui/button';
9 |
10 | export function SidebarToggle({
11 | className,
12 | }: ComponentProps
16 |
42 | );
43 | };
44 |
--------------------------------------------------------------------------------
/ai/prompts.ts:
--------------------------------------------------------------------------------
1 | export const blocksPrompt = `
2 | Blocks is a special user interface mode that helps users with writing, editing, and other content creation tasks. When block is open, it is on the right side of the screen, while the conversation is on the left side. When creating or updating documents, changes are reflected in real-time on the blocks and visible to the user.
3 |
4 | This is a guide for using blocks tools: \`createDocument\` and \`updateDocument\`, which render content on a blocks beside the conversation.
5 |
6 | **When to use \`createDocument\`:**
7 | - For substantial content (>10 lines)
8 | - For content users will likely save/reuse (emails, code, essays, etc.)
9 | - When explicitly requested to create a document
10 |
11 | **When NOT to use \`createDocument\`:**
12 | - For informational/explanatory content
13 | - For conversational responses
14 | - When asked to keep it in chat
15 |
16 | **Using \`updateDocument\`:**
17 | - Default to full document rewrites for major changes
18 | - Use targeted updates only for specific, isolated changes
19 | - Follow user instructions for which parts to modify
20 |
21 | Do not update document right after creating it. Wait for user feedback or request to update it.
22 | `;
23 |
24 | export const regularPrompt =
25 | 'You are a friendly assistant! Keep your responses concise and helpful.';
26 |
27 | export const systemPrompt = `${regularPrompt}\n\n${blocksPrompt}`;
28 |
--------------------------------------------------------------------------------
/app/(chat)/chat/[id]/page.tsx:
--------------------------------------------------------------------------------
1 | import { CoreMessage } from 'ai';
2 | import { cookies } from 'next/headers';
3 | import { notFound } from 'next/navigation';
4 |
5 | import { DEFAULT_MODEL_NAME, models } from '@/ai/models';
6 | import { auth } from '@/app/(auth)/auth';
7 | import { Chat as PreviewChat } from '@/components/custom/chat';
8 | import { getChatById, getMessagesByChatId } from '@/db/queries';
9 | import { convertToUIMessages } from '@/lib/utils';
10 |
11 | export default async function Page(props: { params: Promise
17 | {contentType ? (
18 | contentType.startsWith('image') ? (
19 | // NOTE: it is recommended to use next/image for images
20 | // eslint-disable-next-line @next/next/no-img-element
21 | 
27 | ) : (
28 |
29 | )
30 | ) : (
31 |
32 | )}
33 |
34 | {isUploading && (
35 |
40 |
36 |
38 | )}
39 | {name}
41 |
17 |
50 |
18 |
23 | This is an{' '}
24 |
29 | open source
30 | {' '}
31 | chatbot template built with Next.js and the AI SDK by Vercel. It uses
32 | the{' '}
33 | streamText{' '}
34 | function in the server and the{' '}
35 | useChat hook
36 | on the client to create a seamless chat experience.
37 |
39 | You can learn more about the AI SDK by visiting the{' '} 40 | 45 | docs 46 | 47 | . 48 |
49 |
45 |
58 |
46 |
47 |
49 | Assistant
48 | {
52 | setIsExpanded(false);
53 | }}
54 | >
55 |
57 | {suggestion.description}
59 |
66 |
44 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/lib/drizzle/meta/0000_snapshot.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "715ec9ec-6715-4d0f-9f6c-9b5c7f09827c",
3 | "prevId": "00000000-0000-0000-0000-000000000000",
4 | "version": "7",
5 | "dialect": "postgresql",
6 | "tables": {
7 | "public.Chat": {
8 | "name": "Chat",
9 | "schema": "",
10 | "columns": {
11 | "id": {
12 | "name": "id",
13 | "type": "uuid",
14 | "primaryKey": true,
15 | "notNull": true,
16 | "default": "gen_random_uuid()"
17 | },
18 | "createdAt": {
19 | "name": "createdAt",
20 | "type": "timestamp",
21 | "primaryKey": false,
22 | "notNull": true
23 | },
24 | "messages": {
25 | "name": "messages",
26 | "type": "json",
27 | "primaryKey": false,
28 | "notNull": true
29 | },
30 | "userId": {
31 | "name": "userId",
32 | "type": "uuid",
33 | "primaryKey": false,
34 | "notNull": true
35 | }
36 | },
37 | "indexes": {},
38 | "foreignKeys": {
39 | "Chat_userId_User_id_fk": {
40 | "name": "Chat_userId_User_id_fk",
41 | "tableFrom": "Chat",
42 | "tableTo": "User",
43 | "columnsFrom": [
44 | "userId"
45 | ],
46 | "columnsTo": [
47 | "id"
48 | ],
49 | "onDelete": "no action",
50 | "onUpdate": "no action"
51 | }
52 | },
53 | "compositePrimaryKeys": {},
54 | "uniqueConstraints": {}
55 | },
56 | "public.User": {
57 | "name": "User",
58 | "schema": "",
59 | "columns": {
60 | "id": {
61 | "name": "id",
62 | "type": "uuid",
63 | "primaryKey": true,
64 | "notNull": true,
65 | "default": "gen_random_uuid()"
66 | },
67 | "email": {
68 | "name": "email",
69 | "type": "varchar(64)",
70 | "primaryKey": false,
71 | "notNull": true
72 | },
73 | "password": {
74 | "name": "password",
75 | "type": "varchar(64)",
76 | "primaryKey": false,
77 | "notNull": false
78 | }
79 | },
80 | "indexes": {},
81 | "foreignKeys": {},
82 | "compositePrimaryKeys": {},
83 | "uniqueConstraints": {}
84 | }
85 | },
86 | "enums": {},
87 | "schemas": {},
88 | "sequences": {},
89 | "_meta": {
90 | "columns": {},
91 | "schemas": {},
92 | "tables": {}
93 | }
94 | }
--------------------------------------------------------------------------------
/components/custom/app-sidebar.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import Link from 'next/link';
4 | import { useRouter } from 'next/navigation';
5 | import { type User } from 'next-auth';
6 |
7 | import { PlusIcon } from '@/components/custom/icons';
8 | import { SidebarHistory } from '@/components/custom/sidebar-history';
9 | import { SidebarUserNav } from '@/components/custom/sidebar-user-nav';
10 | import { Button } from '@/components/ui/button';
11 | import {
12 | Sidebar,
13 | SidebarContent,
14 | SidebarFooter,
15 | SidebarGroup,
16 | SidebarGroupContent,
17 | SidebarHeader,
18 | SidebarMenu,
19 | useSidebar,
20 | } from '@/components/ui/sidebar';
21 | import { BetterTooltip } from '@/components/ui/tooltip';
22 |
23 | export function AppSidebar({ user }: { user: User | undefined }) {
24 | const router = useRouter();
25 | const { setOpenMobile } = useSidebar();
26 |
27 | return (
28 |
45 |
52 | Sign in
53 |
64 |
65 |
46 |
51 | Sign In
47 |48 | Use your email and password to sign in 49 |
50 |54 | {"Don't have an account? "} 55 | 59 | Sign up 60 | 61 | {' for free.'} 62 |
63 |
32 |
45 |
56 |
57 |
58 | {
34 | setOpenMobile(false);
35 | router.push('/');
36 | router.refresh();
37 | }}
38 | className="flex flex-row gap-3 items-center"
39 | >
40 |
41 | Chatbot
42 |
43 |
44 |
47 |
69 | );
70 | }
71 |
--------------------------------------------------------------------------------
/app/(chat)/api/document/route.ts:
--------------------------------------------------------------------------------
1 | import { auth } from '@/app/(auth)/auth';
2 | import {
3 | deleteDocumentsByIdAfterTimestamp,
4 | getDocumentsById,
5 | saveDocument,
6 | } from '@/db/queries';
7 |
8 | export async function GET(request: Request) {
9 | const { searchParams } = new URL(request.url);
10 | const id = searchParams.get('id');
11 |
12 | if (!id) {
13 | return new Response('Missing id', { status: 400 });
14 | }
15 |
16 | const session = await auth();
17 |
18 | if (!session || !session.user) {
19 | return new Response('Unauthorized', { status: 401 });
20 | }
21 |
22 | const documents = await getDocumentsById({ id });
23 |
24 | const [document] = documents;
25 |
26 | if (!document) {
27 | return new Response('Not Found', { status: 404 });
28 | }
29 |
30 | if (document.userId !== session.user.id) {
31 | return new Response('Unauthorized', { status: 401 });
32 | }
33 |
34 | return Response.json(documents, { status: 200 });
35 | }
36 |
37 | export async function POST(request: Request) {
38 | const { searchParams } = new URL(request.url);
39 | const id = searchParams.get('id');
40 |
41 | if (!id) {
42 | return new Response('Missing id', { status: 400 });
43 | }
44 |
45 | const session = await auth();
46 |
47 | if (!session) {
48 | return new Response('Unauthorized', { status: 401 });
49 | }
50 |
51 | const { content, title }: { content: string; title: string } =
52 | await request.json();
53 |
54 | if (session.user && session.user.id) {
55 | const document = await saveDocument({
56 | id,
57 | content,
58 | title,
59 | userId: session.user.id,
60 | });
61 |
62 | return Response.json(document, { status: 200 });
63 | } else {
64 | return new Response('Unauthorized', { status: 401 });
65 | }
66 | }
67 |
68 | export async function PATCH(request: Request) {
69 | const { searchParams } = new URL(request.url);
70 | const id = searchParams.get('id');
71 |
72 | const { timestamp }: { timestamp: string } = await request.json();
73 |
74 | if (!id) {
75 | return new Response('Missing id', { status: 400 });
76 | }
77 |
78 | const session = await auth();
79 |
80 | if (!session || !session.user) {
81 | return new Response('Unauthorized', { status: 401 });
82 | }
83 |
84 | const documents = await getDocumentsById({ id });
85 |
86 | const [document] = documents;
87 |
88 | if (document.userId !== session.user.id) {
89 | return new Response('Unauthorized', { status: 401 });
90 | }
91 |
92 | await deleteDocumentsByIdAfterTimestamp({
93 | id,
94 | timestamp: new Date(timestamp),
95 | });
96 |
97 | return new Response('Deleted', { status: 200 });
98 | }
99 |
--------------------------------------------------------------------------------
/components/custom/model-selector.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { startTransition, useMemo, useOptimistic, useState } from 'react';
4 |
5 | import { models } from '@/ai/models';
6 | import { saveModelId } from '@/app/(chat)/actions';
7 | import { Button } from '@/components/ui/button';
8 | import {
9 | DropdownMenu,
10 | DropdownMenuContent,
11 | DropdownMenuItem,
12 | DropdownMenuTrigger,
13 | } from '@/components/ui/dropdown-menu';
14 | import { cn } from '@/lib/utils';
15 |
16 | import { CheckCirclFillIcon, ChevronDownIcon } from './icons';
17 |
18 | export function ModelSelector({
19 | selectedModelId,
20 | className,
21 | }: {
22 | selectedModelId: string;
23 | } & React.ComponentProps
48 |
55 | Sign Up
56 |
67 |
68 |
49 |
54 | Sign Up
50 |51 | Create an account with your email and password 52 |
53 |57 | {'Already have an account? '} 58 | 62 | Sign in 63 | 64 | {' instead.'} 65 |
66 |
63 | {model.label}
64 | {model.description && (
65 |
70 |
66 | {model.description}
67 |
68 | )}
69 |
71 |
73 | {
36 | const rect = event.currentTarget.getBoundingClientRect();
37 |
38 | const boundingBox = {
39 | top: rect.top,
40 | left: rect.left,
41 | width: rect.width,
42 | height: rect.height,
43 | };
44 |
45 | setBlock({
46 | documentId: result.id,
47 | content: '',
48 | title: result.title,
49 | isVisible: true,
50 | status: 'idle',
51 | boundingBox,
52 | });
53 | }}
54 | >
55 |
68 | );
69 | }
70 |
71 | interface DocumentToolCallProps {
72 | type: 'create' | 'update' | 'request-suggestions';
73 | args: any;
74 | }
75 |
76 | export function DocumentToolCall({ type, args }: DocumentToolCallProps) {
77 | return (
78 |
56 | {type === 'create' ? (
57 |
64 |
65 | {getActionText(type)} {result.title}
66 |
67 |
79 |
97 | );
98 | }
99 |
--------------------------------------------------------------------------------
/db/schema.ts:
--------------------------------------------------------------------------------
1 | import { InferSelectModel } from 'drizzle-orm';
2 | import {
3 | pgTable,
4 | varchar,
5 | timestamp,
6 | json,
7 | uuid,
8 | text,
9 | primaryKey,
10 | foreignKey,
11 | boolean,
12 | } from 'drizzle-orm/pg-core';
13 |
14 | export const user = pgTable('User', {
15 | id: uuid('id').primaryKey().notNull().defaultRandom(),
16 | email: varchar('email', { length: 64 }).notNull(),
17 | password: varchar('password', { length: 64 }),
18 | });
19 |
20 | export type User = InferSelectModel
80 |
94 |
95 |
81 | {type === 'create' ? (
82 |
89 |
90 |
91 | {getActionText(type)} {args.title}
92 |
93 | {
96 | /opengraph-image.png)
3 | Next.js AI Chatbot
4 | 5 | 6 |7 | An Open-Source AI Chatbot Template Built With Next.js and the AI SDK by Vercel. 8 |
9 | 10 |11 | Features · 12 | Model Providers · 13 | Deploy Your Own · 14 | Running locally 15 |
16 |17 | 18 | ## Features 19 | 20 | - [Next.js](https://nextjs.org) App Router 21 | - Advanced routing for seamless navigation and performance 22 | - React Server Components (RSCs) and Server Actions for server-side rendering and increased performance 23 | - [AI SDK](https://sdk.vercel.ai/docs) 24 | - Unified API for generating text, structured objects, and tool calls with LLMs 25 | - Hooks for building dynamic chat and generative user interfaces 26 | - Supports OpenAI (default), Anthropic, Cohere, and other model providers 27 | - [shadcn/ui](https://ui.shadcn.com) 28 | - Styling with [Tailwind CSS](https://tailwindcss.com) 29 | - Component primitives from [Radix UI](https://radix-ui.com) for accessibility and flexibility 30 | - Data Persistence 31 | - [Vercel Postgres powered by Neon](https://vercel.com/storage/postgres) for saving chat history and user data 32 | - [Vercel Blob](https://vercel.com/storage/blob) for efficient file storage 33 | - [NextAuth.js](https://github.com/nextauthjs/next-auth) 34 | - Simple and secure authentication 35 | 36 | ## Model Providers 37 | 38 | This template ships with OpenAI `gpt-4o` as the default. However, with the [AI SDK](https://sdk.vercel.ai/docs), you can switch LLM providers to [OpenAI](https://openai.com), [Anthropic](https://anthropic.com), [Cohere](https://cohere.com/), and [many more](https://sdk.vercel.ai/providers/ai-sdk-providers) with just a few lines of code. 39 | 40 | ## Deploy Your Own 41 | 42 | You can deploy your own version of the Next.js AI Chatbot to Vercel with one click: 43 | 44 | [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot&env=AUTH_SECRET,OPENAI_API_KEY&envDescription=Learn%20more%20about%20how%20to%20get%20the%20API%20Keys%20for%20the%20application&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot%2Fblob%2Fmain%2F.env.example&demo-title=AI%20Chatbot&demo-description=An%20Open-Source%20AI%20Chatbot%20Template%20Built%20With%20Next.js%20and%20the%20AI%20SDK%20by%20Vercel.&demo-url=https%3A%2F%2Fchat.vercel.ai&stores=[{%22type%22:%22postgres%22},{%22type%22:%22blob%22}]) 45 | 46 | ## Running locally 47 | 48 | You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js AI Chatbot. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/projects/environment-variables) for this, but a `.env` file is all that is necessary. 49 | 50 | > Note: You should not commit your `.env` file or it will expose secrets that will allow others to control access to your various OpenAI and authentication provider accounts. 51 | 52 | 1. Install Vercel CLI: `npm i -g vercel` 53 | 2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link` 54 | 3. Download your environment variables: `vercel env pull` 55 | 56 | ```bash 57 | pnpm install 58 | pnpm dev 59 | ``` 60 | 61 | Your app template should now be running on [localhost:3000](http://localhost:3000/). 62 | -------------------------------------------------------------------------------- /components/custom/version-footer.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { isAfter } from 'date-fns'; 4 | import { motion } from 'framer-motion'; 5 | import { useState } from 'react'; 6 | import { useSWRConfig } from 'swr'; 7 | import { useWindowSize } from 'usehooks-ts'; 8 | 9 | import { Document } from '@/db/schema'; 10 | import { getDocumentTimestampByIndex } from '@/lib/utils'; 11 | 12 | import { UIBlock } from './block'; 13 | import { LoaderIcon } from './icons'; 14 | import { Button } from '../ui/button'; 15 | 16 | interface VersionFooterProps { 17 | block: UIBlock; 18 | handleVersionChange: (type: 'next' | 'prev' | 'toggle' | 'latest') => void; 19 | documents: Array
46 |
51 |
52 | You are viewing a previous version
47 |
48 | Restore this version to make edits
49 |
50 |
53 |
96 |
104 |
105 |
15 | {children}
16 |
17 | ) : (
18 |
22 | {children}
23 |
24 | );
25 | },
26 | ol: ({ node, children, ...props }: any) => {
27 | return (
28 | -
29 | {children}
30 |
-
43 | {children}
44 |
69 | {children} 70 |
71 | ); 72 | }, 73 | h2: ({ node, children, ...props }: any) => { 74 | return ( 75 |76 | {children} 77 |
78 | ); 79 | }, 80 | h3: ({ node, children, ...props }: any) => { 81 | return ( 82 |83 | {children} 84 |
85 | ); 86 | }, 87 | h4: ({ node, children, ...props }: any) => { 88 | return ( 89 |90 | {children} 91 |
92 | ); 93 | }, 94 | h5: ({ node, children, ...props }: any) => { 95 | return ( 96 |97 | {children} 98 |
99 | ); 100 | }, 101 | h6: ({ node, children, ...props }: any) => { 102 | return ( 103 |104 | {children} 105 |
106 | ); 107 | }, 108 | }; 109 | 110 | return ( 111 |
80 |
130 |
131 |
85 | {messages.length === 0 && vote.messageId === message.id)
98 | : undefined
99 | }
100 | />
101 | ))}
102 |
103 | {isLoading &&
104 | messages.length > 0 &&
105 | messages[messages.length - 1].role === 'user' && (
106 |
114 |
129 |
40 |
41 |
42 |
52 |
53 | Copy
54 |
55 |
56 |
57 |
58 |
106 |
107 | Upvote Response
108 |
109 |
110 |
111 |
112 |
160 |
161 | Downvote Response
162 |
163 |
164 |
45 | {message.role === 'assistant' && (
46 |
143 |
47 |
49 | )}
50 |
51 |
52 | {message.content && (
53 |
142 |
54 | {message.content as string}
55 |
56 | )}
57 |
58 | {message.toolInvocations && message.toolInvocations.length > 0 && (
59 |
60 | {message.toolInvocations.map((toolInvocation) => {
61 | const { toolName, toolCallId, state, args } = toolInvocation;
62 |
63 | if (state === 'result') {
64 | const { result } = toolInvocation;
65 |
66 | return (
67 |
121 | )}
122 |
123 | {message.experimental_attachments && (
124 |
68 | {toolName === 'getWeather' ? (
69 |
95 | );
96 | } else {
97 | return (
98 | {JSON.stringify(result, null, 2)}
93 | )}
94 |
104 | {toolName === 'getWeather' ? (
105 |
117 | );
118 | }
119 | })}
120 |
125 | {message.experimental_attachments.map((attachment) => (
126 |
132 | )}
133 |
134 |
165 |
175 |
166 |
168 |
169 |
170 |
174 |
171 | Thinking...
172 |
173 |
263 |
310 | );
311 | }
312 |
--------------------------------------------------------------------------------
/components/custom/multimodal-input.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Attachment, ChatRequestOptions, CreateMessage, Message } from 'ai';
4 | import cx from 'classnames';
5 | import { motion } from 'framer-motion';
6 | import React, {
7 | useRef,
8 | useEffect,
9 | useState,
10 | useCallback,
11 | Dispatch,
12 | SetStateAction,
13 | ChangeEvent,
14 | } from 'react';
15 | import { toast } from 'sonner';
16 | import { useLocalStorage, useWindowSize } from 'usehooks-ts';
17 |
18 | import { sanitizeUIMessages } from '@/lib/utils';
19 |
20 | import { ArrowUpIcon, PaperclipIcon, StopIcon } from './icons';
21 | import { PreviewAttachment } from './preview-attachment';
22 | import { Button } from '../ui/button';
23 | import { Textarea } from '../ui/textarea';
24 |
25 | const suggestedActions = [
26 | {
27 | title: 'What is the weather',
28 | label: 'in San Francisco?',
29 | action: 'What is the weather in San Francisco?',
30 | },
31 | {
32 | title: 'Help me draft an essay',
33 | label: 'about Silicon Valley',
34 | action: 'Help me draft a short essay about Silicon Valley',
35 | },
36 | ];
37 |
38 | export function MultimodalInput({
39 | chatId,
40 | input,
41 | setInput,
42 | isLoading,
43 | stop,
44 | attachments,
45 | setAttachments,
46 | messages,
47 | setMessages,
48 | append,
49 | handleSubmit,
50 | className,
51 | }: {
52 | chatId: string;
53 | input: string;
54 | setInput: (value: string) => void;
55 | isLoading: boolean;
56 | stop: () => void;
57 | attachments: Array
264 |
284 |
285 |
265 |
276 |
281 |
282 |
277 | {n(weatherAtLocation.current.temperature_2m)}
278 | {weatherAtLocation.current_units.temperature_2m}
279 |
280 | {`H:${n(currentHigh)}° L:${n(currentLow)}°`}
283 |
286 | {displayTimes.map((time, index) => (
287 |
309 |
288 |
307 | ))}
308 |
289 | {format(new Date(time), 'ha')}
290 |
291 |
302 |
303 | {n(displayTemperatures[index])}
304 | {weatherAtLocation.hourly_units.temperature_2m}
305 |
306 |
196 | {messages.length === 0 &&
197 | attachments.length === 0 &&
198 | uploadQueue.length === 0 && (
199 |
200 | {suggestedActions.map((suggestedAction, index) => (
201 | 1 ? 'hidden sm:block' : 'block'}
208 | >
209 |
226 |
227 | ))}
228 |
229 | )}
230 |
231 |
239 |
240 | {(attachments.length > 0 || uploadQueue.length > 0) && (
241 |
242 | {attachments.map((attachment) => (
243 |
258 | )}
259 |
260 |