├── .env.local.example
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── README.md
├── components
├── layout.tsx
└── ui
│ └── LoadingDots.tsx
├── config
└── pinecone.ts
├── next.config.js
├── package.json
├── pages
├── _app.tsx
├── _document.tsx
├── api
│ └── chat.ts
└── index.tsx
├── pnpm-lock.yaml
├── postcss.config.cjs
├── public
└── favicon.ico
├── scripts
└── ingest-data.ts
├── styles
├── base.css
├── chrome-bug.css
└── loading-dots.module.css
├── tailwind.config.cjs
├── tsconfig.json
├── types
└── chat.ts
├── utils
├── helpers.ts
├── openai-client.ts
└── pinecone-client.ts
└── visual-image
└── notion-chatgpt-langchain-diagram.png
/.env.local.example:
--------------------------------------------------------------------------------
1 | OPENAI_API_KEY=
2 |
3 | PINECONE_API_KEY=your_api_key
4 | PINECONE_ENVIRONMENT=your_environment
5 |
6 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/.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 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 | .env
31 |
32 | # vercel
33 | .vercel
34 |
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 |
39 | #Notion_db
40 | /Notion_DB
41 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "all",
3 | "singleQuote": true,
4 | "printWidth": 80,
5 | "tabWidth": 2
6 | }
7 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # A ChatBot for Your Notion Knowledge Base
2 |
3 | Create a simple chatbot for question-answering your Notion knowledge base/docs using Openai, Typescript, LangChain and Pinecone.
4 |
5 | [Tutorial video](https://www.youtube.com/watch?v=prbloUGlvLE)
6 |
7 | ## 📊 Example Data
8 |
9 | This repo uses a Notion template of the support docs from [cron](https://cronhq.notion.site/Cron-Calendar-5625be54feac4e13a75b10271b65ddb7) - a next-generation calendar for professionals and teams
10 |
11 | ## Development
12 |
13 | 1. Clone the repo
14 | 2. Install packages
15 |
16 | ```
17 | pnpm install
18 | ```
19 |
20 | 3. Set up your `.env` file
21 |
22 | - Copy `.env.example` into `.env`
23 | Your `.env` file should look like this:
24 |
25 | ```
26 | OPENAI_API_KEY=
27 |
28 | PINECONE_API_KEY=
29 | PINECONE_ENVIRONMENT=
30 |
31 | ```
32 |
33 | - Visit [openai](https://help.openai.com/en/articles/4936850-where-do-i-find-my-secret-api-key) and [pinecone](https://www.pinecone.io/) to retrieve API keys and insert into your `.env` file.
34 |
35 | 4. In the `config` folder, go into `pinecone-index.ts` and replace `PINECONE_INDEX_NAME` with the index name in your pinecone dashboard.
36 |
37 | ## 🧑 Instructions for ingesting your own dataset
38 |
39 | Export your dataset from Notion. You can do this by clicking on the three dots in the upper right hand corner and then clicking `Export`.
40 |
41 | Follow these Notion instructions: [Exporting your content](https://www.notion.so/help/export-your-content)
42 |
43 | When exporting, make sure to select the `Markdown & CSV` format option.
44 |
45 | Select `Everything`, `include subpages` and `Create folders for subpages.` Then click `Export`
46 |
47 | This will produce a `.zip` file in your Downloads folder. Move the `.zip` file into the root of this repository.
48 |
49 | Either unzip the folder using 7-Zip (or WinZip) or run the following Unix/Linux command to unzip the zip file (replace the `Export...` with your own file name).
50 |
51 | ```shell
52 | unzip Export-d3adfe0f-3131-4bf3-8987-a52017fc1bae.zip -d Notion_DB
53 | ```
54 |
55 | You should see a `Notion_DB` folder in your root folder that contains markdown files and folders of your knowledge base.
56 |
57 | ## Ingest data
58 |
59 | Now we need to `ingest` your docs. In **very** simple terms, ingesting is the process of converting your docs into numbers (embedding) that can be easily stored and analyzed for similarity searches.
60 |
61 | ```bash
62 | npm run ingest
63 |
64 | ```
65 |
66 | ## Running the app
67 |
68 | Run your local dev environment `npm run dev`.
69 |
70 | Use the search bar to ask a question about your docs.
71 |
72 | Simple.
73 |
74 | ## Deployment
75 |
76 | You can deploy this app to the cloud with [Vercel](https://vercel.com) ([Documentation](https://nextjs.org/docs/deployment)).
77 |
78 | ## Credit
79 |
80 | This repo is inspired by [notion-qa](https://github.com/hwchase17/notion-qa)
81 |
--------------------------------------------------------------------------------
/components/layout.tsx:
--------------------------------------------------------------------------------
1 | interface LayoutProps {
2 | children?: React.ReactNode;
3 | }
4 |
5 | export default function Layout({ children }: LayoutProps) {
6 | return (
7 |
8 |
17 |
18 |
19 | {children}
20 |
21 |
22 |
7 |