├── .env.example
├── .eslintrc.json
├── .gitignore
├── .vscode
└── settings.json
├── README.md
├── components
├── Button.tsx
├── Chat.tsx
├── ChatLine.tsx
├── Pinecone.tsx
└── Spinner.tsx
├── next-env.d.ts
├── package.json
├── pages
├── _app.tsx
├── api
│ ├── chat.ts
│ ├── context.ts
│ ├── pinecone.ts
│ └── seed.ts
└── index.tsx
├── pnpm-lock.yaml
├── postcss.config.js
├── public
└── favicon.ico
├── seed
├── crawler.ts
├── seed.ts
└── summarizer.ts
├── tailwind.config.js
├── tsconfig.json
├── turbo.json
├── utils
├── OpenAICompletion.ts
├── OpenAIEmbedding.ts
├── OpenAIStream.ts
└── TextSplitter.ts
└── vercel.json
/.env.example:
--------------------------------------------------------------------------------
1 | # Created by Vercel CLI
2 | OPENAI_API_KEY=
3 | # The temperature controls how much randomness is in the output
4 | AI_TEMP=0.7
5 | # The size of the response
6 | AI_MAX_TOKENS=100
7 | OPENAI_API_ORG=
8 |
9 | PINECONE_API_KEY=
10 | PINECONE_ENVIRONMENT=
11 | PINECONE_INDEX=
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "extends": "next/core-web-vitals"
4 | }
5 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # Dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # Testing
9 | /coverage
10 |
11 | # Next.js
12 | /.next/
13 | /out/
14 |
15 | # Production
16 | build
17 | dist
18 |
19 | # Misc
20 | .DS_Store
21 | *.pem
22 |
23 | # Debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # Local ENV files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 |
34 | # Vercel
35 | .vercel
36 |
37 | # Turborepo
38 | .turbo
39 |
40 | # typescript
41 | *.tsbuildinfo
42 |
43 | .env
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "dotenv.enableAutocloaking": false
3 | }
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # AI Chat GPT-3 example
2 |
3 | This example shows how to implement a chat bot backed by Pinecone using Next.js, API Routes, and [OpenAI ChatGPT API](https://beta.openai.com/docs/api-reference/completions/create).
4 |
5 | ### Components
6 |
7 | - Next.js
8 | - OpenAI API (ChatGPT) - streaming
9 | - API Routes (Edge runtime) - streaming
10 | - Pinecone store
11 |
12 | ## How to Use
13 |
14 | You can choose from one of the following two methods to use this repository:
15 |
16 | ### One-Click Deploy
17 |
18 | Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples):
19 |
20 | [](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/solutions/ai-chatgpt&project-name=ai-chatgpt&repository-name=ai-chatgpt&env=OPENAI_API_KEY)
21 |
22 | ### Clone and Deploy
23 |
24 | Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [pnpm](https://pnpm.io/installation) to bootstrap the example:
25 |
26 | ```bash
27 | pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/ai-chatgpt
28 | ```
29 |
30 | #### Set up environment variables
31 |
32 | Rename [`.env.example`](.env.example) to `.env.local`:
33 |
34 | ```bash
35 | cp .env.example .env.local
36 | ```
37 |
38 | Update `OPENAI_API_KEY` with your [OpenAI](https://beta.openai.com/account/api-keys) secret key.
39 | Update `PINECONE_API_KEY` with your [Pinecone](https://www.pinecone.io/start/) secret key, and `PINECONE_ENVIRONMENT` with your Pinecone environment name.
40 | Choose a `PINECONE_INDEX` name for your index. If the index does not exist, it will be created automatically.
41 |
42 | Next, run Next.js in development mode:
43 |
44 | ```bash
45 | pnpm dev
46 | ```
47 |
48 | The app should be up and running at http://localhost:3000.
49 |
50 | Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=edge-middleware-eap) ([Documentation](https://nextjs.org/docs/deployment)).
51 |
--------------------------------------------------------------------------------
/components/Button.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 |
3 | export function Button({ className, ...props }: any) {
4 | return (
5 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/components/Chat.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 | import { Button } from './Button'
3 | import { type ChatGPTMessage, ChatLine, LoadingChatLine } from './ChatLine'
4 | import { useCookies } from 'react-cookie'
5 |
6 | const COOKIE_NAME = 'nextjs-example-ai-chat-gpt3'
7 |
8 | // default first message to display in UI (not necessary to define the prompt)
9 | export const initialMessages: ChatGPTMessage[] = [
10 | {
11 | role: 'assistant',
12 | content: 'Hi! I am a friendly AI assistant. Ask me anything!',
13 | },
14 | ]
15 |
16 | const InputMessage = ({ input, setInput, sendMessage }: any) => (
17 |
18 | {
25 | if (e.key === 'Enter') {
26 | sendMessage(input)
27 | setInput('')
28 | }
29 | }}
30 | onChange={(e) => {
31 | setInput(e.target.value)
32 | }}
33 | />
34 |
44 |
45 | )
46 |
47 | export function Chat() {
48 | const [messages, setMessages] = useState(initialMessages)
49 | const [input, setInput] = useState('')
50 | const [loading, setLoading] = useState(false)
51 | const [cookie, setCookie] = useCookies([COOKIE_NAME])
52 |
53 | useEffect(() => {
54 | if (!cookie[COOKIE_NAME]) {
55 | // generate a semi random short id
56 | const randomId = Math.random().toString(36).substring(7)
57 | setCookie(COOKIE_NAME, randomId)
58 | }
59 | }, [cookie, setCookie])
60 |
61 | // send message to API /api/chat endpoint
62 | const sendMessage = async (message: string) => {
63 | setLoading(true)
64 | const newMessages = [
65 | ...messages,
66 | { role: 'user', content: message } as ChatGPTMessage,
67 | ]
68 | setMessages(newMessages)
69 | const last10messages = newMessages.slice(-10) // remember last 10 messages
70 |
71 | const response = await fetch('/api/chat', {
72 | method: 'POST',
73 | headers: {
74 | 'Content-Type': 'application/json',
75 | },
76 | body: JSON.stringify({
77 | messages: last10messages,
78 | user: cookie[COOKIE_NAME],
79 | }),
80 | })
81 |
82 | console.log('Edge function returned.')
83 |
84 | if (!response.ok) {
85 | throw new Error(response.statusText)
86 | }
87 |
88 | // This data is a ReadableStream
89 | const data = response.body
90 | if (!data) {
91 | return
92 | }
93 |
94 | const reader = data.getReader()
95 | const decoder = new TextDecoder()
96 | let done = false
97 |
98 | let lastMessage = ''
99 |
100 | while (!done) {
101 | const { value, done: doneReading } = await reader.read()
102 | done = doneReading
103 | const chunkValue = decoder.decode(value)
104 |
105 | lastMessage = lastMessage + chunkValue
106 |
107 | setMessages([
108 | ...newMessages,
109 | { role: 'assistant', content: lastMessage } as ChatGPTMessage,
110 | ])
111 |
112 | setLoading(false)
113 | }
114 | }
115 |
116 | return (
117 |
118 | {messages.map(({ content, role }, index) => (
119 |
120 | ))}
121 |
122 | {loading && }
123 |
124 | {messages.length < 2 && (
125 |
126 | Type a message to start the conversation
127 |
128 | )}
129 |
134 |
135 | )
136 | }
137 |
--------------------------------------------------------------------------------
/components/ChatLine.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx'
2 | import Balancer from 'react-wrap-balancer'
3 |
4 | // wrap Balancer to remove type errors :( - @TODO - fix this ugly hack
5 | const BalancerWrapper = (props: any) =>
6 |
7 | type ChatGPTAgent = 'user' | 'system' | 'assistant'
8 |
9 | export interface ChatGPTMessage {
10 | role: ChatGPTAgent
11 | content: string
12 | }
13 |
14 | // loading placeholder animation for the chat line
15 | export const LoadingChatLine = () => (
16 |
34 | )
35 |
36 | // util helper to convert new lines to
tags
37 | const convertNewLines = (text: string) =>
38 | text.split('\n').map((line, i) => (
39 |
40 | {line}
41 |
42 |
43 | ))
44 |
45 | export function ChatLine({ role = 'assistant', content }: ChatGPTMessage) {
46 | if (!content) {
47 | return null
48 | }
49 | const formatteMessage = convertNewLines(content)
50 |
51 | return (
52 |
79 | )
80 | }
81 |
--------------------------------------------------------------------------------
/components/Pinecone.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import { Button } from "./Button";
3 | import React from "react";
4 | import { Spinner } from "./Spinner";
5 |
6 | export function Pinecone({ className, ...props }: any) {
7 | const [entries, setSeeded] = React.useState([
8 | {
9 | url: "https://vercel.com/docs/concepts/functions/edge-functions/vercel-edge-package",
10 | title: "@vercel/edge Package",
11 | seeded: false,
12 | loading: false,
13 | },
14 | {
15 | url: "https://docs.pinecone.io/docs/manage-indexes",
16 | title: "Managing Pinecone Indexes",
17 | seeded: false,
18 | loading: false,
19 | },
20 | {
21 | url: "https://www.espn.com/nfl/story/_/id/37421059/giants-give-dt-dexter-lawrence-90-million-4-year-extension",
22 | title: "Dexter Lawrence 4 year extension",
23 | seeded: false,
24 | loading: false,
25 | },
26 | ]);
27 |
28 | const getDocument = async (url: string) => {
29 | setSeeded((seeded: any) =>
30 | seeded.map((seed: any) => {
31 | if (seed.url === url) {
32 | return {
33 | ...seed,
34 | loading: true,
35 | };
36 | }
37 | return seed;
38 | })
39 | );
40 | const response = await fetch("/api/seed", {
41 | method: "POST",
42 | headers: { "Content-Type": "application/json" },
43 | body: JSON.stringify({ url }),
44 | });
45 | const data = await response.json();
46 | setSeeded((seeded: any) =>
47 | seeded.map((seed: any) => {
48 | if (seed.url === url) {
49 | return {
50 | ...seed,
51 | seeded: true,
52 | loading: false,
53 | };
54 | }
55 | return seed;
56 | })
57 | );
58 | };
59 |
60 | return (
61 |
62 | {entries.map((entry: any) => {
63 | return (
64 |
65 |
76 |
77 | );
78 | })}
79 |
4 |
20 |
Loading...
21 |