wehub-resource-sync
e30e75b5d4
Changesets / Create Version PR (push) Has been cancelled
Deploy Shadcn Registry / Deploy Production (push) Has been cancelled
Template Metrics / LOC + Bundle Size (push) Has been cancelled
Code Quality / Oxlint + Oxfmt (push) Has been cancelled
Code Quality / Template Sync (push) Has been cancelled
Code Quality / Build Changed Packages (push) Has been cancelled
Code Quality / Test Changed Packages (push) Has been cancelled
Deploy Expo Example / Deploy Production (push) Has been cancelled
Deploy Ink Example / Deploy Production (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.12) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Has been cancelled
46 lines
1.3 KiB
Markdown
46 lines
1.3 KiB
Markdown
# LangGraph Integration
|
|
|
|
[Hosted Demo](https://assistant-ui-langgraph.vercel.app/)
|
|
|
|
This example demonstrates how to use LangChain LangGraph with assistant-ui. It is meant to be used with the backend found at LangGraph's Stockbroker example: https://github.com/bracesproul/langgraphjs-examples/tree/main/stockbroker
|
|
|
|
## Quick Start
|
|
|
|
### Using CLI (Recommended)
|
|
|
|
```bash
|
|
npx assistant-ui@latest create my-app --example with-langgraph
|
|
cd my-app
|
|
```
|
|
|
|
### Environment Variables
|
|
|
|
Create `.env.local`:
|
|
|
|
```
|
|
LANGGRAPH_API_URL=http://localhost:2024
|
|
LANGCHAIN_API_KEY=
|
|
NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=stockbroker
|
|
```
|
|
|
|
`LANGGRAPH_API_URL` is the LangGraph deployment URL the bundled `/api/[..._path]` proxy fetches from. `LANGCHAIN_API_KEY` is forwarded as `x-api-key` and can be blank for an unauthenticated dev server. `NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID` is the graph id (a key under `graphs` in your `langgraph.json`).
|
|
|
|
### Run
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
## Features
|
|
|
|
- LangGraph agent integration via `@assistant-ui/react-langchain`
|
|
- Thread list for conversation management
|
|
- Custom tool UI for stock price snapshots
|
|
- Custom tool UI for stock purchases
|
|
|
|
## Related Documentation
|
|
|
|
- [assistant-ui Documentation](https://www.assistant-ui.com/docs)
|
|
- [LangGraph Integration Guide](https://www.assistant-ui.com/docs/runtimes/langgraph)
|