zahidkhawaja / langchain-chat-nextjs

Next.js frontend for LangChain Chat.

LangChain Chat - Next.js

Getting started 🚀

1. Clone this repo!
2. Install dependencies: npm install
3. Run the development server: npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/chat. This endpoint can be edited in pages/api/chat.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

🦜🔗 Powered by LangChain

• LangChain backend implementation can be found here.

• Read more on the LangChain blog.

• Deployed at chat.langchain.dev. Feel free to reach out to Zahid if you need anything!

langchain-chat-nextjs's Issues

Error after following install instructions. What is process.env.LCC_TOKEN and what do I need to set it to?

Got this error when trying to run this on my own machine:

error - TypeError: Failed to parse URL from undefined
at Object.fetch (node:internal/deps/undici/undici:12789:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async WEBPACK_DEFAULT_EXPORT (webpack-internal:///(api)/./pages/api/chat.js:6:22)
at async Object.apiResolver (/Users/zbadgerm/Desktop/projects/chatGPT/langChain/langchain-chat-nextjs/node_modules/next/dist/server/api-utils/node.js:363:9)
at async DevServer.runApi (/Users/zbadgerm/Desktop/projects/chatGPT/langChain/langchain-chat-nextjs/node_modules/next/dist/server/next-server.js:487:9)
... 4 lines matching cause stack trace ...
at async DevServer.handleRequest (/Users/zbadgerm/Desktop/projects/chatGPT/langChain/langchain-chat-nextjs/node_modules/next/dist/server/base-server.js:322:20) {
page: '/api/chat',
[cause]: TypeError [ERR_INVALID_URL]: Invalid URL
at new NodeError (node:internal/errors:399:5)
at URL.onParseError (node:internal/url:565:9)
at new URL (node:internal/url:645:5)
at new Request (node:internal/deps/undici/undici:6947:25)
at fetch2 (node:internal/deps/undici/undici:11930:25)
at Object.fetch (node:internal/deps/undici/undici:12787:18)
at fetch (node:internal/process/pre_execution:241:25)
at WEBPACK_DEFAULT_EXPORT (webpack-internal:///(api)/./pages/api/chat.js:6:28)
at Object.apiResolver (/Users/zbadgerm/Desktop/projects/chatGPT/langChain/langchain-chat-nextjs/node_modules/next/dist/server/api-utils/node.js:363:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async DevServer.runApi (/Users/zbadgerm/Desktop/projects/chatGPT/langChain/langchain-chat-nextjs/node_modules/next/dist/server/next-server.js:487:9)
at async Object.fn (/Users/zbadgerm/Desktop/projects/chatGPT/langChain/langchain-chat-nextjs/node_modules/next/dist/server/next-server.js:749:37)
at async Router.execute (/Users/zbadgerm/Desktop/projects/chatGPT/langChain/langchain-chat-nextjs/node_modules/next/dist/server/router.js:253:36)
at async DevServer.run (/Users/zbadgerm/Desktop/projects/chatGPT/langChain/langchain-chat-nextjs/node_modules/next/dist/server/base-server.js:384:29)
at async DevServer.run (/Users/zbadgerm/Desktop/projects/chatGPT/langChain/langchain-chat-nextjs/node_modules/next/dist/server/dev/next-dev-server.js:741:20)
at async DevServer.handleRequest (/Users/zbadgerm/Desktop/projects/chatGPT/langChain/langchain-chat-nextjs/node_modules/next/dist/server/base-server.js:322:20) {
input: 'undefined',
code: 'ERR_INVALID_URL'
}
}

Any help would be appreciated. Trying to make my own little chatbot.

chatbot not working

I just get an empty response

Here's the console output:

Oops! There seems to be an error. Please try again.

.env example or description

Could someone provide a template/structure for the .env file? It seems like we need: LCC_ENDPOINT_URL and LCC_TOKEN which I don't know where to find.

TypeError: Cannot read properties of null (reading 'useContext')

I'm encountering an "Invalid hook call" error in my Next.js application, specifically a server error "TypeError: Cannot read properties of null (reading 'useContext')".

The warning I'm getting is

`Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)

2. You might be breaking the Rules of Hooks

3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
   TypeError: Cannot read properties of null (reading 'useContext')
   at Object.useContext (/Users/me/repos/programming-sandbox/langchain:embeddings/langchain-chat-nextjs/node_modules/react/cjs/react.development.js:1618:21)`

   To replicate this issue I just ran "npm run dev" after installing the packages with "npm install".

   I have the same versions of React & react DOM (18.2.0) and node v19.4.0

   Also there is nowhere in the code where useContext is used.

   This could be a noob question so I apologize in advance if it is.