> ## Documentation Index
> Fetch the complete documentation index at: https://langchain-5e9cc07a-preview-docsdy-1782656769-5d7a089.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Deployment

> Deploy LangGraph agents to production with LangSmith Cloud or JavaScript frameworks and hosting platforms.

When you are ready to deploy your LangGraph agent to production, choose a hosting model that fits your stack. **[LangSmith Cloud](/langsmith/deploy-to-cloud)** provides fully managed infrastructure for stateful, long-running agents with persistent state and background execution.

You can also deploy on **JavaScript frameworks and platforms** such as Next.js, SvelteKit, Nuxt, Cloudflare Workers, and Deno Deploy using the same [Agent Streaming Protocol](https://github.com/langchain-ai/agent-protocol/tree/main/streaming).

<div className="not-prose my-6 rounded-xl border border-gray-200 bg-gray-50 p-6 dark:border-gray-700 dark:bg-gray-900/40">
  <div className="mb-5 flex flex-wrap items-center justify-between gap-3">
    <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">Frameworks and platforms</p>

    <a href="/langsmith/deploy-frameworks-and-platforms" className="text-sm font-medium text-primary hover:underline">
      View all guides
    </a>
  </div>

  <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
    <a href="/langsmith/deploy-vite-langsmith" className="flex flex-col items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-4 transition-colors hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950 dark:hover:border-gray-600 dark:hover:bg-gray-900">
      <img className="block h-8 w-8 dark:hidden" src="https://mintcdn.com/langchain-5e9cc07a-preview-docsdy-1782656769-5d7a089/EMGILGYVOMdWOgwW/images/providers/light/langchain.svg?fit=max&auto=format&n=EMGILGYVOMdWOgwW&q=85&s=1feac6b3b0b0bb810d326bc6aaf31e78" alt="" noZoom width="65" height="65" data-path="images/providers/light/langchain.svg" />

      <img className="hidden h-8 w-8 dark:block" src="https://mintcdn.com/langchain-5e9cc07a-preview-docsdy-1782656769-5d7a089/VWc3YGvLH-xQOqEM/images/providers/dark/langchain.svg?fit=max&auto=format&n=VWc3YGvLH-xQOqEM&q=85&s=1726fff0453e234ae0fba61950f5ed34" alt="" noZoom width="65" height="65" data-path="images/providers/dark/langchain.svg" />

      <span className="text-center text-xs font-medium text-gray-900 dark:text-gray-100">LangSmith</span>
    </a>

    <a href="/langsmith/deploy-nextjs" className="flex flex-col items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-4 transition-colors hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950 dark:hover:border-gray-600 dark:hover:bg-gray-900">
      <img className="block h-8 w-8 dark:hidden" src="https://mintcdn.com/langchain-5e9cc07a-preview-docsdy-1782656769-5d7a089/EMGILGYVOMdWOgwW/images/providers/light/nextjs.svg?fit=max&auto=format&n=EMGILGYVOMdWOgwW&q=85&s=88081a2a371abfec0e07be29cefb1315" alt="" noZoom width="24" height="24" data-path="images/providers/light/nextjs.svg" />

      <img className="hidden h-8 w-8 dark:block" src="https://mintcdn.com/langchain-5e9cc07a-preview-docsdy-1782656769-5d7a089/VWc3YGvLH-xQOqEM/images/providers/dark/nextjs.svg?fit=max&auto=format&n=VWc3YGvLH-xQOqEM&q=85&s=f08c84818148262ec3309ea1762e5976" alt="" noZoom width="24" height="24" data-path="images/providers/dark/nextjs.svg" />

      <span className="text-center text-xs font-medium text-gray-900 dark:text-gray-100">Next.js</span>
    </a>

    <a href="/langsmith/deploy-sveltekit" className="flex flex-col items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-4 transition-colors hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950 dark:hover:border-gray-600 dark:hover:bg-gray-900">
      <img className="block h-8 w-8 dark:hidden" src="https://mintcdn.com/langchain-5e9cc07a-preview-docsdy-1782656769-5d7a089/EMGILGYVOMdWOgwW/images/providers/light/svelte.svg?fit=max&auto=format&n=EMGILGYVOMdWOgwW&q=85&s=8761a98e16dee088b3b5e08542047e14" alt="" noZoom width="24" height="24" data-path="images/providers/light/svelte.svg" />

      <img className="hidden h-8 w-8 dark:block" src="https://mintcdn.com/langchain-5e9cc07a-preview-docsdy-1782656769-5d7a089/VWc3YGvLH-xQOqEM/images/providers/dark/svelte.svg?fit=max&auto=format&n=VWc3YGvLH-xQOqEM&q=85&s=ca9b946ce1ddf98e5148dbff7327806e" alt="" noZoom width="24" height="24" data-path="images/providers/dark/svelte.svg" />

      <span className="text-center text-xs font-medium text-gray-900 dark:text-gray-100">SvelteKit</span>
    </a>

    <a href="/langsmith/deploy-nuxt" className="flex flex-col items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-4 transition-colors hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950 dark:hover:border-gray-600 dark:hover:bg-gray-900">
      <img className="block h-8 w-8 dark:hidden" src="https://mintcdn.com/langchain-5e9cc07a-preview-docsdy-1782656769-5d7a089/EMGILGYVOMdWOgwW/images/providers/light/nuxt.svg?fit=max&auto=format&n=EMGILGYVOMdWOgwW&q=85&s=abc58832c05752c448ab98478e6d4654" alt="" noZoom width="24" height="24" data-path="images/providers/light/nuxt.svg" />

      <img className="hidden h-8 w-8 dark:block" src="https://mintcdn.com/langchain-5e9cc07a-preview-docsdy-1782656769-5d7a089/VWc3YGvLH-xQOqEM/images/providers/dark/nuxt.svg?fit=max&auto=format&n=VWc3YGvLH-xQOqEM&q=85&s=274e04f07b278e46c6d24b393b9c9015" alt="" noZoom width="24" height="24" data-path="images/providers/dark/nuxt.svg" />

      <span className="text-center text-xs font-medium text-gray-900 dark:text-gray-100">Nuxt</span>
    </a>

    <a href="/langsmith/deploy-cloudflare-workers" className="flex flex-col items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-4 transition-colors hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950 dark:hover:border-gray-600 dark:hover:bg-gray-900">
      <img className="block h-8 w-8 dark:hidden" src="https://mintcdn.com/langchain-5e9cc07a-preview-docsdy-1782656769-5d7a089/EMGILGYVOMdWOgwW/images/providers/light/cloudflare.svg?fit=max&auto=format&n=EMGILGYVOMdWOgwW&q=85&s=bef9234bc389ecb2283476ce023d0069" alt="" noZoom width="24" height="24" data-path="images/providers/light/cloudflare.svg" />

      <img className="hidden h-8 w-8 dark:block" src="https://mintcdn.com/langchain-5e9cc07a-preview-docsdy-1782656769-5d7a089/VWc3YGvLH-xQOqEM/images/providers/dark/cloudflare.svg?fit=max&auto=format&n=VWc3YGvLH-xQOqEM&q=85&s=562e324ba7c2c7a0ae018986ae3c0b46" alt="" noZoom width="24" height="24" data-path="images/providers/dark/cloudflare.svg" />

      <span className="text-center text-xs font-medium text-gray-900 dark:text-gray-100">Cloudflare</span>
    </a>

    <a href="/langsmith/deploy-deno" className="flex flex-col items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-4 transition-colors hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950 dark:hover:border-gray-600 dark:hover:bg-gray-900">
      <img className="block h-8 w-8 dark:hidden" src="https://mintcdn.com/langchain-5e9cc07a-preview-docsdy-1782656769-5d7a089/EMGILGYVOMdWOgwW/images/providers/light/deno.svg?fit=max&auto=format&n=EMGILGYVOMdWOgwW&q=85&s=f27ad6d7bdea98cc76d5cb6ebf196fb6" alt="" noZoom width="24" height="24" data-path="images/providers/light/deno.svg" />

      <img className="hidden h-8 w-8 dark:block" src="https://mintcdn.com/langchain-5e9cc07a-preview-docsdy-1782656769-5d7a089/VWc3YGvLH-xQOqEM/images/providers/dark/deno.svg?fit=max&auto=format&n=VWc3YGvLH-xQOqEM&q=85&s=fd3d9464dada3930b0e7ae0f790078d3" alt="" noZoom width="24" height="24" data-path="images/providers/dark/deno.svg" />

      <span className="text-center text-xs font-medium text-gray-900 dark:text-gray-100">Deno</span>
    </a>
  </div>
</div>

<Tip>
  LangSmith offers multiple deployment options beyond Cloud, including [hybrid](/langsmith/hybrid), [standalone servers](/langsmith/deploy-standalone-server), and [self-hosted with control plane](/langsmith/deploy-with-control-plane). For more information, see the [LangSmith Deployment overview](/langsmith/deployment).
</Tip>

## LangSmith Cloud

This section walks through deploying your agent to LangSmith Cloud from a GitHub repository. LangSmith handles infrastructure, scaling, and operational concerns.

### Prerequisites

Before you begin, ensure you have the following:

* A [GitHub account](https://github.com/)
* A [LangSmith account](https://smith.langchain.com?utm_source=docs\&utm_medium=cta\&utm_campaign=langsmith-signup\&utm_content=oss-langgraph-deploy) (free to sign up)

### Deploy your agent

#### 1. Create a repository on GitHub

Your application's code must reside in a GitHub repository to be deployed on LangSmith. Both public and private repositories are supported. For this quickstart, first make sure your app is LangGraph-compatible by following the [local server setup guide](/oss/javascript/langgraph/studio#set-up-local-agent-server). Then, push your code to the repository.

#### 2. Deploy to LangSmith

<Steps>
  <Step title="Navigate to LangSmith Deployment">
    Log in to [LangSmith](https://smith.langchain.com?utm_source=docs\&utm_medium=cta\&utm_campaign=langsmith-signup\&utm_content=oss-langgraph-deploy). In the left sidebar, select **Deployments**.
  </Step>

  <Step title="Create new deployment">
    Click the **+ New Deployment** button. A pane will open where you can fill in the required fields.
  </Step>

  <Step title="Link repository">
    If you are a first time user or adding a private repository that has not been previously connected, click the **Add new account** button and follow the instructions to connect your GitHub account.
  </Step>

  <Step title="Deploy repository">
    Select your application's repository. Click **Submit** to deploy. This may take about 15 minutes to complete. You can check the status in the **Deployment details** view.
  </Step>
</Steps>

#### 3. Test your application in Studio

Once your application is deployed:

1. Select the deployment you just created to view more details.
2. Click the **Studio** button in the top right corner. Studio will open to display your graph.

#### 4. Get the API URL for your deployment

1. In the **Deployment details** view in LangGraph, click the **API URL** to copy it to your clipboard.
2. Click the `URL` to copy it to the clipboard.

#### 5. Test the API

You can now test the API:

<Tabs>
  <Tab title="TypeScript">
    1. Install LangGraph SDK:

    ```shell theme={null}
    npm install @langchain/langgraph-sdk
    ```

    2. Send a message to the agent:

    ```ts theme={null}
    import { Client } from "@langchain/langgraph-sdk";

    const client = new Client({ apiUrl: "your-deployment-url", apiKey: "your-langsmith-api-key" });

    const streamResponse = client.runs.stream(
      null,    // Threadless run
      "agent", // Name of agent. Defined in langgraph.json.
      {
        input: {
          "messages": [
            { "role": "user", "content": "What is LangGraph?"}
          ]
        },
        streamMode: "messages",
      }
    );

    for await (const chunk of streamResponse) {
      console.log(`Receiving new event of type: ${chunk.event}...`);
      console.log(JSON.stringify(chunk.data));
      console.log("\n\n");
    }
    ```
  </Tab>

  <Tab title="Rest API">
    ```bash theme={null}
    curl -s --request POST \
        --url <DEPLOYMENT_URL>/runs/stream \
        --header 'Content-Type: application/json' \
        --header "X-Api-Key: <LANGSMITH API KEY> \
        --data "{
            \"assistant_id\": \"agent\", `# Name of agent. Defined in langgraph.json.`
            \"input\": {
                \"messages\": [
                    {
                        \"role\": \"human\",
                        \"content\": \"What is LangGraph?\"
                    }
                ]
            },
            \"stream_mode\": \"updates\"
        }"
    ```
  </Tab>
</Tabs>

***

<div className="source-links">
  <Callout icon="terminal-2">
    [Connect these docs](/use-these-docs) to Claude, VSCode, and more via MCP for real-time answers.
  </Callout>

  <Callout icon="edit">
    [Edit this page on GitHub](https://github.com/langchain-ai/docs/edit/main/src/oss/langgraph/deploy.mdx) or [file an issue](https://github.com/langchain-ai/docs/issues/new/choose).
  </Callout>
</div>
