如何设置 JavaScript 应用

必须为应用配置配置文件，才能将其部署到 LangSmith（或自托管）。本操作指南介绍使用 package.json 指定项目依赖来设置 JavaScript 应用以进行部署的基本步骤。

本演练基于此仓库，你可以通过它了解如何为部署设置应用。

最终仓库结构大致如下：

my-app/
├── src # all project code lies within here
│   ├── utils # optional utilities for your graph
│   │   ├── tools.ts # tools for your graph
│   │   ├── nodes.ts # node functions for your graph
│   │   └── state.ts # state definition of your graph
│   └── agent.ts # code for constructing your graph
├── package.json # package dependencies
├── .env # environment variables
└── langgraph.json # configuration file for LangGraph

TIP

LangSmith Deployment 支持部署 LangGraph 图。不过，图的节点实现可以包含任意代码。这意味着可以在节点内实现任何框架，并将其部署到 LangSmith Deployment。这样，你就可以在不使用额外 LangGraph OSS API 的情况下实现核心应用逻辑，同时仍然使用 LangSmith 进行部署、扩缩容和可观测性。更多详情请参阅将任何框架与 LangSmith Deployment 配合使用。

每个步骤之后都会提供一个示例文件目录，演示代码的组织方式。

指定依赖

可以在 package.json 中指定依赖。如果未创建这些文件，则可以在稍后的配置文件中指定依赖。

示例 package.json 文件：

{
  "name": "langgraphjs-studio-starter",
  "packageManager": "yarn@1.22.22",
  "dependencies": {
    "@langchain/core": "^0.2.31",
    "@langchain/langgraph": "^0.2.0",
    "@langchain/openai": "^0.2.8",
    "@langchain/tavily": "^0.1.5"
  }
}

部署应用时，将使用你选择的包管理器安装依赖，前提是它们符合下面列出的兼容版本范围：

"@langchain/core": "^0.3.42",
"@langchain/langgraph": "^0.2.57",
"@langchain/langgraph-checkpoint": "~0.0.16",

示例文件目录：

my-app/
└── package.json # package dependencies

指定环境变量

可以选择在文件中（例如 .env）指定环境变量。有关为部署配置其他变量，请参阅环境变量参考。

示例 .env 文件：

MY_ENV_VAR_1=foo
MY_ENV_VAR_2=bar
OPENAI_API_KEY=key
TAVILY_API_KEY=key_2

示例文件目录：

my-app/
├── package.json
└── .env # environment variables

定义图

实现你的图。图可以在单个文件或多个文件中定义。请记下要包含在应用中的每个已编译图的变量名。稍后创建配置文件时会用到这些变量名。

以下是一个 agent.ts 示例：

import type { AIMessage } from "@langchain/core/messages";
import { TavilySearch } from "@langchain/tavily";
import { ChatOpenAI } from "@langchain/openai";

import { MessagesAnnotation, StateGraph } from "@langchain/langgraph";
import { ToolNode } from "@langchain/langgraph/prebuilt";

const tools = [new TavilySearch({ maxResults: 3 })];

// Define the function that calls the model
async function callModel(state: typeof MessagesAnnotation.State) {
  /**
   * Call the LLM powering our agent.
   * Feel free to customize the prompt, model, and other logic!
   */
  const model = new ChatOpenAI({
    model: "gpt-5.5",
  }).bindTools(tools);

  const response = await model.invoke([
    {
      role: "system",
      content: `You are a helpful assistant. The current date is ${new Date().getTime()}.`,
    },
    ...state.messages,
  ]);

  // MessagesAnnotation supports returning a single message or array of messages
  return { messages: response };
}

// Define the function that determines whether to continue or not
function routeModelOutput(state: typeof MessagesAnnotation.State) {
  const messages = state.messages;
  const lastMessage: AIMessage = messages[messages.length - 1];
  // If the LLM is invoking tools, route there.
  if ((lastMessage?.tool_calls?.length ?? 0) > 0) {
    return "tools";
  }
  // Otherwise end the graph.
  return "__end__";
}

// Define a new graph.
// See https://langchain-ai.github.io/langgraphjs/how-tos/define-state/#getting-started for
// more on defining custom graph states.
const workflow = new StateGraph(MessagesAnnotation)
  // Define the two nodes we will cycle between
  .addNode("callModel", callModel)
  .addNode("tools", new ToolNode(tools))
  // Set the entrypoint as `callModel`
  // This means that this node is the first one called
  .addEdge("__start__", "callModel")
  .addConditionalEdges(
    // First, we define the edges' source node. We use `callModel`.
    // This means these are the edges taken after the `callModel` node is called.
    "callModel",
    // Next, we pass in the function that will determine the sink node(s), which
    // will be called after the source node is called.
    routeModelOutput,
    // List of the possible destinations the conditional edge can route to.
    // Required for conditional edges to properly render the graph in Studio
    ["tools", "__end__"]
  )
  // This means that after `tools` is called, `callModel` node is called next.
  .addEdge("tools", "callModel");

// Finally, we compile it!
// This compiles it into a graph you can invoke and deploy.
export const graph = workflow.compile();

示例文件目录：

my-app/
├── src # all project code lies within here
│   ├── utils # optional utilities for your graph
│   │   ├── tools.ts # tools for your graph
│   │   ├── nodes.ts # node functions for your graph
│   │   └── state.ts # state definition of your graph
│   └── agent.ts # code for constructing your graph
├── package.json # package dependencies
├── .env # environment variables
└── langgraph.json # configuration file for LangGraph

创建 API 配置

创建一个名为 langgraph.json 的配置文件。有关配置文件中 JSON 对象各键的详细说明，请参阅配置文件参考。

示例 langgraph.json 文件：

{
  "node_version": "20",
  "dockerfile_lines": [],
  "dependencies": ["."],
  "graphs": {
    "agent": "./src/agent.ts:graph"
  },
  "env": ".env"
}

请注意，CompiledGraph 的变量名会出现在顶层 graphs 键中每个子键值的末尾（即 :<variable_name>）。

INFO

配置位置 配置文件必须放在与包含已编译图及相关依赖的 TypeScript 文件同级或更高级别的目录中。

下一步

设置项目并将其放入 GitHub 仓库后，就可以部署应用了。

---