{"id":18104449,"url":"https://github.com/springmt/langchain-demo","last_synced_at":"2025-08-09T00:03:27.168Z","repository":{"id":235030954,"uuid":"789936467","full_name":"SpringMT/langchain-demo","owner":"SpringMT","description":null,"archived":false,"fork":false,"pushed_at":"2024-04-22T00:11:24.000Z","size":9099,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-12T11:51:29.420Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/SpringMT.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}},"created_at":"2024-04-22T00:11:21.000Z","updated_at":"2024-04-22T00:11:28.000Z","dependencies_parsed_at":"2024-04-22T03:28:15.072Z","dependency_job_id":null,"html_url":"https://github.com/SpringMT/langchain-demo","commit_stats":null,"previous_names":["springmt/langchain-demo"],"tags_count":0,"template":false,"template_full_name":"langchain-ai/langchain-nextjs-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SpringMT%2Flangchain-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SpringMT%2Flangchain-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SpringMT%2Flangchain-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SpringMT%2Flangchain-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SpringMT","download_url":"https://codeload.github.com/SpringMT/langchain-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441057,"owners_count":20939239,"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-10-31T22:14:52.830Z","updated_at":"2025-04-06T06:16:17.080Z","avatar_url":"https://github.com/SpringMT.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"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\n![Demo GIF](/public/images/agent-convo.gif)\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\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/modules/chains/popular/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 the OpenAI Functions agent, but there are a few other options you can try as well.\nSee [this documentation page for more details](https://js.langchain.com/docs/modules/agents/agent_types/).\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/modules/data_connection/vectorstores/integrations/) 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/modules/data_connection/vectorstores/integrations/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\n![A streaming conversation between the user and an AI retrieval chain](/public/images/retrieval-chain-conversation.png)\n\n![A streaming conversation between the user and an AI retrieval agent](/public/images/retrieval-agent-conversation.png)\n\nFor more info on retrieval chains, [see this page](https://js.langchain.com/docs/use_cases/question_answering/).\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/guides/expression_language/cookbook). 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://js.langchain.com/docs/use_cases/question_answering/conversational_retrieval_agents).\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/guides/expression_language/interface) 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%2Fspringmt%2Flangchain-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspringmt%2Flangchain-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringmt%2Flangchain-demo/lists"}