Add README

This commit is contained in:
Tat Dat Duong
2025-02-18 19:41:47 +01:00
parent 3a2073e76e
commit 7448b33075
3 changed files with 32 additions and 70 deletions

View File

@@ -1,50 +1,12 @@
# React + TypeScript + Vite # agent-ui demo
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. ## Setup
Currently, two official plugins are available: 1. Clone `langgraph` repo and `langgraphjs-api` repo.
1. Checkout the following branches:
- `langgraph`: `dqbd/sdk-js-react-ui`
- `langgraphjs-api`: `dqbd/api-ui`
1. Run `npx packserve -d ../langgraph/libs/sdk-js ../langgraphjs-api/libs/langgraph-api ../langgraphjs-api/libs/langgraph-cli`
1. Run `pnpm install` while running the `packserve` server
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh TODO: will create RC packages down the line, but just too lazy for now.
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
```js
// eslint.config.js
import react from 'eslint-plugin-react'
export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
})
```

View File

@@ -26,9 +26,9 @@
"zod": "^3.24.2" "zod": "^3.24.2"
}, },
"resolutions": { "resolutions": {
"@langchain/langgraph-api": "http://localhost:3123/16/@langchain/langgraph-api", "@langchain/langgraph-api": "http://localhost:3123/17/@langchain/langgraph-api",
"@langchain/langgraph-cli": "http://localhost:3123/16/@langchain/langgraph-cli", "@langchain/langgraph-cli": "http://localhost:3123/17/@langchain/langgraph-cli",
"@langchain/langgraph-sdk": "http://localhost:3123/16/@langchain/langgraph-sdk" "@langchain/langgraph-sdk": "http://localhost:3123/17/@langchain/langgraph-sdk"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.19.0", "@eslint/js": "^9.19.0",

40
pnpm-lock.yaml generated
View File

@@ -5,9 +5,9 @@ settings:
excludeLinksFromLockfile: false excludeLinksFromLockfile: false
overrides: overrides:
'@langchain/langgraph-api': http://localhost:3123/16/@langchain/langgraph-api '@langchain/langgraph-api': http://localhost:3123/17/@langchain/langgraph-api
'@langchain/langgraph-cli': http://localhost:3123/16/@langchain/langgraph-cli '@langchain/langgraph-cli': http://localhost:3123/17/@langchain/langgraph-cli
'@langchain/langgraph-sdk': http://localhost:3123/16/@langchain/langgraph-sdk '@langchain/langgraph-sdk': http://localhost:3123/17/@langchain/langgraph-sdk
importers: importers:
@@ -20,14 +20,14 @@ importers:
specifier: ^0.2.46 specifier: ^0.2.46
version: 0.2.46(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0) version: 0.2.46(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0)
'@langchain/langgraph-api': '@langchain/langgraph-api':
specifier: http://localhost:3123/16/@langchain/langgraph-api specifier: http://localhost:3123/17/@langchain/langgraph-api
version: http://localhost:3123/16/@langchain/langgraph-api(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(@langchain/langgraph-checkpoint@0.0.15(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2))))(@langchain/langgraph@0.2.46(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0))(openai@4.85.1(zod@3.24.2))(typescript@5.7.3) version: http://localhost:3123/17/@langchain/langgraph-api(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(@langchain/langgraph-checkpoint@0.0.15(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2))))(@langchain/langgraph@0.2.46(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0))(openai@4.85.1(zod@3.24.2))(typescript@5.7.3)
'@langchain/langgraph-cli': '@langchain/langgraph-cli':
specifier: http://localhost:3123/16/@langchain/langgraph-cli specifier: http://localhost:3123/17/@langchain/langgraph-cli
version: http://localhost:3123/16/@langchain/langgraph-cli(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(@langchain/langgraph-checkpoint@0.0.15(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2))))(@langchain/langgraph@0.2.46(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0))(openai@4.85.1(zod@3.24.2))(typescript@5.7.3) version: http://localhost:3123/17/@langchain/langgraph-cli(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(@langchain/langgraph-checkpoint@0.0.15(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2))))(@langchain/langgraph@0.2.46(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0))(openai@4.85.1(zod@3.24.2))(typescript@5.7.3)
'@langchain/langgraph-sdk': '@langchain/langgraph-sdk':
specifier: http://localhost:3123/16/@langchain/langgraph-sdk specifier: http://localhost:3123/17/@langchain/langgraph-sdk
version: http://localhost:3123/16/@langchain/langgraph-sdk(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0) version: http://localhost:3123/17/@langchain/langgraph-sdk(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0)
'@langchain/openai': '@langchain/openai':
specifier: ^0.4.4 specifier: ^0.4.4
version: 0.4.4(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2))) version: 0.4.4(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))
@@ -735,8 +735,8 @@ packages:
resolution: {integrity: sha512-RGhJOTzJv6H+3veBAnDlH2KXuZ68CXMEg6B6DPTzL3IGDyd+vLxXG4FIttzUwjdeQKjrrFBwlXpJDl7bkoApzQ==} resolution: {integrity: sha512-RGhJOTzJv6H+3veBAnDlH2KXuZ68CXMEg6B6DPTzL3IGDyd+vLxXG4FIttzUwjdeQKjrrFBwlXpJDl7bkoApzQ==}
engines: {node: '>=18'} engines: {node: '>=18'}
'@langchain/langgraph-api@http://localhost:3123/16/@langchain/langgraph-api': '@langchain/langgraph-api@http://localhost:3123/17/@langchain/langgraph-api':
resolution: {tarball: http://localhost:3123/16/@langchain/langgraph-api} resolution: {tarball: http://localhost:3123/17/@langchain/langgraph-api}
version: 0.0.10 version: 0.0.10
engines: {node: '>=18'} engines: {node: '>=18'}
peerDependencies: peerDependencies:
@@ -751,14 +751,14 @@ packages:
peerDependencies: peerDependencies:
'@langchain/core': '>=0.2.31 <0.4.0' '@langchain/core': '>=0.2.31 <0.4.0'
'@langchain/langgraph-cli@http://localhost:3123/16/@langchain/langgraph-cli': '@langchain/langgraph-cli@http://localhost:3123/17/@langchain/langgraph-cli':
resolution: {tarball: http://localhost:3123/16/@langchain/langgraph-cli} resolution: {tarball: http://localhost:3123/17/@langchain/langgraph-cli}
version: 0.0.10 version: 0.0.10
engines: {node: '>=18'} engines: {node: '>=18'}
hasBin: true hasBin: true
'@langchain/langgraph-sdk@http://localhost:3123/16/@langchain/langgraph-sdk': '@langchain/langgraph-sdk@http://localhost:3123/17/@langchain/langgraph-sdk':
resolution: {tarball: http://localhost:3123/16/@langchain/langgraph-sdk} resolution: {tarball: http://localhost:3123/17/@langchain/langgraph-sdk}
version: 0.0.42 version: 0.0.42
peerDependencies: peerDependencies:
'@langchain/core': '>=0.2.31 <0.4.0' '@langchain/core': '>=0.2.31 <0.4.0'
@@ -2866,7 +2866,7 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- openai - openai
'@langchain/langgraph-api@http://localhost:3123/16/@langchain/langgraph-api(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(@langchain/langgraph-checkpoint@0.0.15(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2))))(@langchain/langgraph@0.2.46(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0))(openai@4.85.1(zod@3.24.2))(typescript@5.7.3)': '@langchain/langgraph-api@http://localhost:3123/17/@langchain/langgraph-api(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(@langchain/langgraph-checkpoint@0.0.15(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2))))(@langchain/langgraph@0.2.46(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0))(openai@4.85.1(zod@3.24.2))(typescript@5.7.3)':
dependencies: dependencies:
'@babel/code-frame': 7.26.2 '@babel/code-frame': 7.26.2
'@hono/node-server': 1.13.8(hono@4.7.1) '@hono/node-server': 1.13.8(hono@4.7.1)
@@ -2902,11 +2902,11 @@ snapshots:
'@langchain/core': 0.3.40(openai@4.85.1(zod@3.24.2)) '@langchain/core': 0.3.40(openai@4.85.1(zod@3.24.2))
uuid: 10.0.0 uuid: 10.0.0
'@langchain/langgraph-cli@http://localhost:3123/16/@langchain/langgraph-cli(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(@langchain/langgraph-checkpoint@0.0.15(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2))))(@langchain/langgraph@0.2.46(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0))(openai@4.85.1(zod@3.24.2))(typescript@5.7.3)': '@langchain/langgraph-cli@http://localhost:3123/17/@langchain/langgraph-cli(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(@langchain/langgraph-checkpoint@0.0.15(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2))))(@langchain/langgraph@0.2.46(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0))(openai@4.85.1(zod@3.24.2))(typescript@5.7.3)':
dependencies: dependencies:
'@babel/code-frame': 7.26.2 '@babel/code-frame': 7.26.2
'@commander-js/extra-typings': 13.1.0(commander@13.1.0) '@commander-js/extra-typings': 13.1.0(commander@13.1.0)
'@langchain/langgraph-api': http://localhost:3123/16/@langchain/langgraph-api(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(@langchain/langgraph-checkpoint@0.0.15(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2))))(@langchain/langgraph@0.2.46(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0))(openai@4.85.1(zod@3.24.2))(typescript@5.7.3) '@langchain/langgraph-api': http://localhost:3123/17/@langchain/langgraph-api(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(@langchain/langgraph-checkpoint@0.0.15(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2))))(@langchain/langgraph@0.2.46(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0))(openai@4.85.1(zod@3.24.2))(typescript@5.7.3)
chokidar: 4.0.3 chokidar: 4.0.3
commander: 13.1.0 commander: 13.1.0
dedent: 1.5.3 dedent: 1.5.3
@@ -2931,7 +2931,7 @@ snapshots:
- supports-color - supports-color
- typescript - typescript
'@langchain/langgraph-sdk@http://localhost:3123/16/@langchain/langgraph-sdk(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0)': '@langchain/langgraph-sdk@http://localhost:3123/17/@langchain/langgraph-sdk(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0)':
dependencies: dependencies:
'@langchain/core': 0.3.40(openai@4.85.1(zod@3.24.2)) '@langchain/core': 0.3.40(openai@4.85.1(zod@3.24.2))
'@types/json-schema': 7.0.15 '@types/json-schema': 7.0.15
@@ -2944,7 +2944,7 @@ snapshots:
dependencies: dependencies:
'@langchain/core': 0.3.40(openai@4.85.1(zod@3.24.2)) '@langchain/core': 0.3.40(openai@4.85.1(zod@3.24.2))
'@langchain/langgraph-checkpoint': 0.0.15(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2))) '@langchain/langgraph-checkpoint': 0.0.15(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))
'@langchain/langgraph-sdk': http://localhost:3123/16/@langchain/langgraph-sdk(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0) '@langchain/langgraph-sdk': http://localhost:3123/17/@langchain/langgraph-sdk(@langchain/core@0.3.40(openai@4.85.1(zod@3.24.2)))(react@19.0.0)
uuid: 10.0.0 uuid: 10.0.0
zod: 3.24.2 zod: 3.24.2
transitivePeerDependencies: transitivePeerDependencies: