Official LangGraph JS Template Is Outdated

[worldly oak]

I’m currently trying to fix the issue discussed here:
https://github.com/CopilotKit/CopilotKit/issues/2897

While working on this, I noticed that the official LangGraph JS example:

https://github.com/CopilotKit/with-langgraph-js

appears to be significantly outdated. The last update was around two months ago, and several dependencies no longer work properly in a fresh environment.

For example, the template still uses:

"@copilotkit/sdk-js": "1.10.6"

which is now quite old compared to the current ecosystem. Attempting to upgrade dependencies leads to multiple compatibility issues, and running the example as-is often fails due to dependency conflicts or breaking changes upstream.

It would be very helpful if the official LangGraph JS template could be updated to:

• Use current CopilotKit packages and compatible dependency versions
• Successfully run in a clean install environment
• Reflect the currently recommended setup for LangGraph + CopilotKit

Updating the example would significantly improve the onboarding experience and reduce friction for new users trying to adopt CopilotKit.

[jade valley]

This solution has been AI generated

You're right—the with-langgraph-js repo targets the older v1.10.x line and can break on fresh installs. The current recommendation is to scaffold a new project with the latest stack or upgrade manually as below so it runs cleanly and reflects the modern LangGraph + CopilotKit setup.

Recommended path (clean install)

npx copilotkit@latest create -f langgraph-js

This bootstraps a working template with the latest packages (v1.51.x+).

Manual upgrade (if you want to fix the existing example)

1) Backend (LangGraph JS agent)

npm install @copilotkit/sdk-js@latest

Use the CopilotKit middleware with your LangGraph agent:

import { createAgent } from "@langchain/langgraph";
import { copilotkitMiddleware } from "@copilotkit/sdk-js/langgraph";

const agent = createAgent({
  model: llm,
  tools: myTools,
  middleware: [copilotkitMiddleware],
});

2) Runtime (Next.js/Node)

import { CopilotRuntime, copilotRuntimeNextJSAppRouterEndpoint } from "@copilotkit/runtime";
import { LangGraphHttpAgent } from "@copilotkit/runtime/langgraph";

const runtime = new CopilotRuntime({
  agents: {
    my_agent: new LangGraphHttpAgent({ url: "http://localhost:8000" }),
  },
});

export const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({ runtime });

3) Frontend (align packages)

npm install @copilotkit/react-core@latest @copilotkit/react-ui@latest

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";

<CopilotKit runtimeUrl="/api/copilotkit" agent="my_agent">
  <CopilotSidebar />
</CopilotKit>

Why this fixes the template

• Modern versions (v1.51+) include copilotkitMiddleware for automatic context/tool wiring and improved streaming.

• Using @latest avoids the outdated @copilotkit/[email protected] and resolves dependency conflicts seen in fresh installs.

Documentation: https://docs.copilotkit.ai/integrations/langgraph/quickstart

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve:

Thank you for your feedback! Our team will provide additional assistance. 🔄

[worldly oak]

pnpm install --filter web @copilotkit/[email protected] @copilotkit/[email protected] @copilotkit/[email protected]
pnpm install --filter web @copilotkit/[email protected]
pnpm install --filter agent @copilotkit/[email protected]

I run the following command to upgrade the project, but it would trigger an new error: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined

[jade valley]

Hi @worldly oak ,This looks like it needs a fix on the template itself - let me tag the team on this.

[worldly oak]

Btw, which one would you recommend more, langchain JS + NextJS or langchain python + NextJS?

I prefer langchain JS since it can share more code with NextJS, but your template seems to be pretty old. Would langchain python a better production-grade choice (We're a very small team)?

[spiral wedge]

Hey, good news! @tough elk just pushed an update to the LangGraph JS template - bumped the deps from v1.10.6/v1.50.0 to v1.51.4 across the board. You can pull the latest version now!
For a small team, I'd lean toward LangChain JS + Next.js since you're working in one language across the stack. The productivity gain of staying in TypeScript and using CopilotKit's @copilotkit/sdk-js usually outweighs any edge the Python ecosystem has, unless your agent's core work involves heavy data science.

[worldly oak]

Tysm! I tried the updated version and noticed some type error: https://github.com/CopilotKit/CopilotKit/issues/3231