Building an Agent-Based Chatbot with Langchain and Next.js in 15 Minutes

Build a custom chatbot without the need to embed all the data + vector database. In this example I use the OpenAI function agent in language to show you how to can build out a chatbot that is based on your own custom functions + data sources.
Links:
github.com/vercel-labs/ai/tre...
smith.langchain.com/projects
platform.openai.com/account/a...
Github Repo: github.com/developersdigest/A...

[@DevelopersDigest]

Building A Chatbot with Langchain and Upstash Redis in Next js kzbin.info/www/bejne/naG7iXysm7h2qtE

[@youssefmahboub7981]

that's amazing, we need more langchain and next js videos ... thank you man

[@DevelopersDigest]

Thank you, more to come on this front from my end. Cheers 🥂

[@douglasmarzean3838]

I love anything Nextjs and langchain. These are rare and valued very much. Hopefully will get access to LangSmith soon.

[@DevelopersDigest]

I appreciate you saying that Douglas thank you. 🙏

[@PrincepsPolycap]

Thanks for sharing Next.js Lanchain tutorials!

[@DevelopersDigest]

You’re welcome! Thanks for watching! 😀

[@stonedizzleful]

Another fantastic video. Thank you!

[@DevelopersDigest]

Thank you Liam

[@justinM3610]

Thank you so much for this video! Do you have a video of connecting this to the frontend?

[@DevelopersDigest]

If you are looking for a more involved and similar example with a front check out my Anthropic Claude clone in next.js

[@Frankazolr]

Have you found any way to achieve the streaming of the Agent response to the Frond end in Node?

[@azzeddine1]

We want a clear explanation of how to create a chatbot on a WordPress website from scratch

[@DevelopersDigest]

Eventually I am going to try and build something out for PHP and Wordpress developers!

[@azzeddine1]

@@DevelopersDigest I hope the explanation is clear and from scratch, waiting 💙

[@oz4549]

I'm wondering how the dynamic structure tool work under the hood. it seems like it can achieve function calling from openai and one can essentially extract structured output from it. I have tried it in one project where the output of the first tool is received in the dynamic tool and I almost always get the correct structure. I know the agent is openai-functions but if I change it to ReAct will that mean we don't actually get this structured output mapped correctly?

[@DevelopersDigest]

Thank you for a great question. I have not tried this yet, however, it looks like if you are looking to use a react agent that requires arguments more than a single string, the compatibility may be limited right now. You might find the link below 👇 helpful, I was just reading through this. I will add to my list of videos look to create chat bot with reAct and structured tools in an upcoming video. I would love to explore this idea more. Cheers! 🥂 blog.langchain.dev/structured-tools/

[@oz4549]

​​@@DevelopersDigestThanks for taking the time to reply and for the reference link. I'm not actually intended to use it with a ReAct agent. I was trying to understand how this dynamic structure tool can almost always guarantee the exact input of the function as defined by the zod schema because that's exactly what fucntion calling is able to do using vanilla openai sdk. So i was wondering if they implement this behaviour under the hood. I tried the output parser at some point but it was not as reliable as the vanilla openai function calling which is what I end up using most of the time if I want structured output for the front-end.

[@joshbane1]

Is this possible with open source models?

[@DevelopersDigest]

You can use other agent types in langchain with open source models to accomplish something similar. I have seen only one implementation of open source of the OpenAI function calling api. I hope this will be more prevalent and be easy to have a function request wrapper for LLMs APIs that can reliably provided valid schema to arguments. I have found OpenAI function calling to be the most robust but open source does seem to be moving fast and I wouldn’t be surprised in the coming weeks or months to see more crop up

[@asepmulyana9085]

Hi, thanks for the video. I can't register new account on langsmith.

[@DevelopersDigest]

Langsmith is still in beta, you will have to request access! Cheers 🥂

[@stefanomartell8413]

Can you use your own document as a source with this method? Say a .txt, .pdf etc

[@DevelopersDigest]

This is not a replacement for creating embedding and creating vectors, but it can be complimentary. I will make another video where I do a mixed example and dive into how it can compliment one another. If interested, stay tuned! 🙂

[@stonedizzleful]

@@DevelopersDigest Yes I'd be super keen to see this. Supabase pgvector if possible 🙂

[@altered.thought]

Hi there, I tried reaching you at your Gmail account from your website, but the email bounced back. Could you please let me know your preferred channel for chatting? Thank you! Best regards,

[@DevelopersDigest]

That one is active, there is also one under details here which is an alternative. www.youtube.com/@DevelopersDigest/about Cheers

[@hiranga]

Is there a duckduckgo tool?

[@DevelopersDigest]

You should be able to with the serp tool js.langchain.com/docs/api/tools/classes/SerpAPI serpapi.com/duckduckgo-search-api 🥂 Cheers!