feat: add langchain project and langchainjs wire-up #7

gomesalexandre · 2025-04-30T06:55:36Z

⚠️ Make sure to keep the default merge option here, not squash and merge:

Description

This adds langchain as a separate project, taken from https://github.com/gomesalexandre/shapeshift-langchainjs
Also

adds utils and tools libs (see https://nx.dev/concepts/decisions/folder-structure / https://nx.dev/nx-api/js/generators/library)
runs nx format doing some cargo fmt style lint on the whole project
removes e2e from CI (we're pretty much not testing anything yet so no point to get this to run and put some heavy load on CI for no reason if we don't, which we may never!)

Notes:

this excludes it from CI for the time being, as we'll need to tweak a few things in CI world to make this happy.
this only adds it as a separate project for now - will give a go to integrating this in agent in a follow-up, the idea would be to share tools/libs across nx projects, and to have two instances of langchain, one which is is its own project for debug/chat UI purposes, and the other which would live as a web environment langchainjs and consume the same tools.

Since there is a lot of boilerplate, here is the files you want to explicitly look at, mainly:

apps/langchain/src/agent/graph.ts - the agent graph for the agent running as a dedicated langgraph project. Don't focus on agent/tool logic there, it exists just as a PoC for now.
apps/agentic-chat/src/lib/langchain.ts - the in-browser agent i.e the one that's actually consumed by the app
/tools - agentic tools as a nx utils package (bebop rate and tokens search with portals), shared between the agentic standalone app and the agentic chat
/utils - various utils as a nx utils package (BN utils for now), shared between the agentic standalone app and the agentic chat

Issue

closes Set up LangChain #2

Testing

yarn
Build libs (not sure this is required, but doesn't hurt to) with npx nx build @agentic-chat/utils && npx nx build @agentic-chat/tools
cp .env.example .env and populate Portals and OpenAPI API keys

Langgraph app

npx nx run langchain:dev
Go to https://agentchat.vercel.app/ and enjoy the chat UI!

Chat UI

npx nx serve agentic-chat

…ift-langchainjs

nx-cloud · 2025-04-30T06:59:17Z

View your CI Pipeline Execution ↗ for commit b0c51ef.

Command	Status	Duration	Result
`nx affected -t lint test build`	✅ Succeeded	3s	View ↗

☁️ Nx Cloud last updated this comment at 2025-05-12 07:01:46 UTC

apps/langchain/.dockerignore

.github/workflows/ci.yml

apps/agentic-chat/src/components/chat-message-list.tsx

.github/workflows/ci.yml

This reverts commit 4fd4f40.

gomesalexandre · 2025-04-30T20:42:01Z

apps/agentic-chat/src/components/chat.tsx

+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const handleSendMessage = async (content: string) => {
+    try {
+      setIsProcessing(true);
+
+      // Add user message
+      const userMessage: Message = {
+        id: (messages.length + 1).toString(),
+        sender: 'user',
+        content,
+      };
+      setMessages((prev) => [...prev, userMessage]);
+
+      // Process message through LangGraph
+      const aiResponse = await runMessageGraph(content);

-  const handleSendMessage = (content: string) => {
-    const newMessage: Message = {
-      id: (messages.length + 1).toString(), // Simple ID generation for example
-      sender: 'user',
-      content,
-    };
-    setMessages([...messages, newMessage]);
-    // Here you would typically trigger an AI response
+      // Add AI response
+      const aiMessage: Message = {
+        id: (messages.length + 2).toString(),
+        sender: 'ai',
+        content: aiResponse,
+      };
+      setMessages((prev) => [...prev, aiMessage]);
+    } catch (error) {
+      console.error('Error processing message:', error);
+      // Add error message
+      const errorMessage: Message = {
+        id: (messages.length + 2).toString(),
+        sender: 'ai',
+        content: 'Sorry, I encountered an error processing your message.',
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+    } finally {
+      setIsProcessing(false);
+    }


Vibe-coded logic to get things working as a PoC

0xApotheosis

Brilliant ser, I like the use of nx libraries and projects to separate concerns and allow for reusability.

Some comments, feel free to tackle in this PR, or in a later one in the name of progress.

.env.example

.git-blame-ignore-revs

0xApotheosis · 2025-05-10T02:10:30Z

apps/agentic-chat/src/lib/langchain.ts

+}).bindTools(tools);
+
+// Define the function that determines whether to continue or not
+function shouldContinue({ messages }: typeof MessagesAnnotation.State) {


Is there a tooling reason we don't use const/arrow function styles here, or just because this is LLM generated code for now?

No reason, absolutely could! Will tackle in the follow-up PR not to rug the stack 🙏🏽

0xApotheosis · 2025-05-10T02:14:04Z

apps/agentic-chat/src/lib/langchain.ts

+const workflow = new StateGraph(MessagesAnnotation)
+  .addNode('agent', callModel)
+  .addEdge(START, 'agent')
+  .addNode('tools', toolNode)
+  .addEdge('tools', 'agent')
+  .addConditionalEdges('agent', shouldContinue);


For the visual learners.

One thing to note here @0xApotheosis - langchain project and the webapp do work a bit differently because of the use of the (deprecated) system prompts in langchain projecs mostly, I haven't really gone back to it on the follow-up PR which wires up things a bit more, but it still exists for our convenience.
Not sure if we'll end up using the langchain project in the end (i.e langsmith app + https://agentchat.vercel.app/) but if we do, we'll probably want to ensure that we don't go with langgraph ReAct flavour there (reason + act) but rather go with the legacy langchain agents flow i.e the same used in the webapp, to ensure that the two models work similarly.

apps/langchain/.nvmrc

apps/langchain/langgraph.json

0xApotheosis · 2025-05-10T02:24:26Z

apps/langchain/static/studio.png

Should this be ignored?

Seems to only be used for the README so might as well remove it 🙏🏽
b0c51ef

0xApotheosis · 2025-05-10T02:31:39Z

tools/src/lib/tokensSearch.ts

+import qs from 'qs';
+import { PortalsResponse, TokenSearchResult } from './types';
+
+export const tokensSearch = tool(


From a developer experience perspective we might want to use a pattern that separated the function param from the fields param, e.g.

const fn = ... const fields = ... export const tokenSearch = tool(fn, fields)

Happy to tackle in the follow-up PR as a few things change there tools-wise!

0xApotheosis · 2025-05-10T02:32:07Z

tools/src/lib/tokensSearch.ts

+      - gnosis
+      - base
+
+      Use text proximity i.e if the user says on Binance Smart Chain, they mean bsc, if they say Avax, they mean avalanche, etc.


gomesalexandre added 9 commits April 29, 2025 23:52

feat: init

eb4b8ae

feat: nvmrc

f396bc6

feat: bootstrap tools

acafef6

fix: shit

e6ce481

feat: errego

fcd6260

feat: .env.example

2d9c5af

feat: ignore revs

a2cd30f

feat(repo): merge main from https://github.com/gomesalexandre/shapesh…

a313aec

…ift-langchainjs

feat: rename

4513355

gomesalexandre marked this pull request as draft April 30, 2025 06:55

gomesalexandre added 4 commits April 30, 2025 10:41

feat: exclude langchain from affected

faec1c9

feat: rm dummy tests

d686e72

feat: bignumber.js

9739ed4

feat: update gitignore

a804d00

gomesalexandre commented Apr 30, 2025

View reviewed changes

apps/langchain/.dockerignore Show resolved Hide resolved

gomesalexandre marked this pull request as ready for review April 30, 2025 07:57

gomesalexandre added 7 commits April 30, 2025 17:31

feat: temp langchain web demo

c735466

feat: ignore revs

e671f77

wip: wip

26cd645

feat: jfc i dit it fuarkin code sharing

95b2865

fix: refs

28c310a

fix: refs

da3a6dd

feat: cleanup

f029c22

gomesalexandre commented Apr 30, 2025

View reviewed changes

.github/workflows/ci.yml Outdated Show resolved Hide resolved

gomesalexandre commented Apr 30, 2025

View reviewed changes

apps/agentic-chat/src/components/chat-message-list.tsx Show resolved Hide resolved

feat: prefix key with vite

443692d

gomesalexandre marked this pull request as draft April 30, 2025 16:30

gomesalexandre added 2 commits April 30, 2025 21:13

feat: cleanup

d1abb4b

fix: some of ci

0ff3757

gomesalexandre added 5 commits April 30, 2025 22:49

fix: ci

9d315d1

feat: bump yarn.lock

aacc748

feat: run nx format

5ebb3c1

fix: actually fix ci?

d54c3f3

feat: don't install playwright

975f58f

gomesalexandre commented Apr 30, 2025

View reviewed changes

.github/workflows/ci.yml Show resolved Hide resolved

gomesalexandre added 3 commits April 30, 2025 23:17

feat: cleanup packages

1ac615a

feat: more packages align

5dfd433

feat: the last cleanup

4fd4f40

gomesalexandre changed the title ~~feat: add langchain project~~ feat: add langchain project and langchainjs wire-up Apr 30, 2025

gomesalexandre marked this pull request as ready for review April 30, 2025 20:25

gomesalexandre added 2 commits April 30, 2025 23:29

Revert "feat: the last cleanup"

5b80f53

This reverts commit 4fd4f40.

feat: re-unbork ci

f2d06b4

gomesalexandre commented Apr 30, 2025

View reviewed changes

gomesalexandre added 2 commits April 30, 2025 23:44

feat: example env in root

70e67cb

feat: from address

2958562

gomesalexandre force-pushed the feat_langchain branch from 32ead04 to 2958562 Compare May 8, 2025 12:17

0xApotheosis approved these changes May 10, 2025

View reviewed changes

gomesalexandre added 4 commits May 12, 2025 09:46

feat: prefix example with VITE

a7036fd

feat: rm langchain .github folder

aebe19d

feat: rm app-level nvmrc

3812eb0

feat: rm static png

b0c51ef

gomesalexandre merged commit dd328e3 into main May 12, 2025
1 check passed

This was referenced May 14, 2025

Set up LangChain #2

Closed

Link front-end with LangChain #3

Closed

0xApotheosis deleted the feat_langchain branch May 16, 2025 05:33

feat: add langchain project and langchainjs wire-up #7

feat: add langchain project and langchainjs wire-up #7

Uh oh!

Conversation

gomesalexandre commented Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Issue

Testing

Langgraph app

Chat UI

Uh oh!

nx-cloud bot commented Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

0xApotheosis left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

gomesalexandre commented Apr 30, 2025 •

edited

Loading

nx-cloud bot commented Apr 30, 2025 •

edited

Loading