{"id":13596830,"url":"https://github.com/langchain-ai/langchain-nextjs-template","last_synced_at":"2025-05-14T09:06:27.056Z","repository":{"id":184555861,"uuid":"672095858","full_name":"langchain-ai/langchain-nextjs-template","owner":"langchain-ai","description":"LangChain + Next.js starter template","archived":false,"fork":false,"pushed_at":"2025-03-24T22:48:48.000Z","size":25333,"stargazers_count":1857,"open_issues_count":24,"forks_count":408,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-04-11T22:59:01.389Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://langchain-nextjs-template.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/langchain-ai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-28T23:20:05.000Z","updated_at":"2025-04-11T11:37:11.000Z","dependencies_parsed_at":"2023-10-04T13:50:30.012Z","dependency_job_id":"0b2a8939-f0ff-4411-997d-13791efa30f9","html_url":"https://github.com/langchain-ai/langchain-nextjs-template","commit_stats":null,"previous_names":["langchain-ai/langchain-nextjs-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/langchain-ai%2Flangchain-nextjs-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/langchain-ai%2Flangchain-nextjs-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/langchain-ai%2Flangchain-nextjs-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/langchain-ai%2Flangchain-nextjs-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/langchain-ai","download_url":"https://codeload.github.com/langchain-ai/langchain-nextjs-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254110374,"owners_count":22016391,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T16:02:50.486Z","updated_at":"2025-05-14T09:06:27.033Z","avatar_url":"https://github.com/langchain-ai.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","NextJS","🟢 Official LangGraph Projects 🦜","others","By the LangChain Team","Starter Templates","Starter"],"sub_categories":["OpenAI","🟩 Apps \u0026 Agents 📱"],"readme":"# 🦜️🔗 LangChain + Next.js Starter Template\n\n[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/langchain-ai/langchain-nextjs-template)\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flangchain-ai%2Flangchain-nextjs-template)\n\nThis template scaffolds a LangChain.js + Next.js starter app. It showcases how to use and combine LangChain modules for several\nuse cases. Specifically:\n\n- [Simple chat](/app/api/chat/route.ts)\n- [Returning structured output from an LLM call](/app/api/chat/structured_output/route.ts)\n- [Answering complex, multi-step questions with agents](/app/api/chat/agents/route.ts)\n- [Retrieval augmented generation (RAG) with a chain and a vector store](/app/api/chat/retrieval/route.ts)\n- [Retrieval augmented generation (RAG) with an agent and a vector store](/app/api/chat/retrieval_agents/route.ts)\n\nMost of them use Vercel's [AI SDK](https://github.com/vercel-labs/ai) to stream tokens to the client and display the incoming messages.\n\nThe agents use [LangGraph.js](https://langchain-ai.github.io/langgraphjs/), LangChain's framework for building agentic workflows. They use preconfigured helper functions to minimize boilerplate, but you can replace them with custom graphs as desired.\n\nhttps://github.com/user-attachments/assets/e389e4e4-4fb9-4223-a4c2-dc002c8f20d3\n\nIt's free-tier friendly too! Check out the [bundle size stats below](#-bundle-size).\n\nYou can check out a hosted version of this repo here: https://langchain-nextjs-template.vercel.app/\n\n## 🚀 Getting Started\n\nFirst, clone this repo and download it locally.\n\nNext, you'll need to set up environment variables in your repo's `.env.local` file. Copy the `.env.example` file to `.env.local`.\nTo start with the basic examples, you'll just need to add your OpenAI API key.\n\nBecause this app is made to run in serverless Edge functions, make sure you've set the `LANGCHAIN_CALLBACKS_BACKGROUND` environment variable to `false` to ensure tracing finishes if you are using [LangSmith tracing](https://docs.smith.langchain.com/).\n\nNext, install the required packages using your preferred package manager (e.g. `yarn`).\n\nNow you're ready to run the development server:\n\n```bash\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result! Ask the bot something and you'll see a streamed response:\n\n![A streaming conversation between the user and the AI](/public/images/chat-conversation.png)\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\nBackend logic lives in `app/api/chat/route.ts`. From here, you can change the prompt and model, or add other modules and logic.\n\n## 🧱 Structured Output\n\nThe second example shows how to have a model return output according to a specific schema using OpenAI Functions.\nClick the `Structured Output` link in the navbar to try it out:\n\n![A streaming conversation between the user and an AI agent](/public/images/structured-output-conversation.png)\n\nThe chain in this example uses a [popular library called Zod](https://zod.dev) to construct a schema, then formats it in the way OpenAI expects.\nIt then passes that schema as a function into OpenAI and passes a `function_call` parameter to force OpenAI to return arguments in the specified format.\n\nFor more details, [check out this documentation page](https://js.langchain.com/docs/how_to/structured_output).\n\n## 🦜 Agents\n\nTo try out the agent example, you'll need to give the agent access to the internet by populating the `SERPAPI_API_KEY` in `.env.local`.\nHead over to [the SERP API website](https://serpapi.com/) and get an API key if you don't already have one.\n\nYou can then click the `Agent` example and try asking it more complex questions:\n\n![A streaming conversation between the user and an AI agent](/public/images/agent-conversation.png)\n\nThis example uses a [prebuilt LangGraph agent](https://langchain-ai.github.io/langgraphjs/tutorials/quickstart/), but you can customize your own as well.\n\n## 🐶 Retrieval\n\nThe retrieval examples both use Supabase as a vector store. However, you can swap in\n[another supported vector store](https://js.langchain.com/docs/integrations/vectorstores) if preferred by changing\nthe code under `app/api/retrieval/ingest/route.ts`, `app/api/chat/retrieval/route.ts`, and `app/api/chat/retrieval_agents/route.ts`.\n\nFor Supabase, follow [these instructions](https://js.langchain.com/docs/integrations/vectorstores/supabase) to set up your\ndatabase, then get your database URL and private key and paste them into `.env.local`.\n\nYou can then switch to the `Retrieval` and `Retrieval Agent` examples. The default document text is pulled from the LangChain.js retrieval\nuse case docs, but you can change them to whatever text you'd like.\n\nFor a given text, you'll only need to press `Upload` once. Pressing it again will re-ingest the docs, resulting in duplicates.\nYou can clear your Supabase vector store by navigating to the console and running `DELETE FROM documents;`.\n\nAfter splitting, embedding, and uploading some text, you're ready to ask questions!\n\nFor more info on retrieval chains, [see this page](https://js.langchain.com/docs/tutorials/rag).\nThe specific variant of the conversational retrieval chain used here is composed using LangChain Expression Language, which you can\n[read more about here](https://js.langchain.com/docs/how_to/qa_sources/). This chain example will also return cited sources\nvia header in addition to the streaming response.\n\nFor more info on retrieval agents, [see this page](https://langchain-ai.github.io/langgraphjs/tutorials/rag/langgraph_agentic_rag/).\n\n## 📦 Bundle size\n\nThe bundle size for LangChain itself is quite small. After compression and chunk splitting, for the RAG use case LangChain uses 37.32 KB of code space (as of [@langchain/core 0.1.15](https://npmjs.com/package/@langchain/core)), which is less than 4% of the total Vercel free tier edge function alottment of 1 MB:\n\n![](/public/images/bundle-size.png)\n\nThis package has [@next/bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer) set up by default - you can explore the bundle size interactively by running:\n\n```bash\n$ ANALYZE=true yarn build\n```\n\n## 📚 Learn More\n\nThe example chains in the `app/api/chat/route.ts` and `app/api/chat/retrieval/route.ts` files use\n[LangChain Expression Language](https://js.langchain.com/docs/concepts#langchain-expression-language) to\ncompose different LangChain.js modules together. You can integrate other retrievers, agents, preconfigured chains, and more too, though keep in mind\n`HttpResponseOutputParser` is meant to be used directly with model output.\n\nTo learn more about what you can do with LangChain.js, check out the docs here:\n\n- https://js.langchain.com/docs/\n\n## ▲ Deploy on Vercel\n\nWhen ready, you can deploy your app on the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme).\n\nCheck out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n\n## Thank You!\n\nThanks for reading! If you have any questions or comments, reach out to us on Twitter\n[@LangChainAI](https://twitter.com/langchainai), or [click here to join our Discord server](https://discord.gg/langchain).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flangchain-ai%2Flangchain-nextjs-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flangchain-ai%2Flangchain-nextjs-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flangchain-ai%2Flangchain-nextjs-template/lists"}