This template demonstrates a simple chatbot implemented using LangGraph.js, showing how to get started with LangGraph Server and using LangGraph Studio, a visual debugging IDE.
The core logic, defined in src/agent/graph.ts
, showcases a straightforward chatbot that responds to user queries while maintaining context from previous messages.
The simple chatbot:
- Takes a user message as input
- Maintains a history of the conversation
- Returns a placeholder response, updating the conversation history
This template provides a foundation that can be easily customized and extended to create more complex conversational agents.
- Install the LangGraph CLI.
npx @langchain/langgraph-cli
- Create a
.env
file. While this starter app does not require any secrets, if you later decide to connect to LLM providers and other integrations, you will likely need to provide API keys.
cp .env.example .env
- If desired, add your LangSmith API key in your
.env
file.
LANGSMITH_API_KEY=lsv2...
- Install dependencies
yarn install
- Customize the code as needed.
- Start the LangGraph Server.
npx @langchain/langgraph-cli dev
For more information on getting started with LangGraph Server, see here.
- Add an LLM call: You can select and install a chat model wrapper from the LangChain.js ecosystem, or use LangGraph.js without LangChain.js.
- Extend the graph: The core logic of the chatbot is defined in graph.ts. You can modify this file to add new nodes, edges, or change the flow of the conversation.
You can also extend this template by:
- Adding custom tools or functions to enhance the chatbot's capabilities.
- Implementing additional logic for handling specific types of user queries or tasks.
- Add retrieval-augmented generation (RAG) capabilities by integrating external APIs or databases to provide more customized responses.
While iterating on your graph, you can edit past state and rerun your app from previous states to debug specific nodes. Local changes will be automatically applied via hot reload. Try experimenting with:
- Modifying the system prompt to give your chatbot a unique personality.
- Adding new nodes to the graph for more complex conversation flows.
- Implementing conditional logic to handle different types of user inputs.
Follow-up requests will be appended to the same thread. You can create an entirely new thread, clearing previous history, using the +
button in the top right.
For more advanced features and examples, refer to the LangGraph.js documentation. These resources can help you adapt this template for your specific use case and build more sophisticated conversational agents.
LangGraph Studio also integrates with LangSmith for more in-depth tracing and collaboration with teammates, allowing you to analyze and optimize your chatbot's performance.