# LangChain: OpenAI in JavaScript with React.js & Next.js

DevFeed: [LangChain: OpenAI in JavaScript with React.js & Next.js](<https://devfeed.tech/articles/langchain-openai-in-javascript-with-react-js-next-js-18942.md>)

Original publisher: [Read original article](<https://www.robinwieruch.de/langchain-javascript-openai/>)

Author: Robin Wieruch

Published: 2025-01-13T06:50:46Z

Content type: tutorial

Language: en

Sources: [Robin Wieruch](<https://devfeed.tech/sources/robin-wieruch.md>)

Topics: [LangChain](<https://devfeed.tech/topics/langchain.md>), [OpenAI](<https://devfeed.tech/topics/openai.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Next.js](<https://devfeed.tech/topics/next-js.md>), [React](<https://devfeed.tech/topics/react.md>), [Chat Bot](<https://devfeed.tech/topics/chatbot.md>), [API](<https://devfeed.tech/topics/api.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [backend](<https://devfeed.tech/tags/backend.md>), [environment-variables](<https://devfeed.tech/tags/environment-variables.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [langchain](<https://devfeed.tech/tags/langchain.md>), [langchain-javascript-openai](<https://devfeed.tech/tags/langchain-javascript-openai.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [openai](<https://devfeed.tech/tags/openai.md>), [react](<https://devfeed.tech/tags/react.md>)

## AI overview

A step-by-step tutorial for building a chatbot with LangChain in JavaScript, using OpenAI's API and Next.js with React for the frontend and backend. It covers the component interface, prompt submission, server-side request handling, ChatOpenAI integration, package installation, and API-key storage with environment variables.

## Source excerpt

How to: OpenAI in JavaScript with LangChain. A step by step example on how to use the OpenAI API in JavaScript with LangChain ...