Skip to content

Commit 7956ad2

Browse files
ranst91ranst91
committed
feat: create langchain agent
1 parent 143b497 commit 7956ad2

File tree

20 files changed

+1539
-90
lines changed

20 files changed

+1539
-90
lines changed

‎apps/dojo/e2e/tests/langchainTests/agenticChatPage.spec.ts‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import {
2+
test,
3+
expect,
4+
waitForAIResponse,
5+
retryOnAIFailure,
6+
} from "../../test-isolation-helper";
7+
import { AgenticChatPage } from "../../featurePages/AgenticChatPage";
8+
9+
test("[LangChain] Agentic Chat sends and receives a message", async ({
10+
page,
11+
}) => {
12+
await retryOnAIFailure(async () => {
13+
await page.goto(
14+
"/langchain/feature/agentic_chat"
15+
);
16+
17+
const chat = new AgenticChatPage(page);
18+
19+
await chat.openChat();
20+
await chat.agentGreeting.isVisible;
21+
await chat.sendMessage("Hi, I am duaa");
22+
23+
await waitForAIResponse(page);
24+
await chat.assertUserMessageVisible("Hi, I am duaa");
25+
await chat.assertAgentReplyVisible(/Hello/i);
26+
});
27+
});
28+
29+
test("[LangChain] Agentic Chat changes background on message and reset", async ({
30+
page,
31+
}) => {
32+
await retryOnAIFailure(async () => {
33+
await page.goto(
34+
"/langchain/feature/agentic_chat"
35+
);
36+
37+
const chat = new AgenticChatPage(page);
38+
39+
await chat.openChat();
40+
await chat.agentGreeting.waitFor({ state: "visible" });
41+
42+
// Store initial background color
43+
const backgroundContainer = page.locator('[data-testid="background-container"]')
44+
const initialBackground = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
45+
console.log("Initial background color:", initialBackground);
46+
47+
// 1. Send message to change background to blue
48+
await chat.sendMessage("Hi change the background color to blue");
49+
await chat.assertUserMessageVisible(
50+
"Hi change the background color to blue"
51+
);
52+
await waitForAIResponse(page);
53+
54+
await expect(backgroundContainer).not.toHaveCSS('background-color', initialBackground, { timeout: 7000 });
55+
const backgroundBlue = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
56+
// Check if background is blue (string color name or contains blue)
57+
expect(backgroundBlue.toLowerCase()).toMatch(/blue|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
58+
59+
// 2. Change to pink
60+
await chat.sendMessage("Hi change the background color to pink");
61+
await chat.assertUserMessageVisible(
62+
"Hi change the background color to pink"
63+
);
64+
await waitForAIResponse(page);
65+
66+
await expect(backgroundContainer).not.toHaveCSS('background-color', backgroundBlue, { timeout: 7000 });
67+
const backgroundPink = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
68+
// Check if background is pink (string color name or contains pink)
69+
expect(backgroundPink.toLowerCase()).toMatch(/pink|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
70+
});
71+
});
72+
73+
test("[LangChain] Agentic Chat retains memory of user messages during a conversation", async ({
74+
page,
75+
}) => {
76+
await retryOnAIFailure(async () => {
77+
await page.goto(
78+
"/langchain/feature/agentic_chat"
79+
);
80+
81+
const chat = new AgenticChatPage(page);
82+
await chat.openChat();
83+
await chat.agentGreeting.click();
84+
85+
await chat.sendMessage("Hey there");
86+
await chat.assertUserMessageVisible("Hey there");
87+
await waitForAIResponse(page);
88+
await chat.assertAgentReplyVisible(/how can I assist you/i);
89+
90+
const favFruit = "Mango";
91+
await chat.sendMessage(`My favorite fruit is ${favFruit}`);
92+
await chat.assertUserMessageVisible(`My favorite fruit is ${favFruit}`);
93+
await waitForAIResponse(page);
94+
await chat.assertAgentReplyVisible(new RegExp(favFruit, "i"));
95+
96+
await chat.sendMessage("and I love listening to Kaavish");
97+
await chat.assertUserMessageVisible("and I love listening to Kaavish");
98+
await waitForAIResponse(page);
99+
await chat.assertAgentReplyVisible(/Kaavish/i);
100+
101+
await chat.sendMessage("tell me an interesting fact about Moon");
102+
await chat.assertUserMessageVisible(
103+
"tell me an interesting fact about Moon"
104+
);
105+
await waitForAIResponse(page);
106+
await chat.assertAgentReplyVisible(/Moon/i);
107+
108+
await chat.sendMessage("Can you remind me what my favorite fruit is?");
109+
await chat.assertUserMessageVisible(
110+
"Can you remind me what my favorite fruit is?"
111+
);
112+
await waitForAIResponse(page);
113+
await chat.assertAgentReplyVisible(new RegExp(favFruit, "i"));
114+
});
115+
});

‎apps/dojo/e2e/tests/langchainTests/toolBasedGenUIPage.spec.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { test, expect } from "@playwright/test";
2+
import { ToolBaseGenUIPage } from "../../featurePages/ToolBaseGenUIPage";
3+
4+
const pageURL =
5+
"/langchain/feature/tool_based_generative_ui";
6+
7+
test('[LangChain] Haiku generation and display verification', async ({
8+
page,
9+
}) => {
10+
await page.goto(pageURL);
11+
12+
const genAIAgent = new ToolBaseGenUIPage(page);
13+
14+
await expect(genAIAgent.haikuAgentIntro).toBeVisible();
15+
await genAIAgent.generateHaiku('Generate Haiku for "I will always win"');
16+
await genAIAgent.checkGeneratedHaiku();
17+
await genAIAgent.checkHaikuDisplay(page);
18+
});
19+
20+
test('[LangChain] Haiku generation and UI consistency for two different prompts', async ({
21+
page,
22+
}) => {
23+
await page.goto(pageURL);
24+
25+
const genAIAgent = new ToolBaseGenUIPage(page);
26+
27+
await expect(genAIAgent.haikuAgentIntro).toBeVisible();
28+
29+
const prompt1 = 'Generate Haiku for "I will always win"';
30+
await genAIAgent.generateHaiku(prompt1);
31+
await genAIAgent.checkGeneratedHaiku();
32+
await genAIAgent.checkHaikuDisplay(page);
33+
34+
const prompt2 = 'Generate Haiku for "The moon shines bright"';
35+
await genAIAgent.generateHaiku(prompt2);
36+
await genAIAgent.checkGeneratedHaiku();
37+
await genAIAgent.checkHaikuDisplay(page);
38+
});

‎apps/dojo/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@ag-ui/agno": "workspace:*",
2020
"@ag-ui/crewai": "workspace:*",
2121
"@ag-ui/langgraph": "workspace:*",
22+
"@ag-ui/langchain": "workspace:*",
2223
"@ag-ui/llamaindex": "workspace:*",
2324
"@ag-ui/mastra": "workspace:*",
2425
"@ag-ui/middleware-starter": "workspace:*",

‎apps/dojo/src/agents.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { HttpAgent } from "@ag-ui/client";
2121
import { A2AMiddlewareAgent } from "@ag-ui/a2a-middleware";
2222
import { A2AAgent } from "@ag-ui/a2a";
2323
import { A2AClient } from "@a2a-js/sdk/client";
24+
import { langChainAgents } from "@ag-ui/langchain/src/examples";
2425

2526
const envVars = getEnvVars();
2627
export const agentsIntegrations: AgentIntegrationConfig[] = [
@@ -260,6 +261,10 @@ export const agentsIntegrations: AgentIntegrationConfig[] = [
260261
};
261262
},
262263
},
264+
{
265+
id: "langchain",
266+
agents: async () => langChainAgents,
267+
},
263268
{
264269
id: "agno",
265270
agents: async () => {

‎apps/dojo/src/menu.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,14 @@ export const menuIntegrations: MenuIntegrationConfig[] = [
4444
"subgraphs",
4545
],
4646
},
47+
{
48+
id: "langchain",
49+
name: "LangChain",
50+
features: [
51+
"agentic_chat",
52+
"tool_based_generative_ui",
53+
],
54+
},
4755
{
4856
id: "mastra",
4957
name: "Mastra",

‎integrations/langchain/typescript/.gitignore‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
9+
# Diagnostic reports (https://nodejs.org/api/report.html)
10+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Directory for instrumented libs generated by jscoverage/JSCover
19+
lib-cov
20+
21+
# Coverage directory used by tools like istanbul
22+
coverage
23+
*.lcov
24+
25+
# nyc test coverage
26+
.nyc_output
27+
28+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29+
.grunt
30+
31+
# Bower dependency directory (https://bower.io/)
32+
bower_components
33+
34+
# node-waf configuration
35+
.lock-wscript
36+
37+
# Compiled binary addons (https://nodejs.org/api/addons.html)
38+
build/Release
39+
40+
# Dependency directories
41+
node_modules/
42+
jspm_packages/
43+
44+
# Snowpack dependency directory (https://snowpack.dev/)
45+
web_modules/
46+
47+
# TypeScript cache
48+
*.tsbuildinfo
49+
50+
# Optional npm cache directory
51+
.npm
52+
53+
# Optional eslint cache
54+
.eslintcache
55+
56+
# Optional stylelint cache
57+
.stylelintcache
58+
59+
# Optional REPL history
60+
.node_repl_history
61+
62+
# Output of 'npm pack'
63+
*.tgz
64+
65+
# Yarn Integrity file
66+
.yarn-integrity
67+
68+
# dotenv environment variable files
69+
.env
70+
.env.*
71+
!.env.example
72+
73+
# parcel-bundler cache (https://parceljs.org/)
74+
.cache
75+
.parcel-cache
76+
77+
# Next.js build output
78+
.next
79+
out
80+
81+
# Nuxt.js build / generate output
82+
.nuxt
83+
dist
84+
.output
85+
86+
# Gatsby files
87+
.cache/
88+
# Comment in the public line in if your project uses Gatsby and not Next.js
89+
# https://nextjs.org/blog/next-9-1#public-directory-support
90+
# public
91+
92+
# vuepress build output
93+
.vuepress/dist
94+
95+
# vuepress v2.x temp and cache directory
96+
.temp
97+
.cache
98+
99+
# Sveltekit cache directory
100+
.svelte-kit/
101+
102+
# vitepress build output
103+
**/.vitepress/dist
104+
105+
# vitepress cache directory
106+
**/.vitepress/cache
107+
108+
# Docusaurus cache and generated files
109+
.docusaurus
110+
111+
# Serverless directories
112+
.serverless/
113+
114+
# FuseBox cache
115+
.fusebox/
116+
117+
# DynamoDB Local files
118+
.dynamodb/
119+
120+
# Firebase cache directory
121+
.firebase/
122+
123+
# TernJS port file
124+
.tern-port
125+
126+
# Stores VSCode versions used for testing VSCode extensions
127+
.vscode-test
128+
129+
# yarn v3
130+
.pnp.*
131+
.yarn/*
132+
!.yarn/patches
133+
!.yarn/plugins
134+
!.yarn/releases
135+
!.yarn/sdks
136+
!.yarn/versions
137+
138+
# Vite files
139+
vite.config.js.timestamp-*
140+
vite.config.ts.timestamp-*
141+
.vite/

‎integrations/langchain/typescript/.npmignore‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.turbo
2+
.DS_Store
3+
.git
4+
.gitignore
5+
.idea
6+
.vscode
7+
.env
8+
__tests__
9+
src
10+
tsup.config.ts
11+
tsconfig.json
12+
jest.config.js
13+
example

0 commit comments

Comments
 (0)