!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())

[Skip to main content](#__docusaurus_skipToContent_fallback)

LangChain v0.2 is coming soon! Preview the new docs [here](/v0.2/docs/introduction/).

[

![🦜️🔗 Langchain](/v0.1/img/brand/wordmark.png)![🦜️🔗 Langchain](/v0.1/img/brand/wordmark-dark.png)

](/v0.1/)[Docs](/v0.1/docs/get_started/introduction/)[Use cases](/v0.1/docs/use_cases/)[Integrations](/v0.1/docs/integrations/platforms/)[API Reference](https://api.js.langchain.com)

[More](#)

*   [People](/v0.1/docs/people/)
*   [Community](/v0.1/docs/community/)
*   [Tutorials](/v0.1/docs/additional_resources/tutorials/)
*   [Contributing](/v0.1/docs/contributing/)

[v0.1](#)

*   [v0.2](https://js.langchain.com/v0.2/docs/introduction)
*   [v0.1](/v0.1/docs/get_started/introduction/)

[🦜🔗](#)

*   [LangSmith](https://smith.langchain.com)
*   [LangSmith Docs](https://docs.smith.langchain.com)
*   [LangChain Hub](https://smith.langchain.com/hub)
*   [LangServe](https://github.com/langchain-ai/langserve)
*   [Python Docs](https://python.langchain.com/)

[Chat](https://chatjs.langchain.com)[](https://github.com/langchain-ai/langchainjs)

Search

*   [Get started](/v0.1/docs/get_started/)
    
    *   [Introduction](/v0.1/docs/get_started/introduction/)
    *   [Installation](/v0.1/docs/get_started/installation/)
    *   [Quickstart](/v0.1/docs/get_started/quickstart/)
*   [LangChain Expression Language](/v0.1/docs/expression_language/)
    
    *   [Get started](/v0.1/docs/expression_language/get_started/)
    *   [Why use LCEL?](/v0.1/docs/expression_language/why/)
    *   [Interface](/v0.1/docs/expression_language/interface/)
    *   [Streaming](/v0.1/docs/expression_language/streaming/)
    *   [How to](/v0.1/docs/expression_language/how_to/routing/)
        
    *   [Cookbook](/v0.1/docs/expression_language/cookbook/)
        
    *   [LangChain Expression Language (LCEL)](/v0.1/docs/expression_language/)
*   [Modules](/v0.1/docs/modules/)
    
    *   [Model I/O](/v0.1/docs/modules/model_io/)
        
    *   [Retrieval](/v0.1/docs/modules/data_connection/)
        
    *   [Chains](/v0.1/docs/modules/chains/)
    *   [Agents](/v0.1/docs/modules/agents/)
        
    *   [More](/v0.1/docs/modules/memory/)
        
*   [Security](/v0.1/docs/security/)
*   [Guides](/v0.1/docs/guides/)
    
*   [Ecosystem](/v0.1/docs/ecosystem/)
    
    *   [Integrations](/v0.1/docs/ecosystem/integrations/)
        
    *   [Integrating with LangServe](/v0.1/docs/ecosystem/langserve/)
    *   [LangSmith](https://docs.smith.langchain.com)
*   [LangGraph](/v0.1/docs/langgraph/)
*   * * *
    

*   [](/v0.1/)
*   [Ecosystem](/v0.1/docs/ecosystem/)
*   Integrating with LangServe

On this page

Integrating with LangServe
==========================

[LangServe](https://python.langchain.com/docs/langserve) is a Python framework that helps developers deploy LangChain [runnables and chains](/v0.1/docs/expression_language/) as REST APIs.

If you have a deployed LangServe route, you can use the [RemoteRunnable](https://api.js.langchain.com/classes/langchain_core_runnables_remote.RemoteRunnable.html) class to interact with it as if it were a local chain. This allows you to more easily call hosted LangServe instances from JavaScript environments (like in the browser on the frontend).

Setup[​](#setup "Direct link to Setup")
---------------------------------------

You'll need to install or package LangChain core into your frontend:

*   npm
*   Yarn
*   pnpm

    npm install @langchain/core

    yarn add @langchain/core

    pnpm add @langchain/core

If you are calling a LangServe endpoint from the browser, you'll need to make sure your server is returning CORS headers. You can use FastAPI's built-in middleware for that:

    from fastapi.middleware.cors import CORSMiddleware# Set all CORS enabled originsapp.add_middleware(    CORSMiddleware,    allow_origins=["*"],    allow_credentials=True,    allow_methods=["*"],    allow_headers=["*"],    expose_headers=["*"],)

Usage[​](#usage "Direct link to Usage")
---------------------------------------

Then, you can use any of the [supported LCEL interface methods](/v0.1/docs/expression_language/interface/). Here's an example of how this looks:

    import { RemoteRunnable } from "@langchain/core/runnables/remote";const remoteChain = new RemoteRunnable({  url: "https://your_hostname.com/path",});const result = await remoteChain.invoke({  param1: "param1",  param2: "param2",});console.log(result);const stream = await remoteChain.stream({  param1: "param1",  param2: "param2",});for await (const chunk of stream) {  console.log(chunk);}

#### API Reference:

*   [RemoteRunnable](https://api.js.langchain.com/classes/langchain_core_runnables_remote.RemoteRunnable.html) from `@langchain/core/runnables/remote`

[`streamEvents`](/v0.1/docs/expression_language/interface/) allows you to stream chain intermediate steps as events such as `on_llm_start`, and `on_chain_stream`. See the [table here](/v0.1/docs/expression_language/interface/#stream-events) for a full list of events you can handle. This method allows for a few extra options as well to only include or exclude certain named steps:

    import { RemoteRunnable } from "@langchain/core/runnables/remote";const remoteChain = new RemoteRunnable({  url: "https://your_hostname.com/path",});const logStream = await remoteChain.streamEvents(  {    question: "What is a document loader?",    chat_history: [],  },  // LangChain runnable config properties  {    // Version is required for streamEvents since it's a beta API    version: "v1",    // Optional, chain specific config    configurable: {      llm: "openai_gpt_3_5_turbo",    },    metadata: {      conversation_id: "other_metadata",    },  },  // Optional additional streamLog properties for filtering outputs  {    // includeNames: [],    // includeTags: [],    // includeTypes: [],    // excludeNames: [],    // excludeTags: [],    // excludeTypes: [],  });for await (const chunk of logStream) {  console.log(chunk);}/*  {    event: 'on_chain_start',    name: '/pirate-speak',    run_id: undefined,    tags: [],    metadata: {},    data: {      input: StringPromptValue {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        value: null      }    }  }  {    event: 'on_prompt_start',    name: 'ChatPromptTemplate',    run_id: undefined,    tags: [ 'seq:step:1' ],    metadata: {},    data: {      input: StringPromptValue {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        value: null      }    }  }  {    event: 'on_prompt_end',    name: 'ChatPromptTemplate',    run_id: undefined,    tags: [ 'seq:step:1' ],    metadata: {},    data: {      input: StringPromptValue {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        value: null      },      output: ChatPromptValue {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        messages: [Array]      }    }  }  {    event: 'on_chat_model_start',    name: 'ChatOpenAI',    run_id: undefined,    tags: [ 'seq:step:2' ],    metadata: {},    data: {      input: ChatPromptValue {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        messages: [Array]      }    }  }  {    event: 'on_chat_model_stream',    name: 'ChatOpenAI',    run_id: undefined,    tags: [ 'seq:step:2' ],    metadata: {},    data: {      chunk: AIMessageChunk {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        content: '',        name: undefined,        additional_kwargs: {},        response_metadata: {}      }    }  }  {    event: 'on_chain_stream',    name: '/pirate-speak',    run_id: undefined,    tags: [],    metadata: {},    data: {      chunk: AIMessageChunk {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        content: '',        name: undefined,        additional_kwargs: {},        response_metadata: {}      }    }  }  {    event: 'on_chat_model_stream',    name: 'ChatOpenAI',    run_id: undefined,    tags: [ 'seq:step:2' ],    metadata: {},    data: {      chunk: AIMessageChunk {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        content: 'Arr',        name: undefined,        additional_kwargs: {},        response_metadata: {}      }    }  }  {    event: 'on_chain_stream',    name: '/pirate-speak',    run_id: undefined,    tags: [],    metadata: {},    data: {      chunk: AIMessageChunk {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        content: 'Arr',        name: undefined,        additional_kwargs: {},        response_metadata: {}      }    }  }  {    event: 'on_chat_model_stream',    name: 'ChatOpenAI',    run_id: undefined,    tags: [ 'seq:step:2' ],    metadata: {},    data: {      chunk: AIMessageChunk {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        content: 'r',        name: undefined,        additional_kwargs: {},        response_metadata: {}      }    }  }  {    event: 'on_chain_stream',    name: '/pirate-speak',    run_id: undefined,    tags: [],    metadata: {},    data: {      chunk: AIMessageChunk {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        content: 'r',        name: undefined,        additional_kwargs: {},        response_metadata: {}      }    }  }  {    event: 'on_chat_model_stream',    name: 'ChatOpenAI',    run_id: undefined,    tags: [ 'seq:step:2' ],    metadata: {},    data: {      chunk: AIMessageChunk {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        content: ' mate',        name: undefined,        additional_kwargs: {},        response_metadata: {}      }    }  }  ...  {    event: 'on_chat_model_end',    name: 'ChatOpenAI',    run_id: undefined,    tags: [ 'seq:step:2' ],    metadata: {},    data: {      input: ChatPromptValue {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        messages: [Array]      },      output: { generations: [Array], llm_output: null, run: null }    }  }  {    event: 'on_chain_end',    name: '/pirate-speak',    run_id: undefined,    tags: [],    metadata: {},    data: {      output: AIMessageChunk {        lc_serializable: true,        lc_kwargs: [Object],        lc_namespace: [Array],        content: "Arrr matey, why be ye holdin' back on me? Speak up, what be ye wantin' to know?",        name: undefined,        additional_kwargs: {},        response_metadata: {}      }    }  }*/

#### API Reference:

*   [RemoteRunnable](https://api.js.langchain.com/classes/langchain_core_runnables_remote.RemoteRunnable.html) from `@langchain/core/runnables/remote`

[`streamLog`](/v0.1/docs/expression_language/interface/) is a lower level method for streaming chain intermediate steps as partial JSONPatch chunks. Like `streamEvents`, this method also allows for a few extra options as well to only include or exclude certain named steps:

    import { RemoteRunnable } from "@langchain/core/runnables/remote";const remoteChain = new RemoteRunnable({  // url: "https://your_hostname.com/path",  url: "https://chat-langchain-backend.langchain.dev/chat",});const logStream = await remoteChain.streamLog(  {    question: "What is a document loader?",  },  // LangChain runnable config properties, if supported by the chain  {    configurable: {      llm: "openai_gpt_3_5_turbo",    },    metadata: {      conversation_id: "other_metadata",    },  },  // Optional additional streamLog properties for filtering outputs  {    // includeNames: [],    // includeTags: [],    // includeTypes: [],    // excludeNames: [],    // excludeTags: [],    // excludeTypes: [],  });let currentState;for await (const chunk of logStream) {  if (!currentState) {    currentState = chunk;  } else {    currentState = currentState.concat(chunk);  }}console.log(currentState);/*  RunLog {    ops: [      { op: 'replace', path: '', value: [Object] },      {        op: 'add',        path: '/logs/RunnableParallel<question,chat_history>',        value: [Object]      },      { op: 'add', path: '/logs/Itemgetter:question', value: [Object] },      { op: 'add', path: '/logs/SerializeHistory', value: [Object] },      {        op: 'add',        path: '/logs/Itemgetter:question/streamed_output/-',        value: 'What is a document loader?'      },      {        op: 'add',        path: '/logs/SerializeHistory/streamed_output/-',        value: []      },      {        op: 'add',        path: '/logs/RunnableParallel<question,chat_history>/streamed_output/-',        value: [Object]      },      { op: 'add', path: '/logs/RetrieveDocs', value: [Object] },      { op: 'add', path: '/logs/RunnableSequence', value: [Object] },      {        op: 'add',        path: '/logs/RunnableParallel<question,chat_history>/streamed_output/-',        value: [Object]      },      ... 558 more items    ],    state: {      id: '415ba646-a3e0-4c76-bff6-4f5f34305244',      streamed_output: [        '',           'A',        ' document',   ' loader',     ' is',        ' a',         ' tool',    ' used',       ' to',         ' load',        ' data',      ' from',    ' a',          ' source',     ' as',        ' `',         'Document', '`',           "'",           's',        ',',          ' which',   ' are',        ' pieces',     ' of',        ' text',      ' with',    ' associated', ' metadata',   '.',        ' It',        ' can',     ' load',       ' data',       ' from',        ' various',   ' sources', ',',           ' such',       ' as',        ' a',         ' simple',  ' `.',         'txt',         '`',        ' file',      ',',        ' the',        ' text',       ' contents',        ' of',        ' a',       ' web',        ' page',       ',',        ' or',        ' a',       ' transcript', ' of',         ' a',        ' YouTube',   ' video',   '.',           ' Document',   ' loaders',        ' provide',   ' a',       ' "',          'load',        '"',        ' method',    ' for',     ' loading',    ' data',       ' as',        ' documents', ' from',    ' a',          ' configured', ' source',        ' and',       ' can',     ' optionally', ' implement',  ' a',        ' "',         'lazy',     ' load',       '"',           ' for',        ' loading',   ' data',    ' into',       ' memory',     '.',        ' [',         '1',        ']',           ''      ],      final_output: 'A document loader is a tool used to load data from a source as `Document`\'s, which are pieces of text with associated metadata. It can load data from various sources, such as a simple `.txt` file, the text contents of a web page, or a transcript of a YouTube video. Document loaders provide a "load" method for loading data as documents from a configured source and can optionally implement a "lazy load" for loading data into memory. [1]',      logs: {        'RunnableParallel<question,chat_history>': [Object],        'Itemgetter:question': [Object],        SerializeHistory: [Object],        RetrieveDocs: [Object],        RunnableSequence: [Object],        RunnableLambda: [Object],        'RunnableLambda:2': [Object],        FindDocs: [Object],        HasChatHistoryCheck: [Object],        GenerateResponse: [Object],        RetrievalChainWithNoHistory: [Object],        'Itemgetter:question:2': [Object],        Retriever: [Object],        format_docs: [Object],        ChatPromptTemplate: [Object],        ChatOpenAI: [Object],        StrOutputParser: [Object]      },      name: '/chat',      type: 'chain'    }  }*/

#### API Reference:

*   [RemoteRunnable](https://api.js.langchain.com/classes/langchain_core_runnables_remote.RemoteRunnable.html) from `@langchain/core/runnables/remote`

### Configuration[​](#configuration "Direct link to Configuration")

You can also pass in options for headers and timeouts into the constructor. These will be used when making incoming requests:

    import { RemoteRunnable } from "langchain/runnables/remote";const remoteChain = new RemoteRunnable({  url: "https://your_hostname.com/path",  options: {    timeout: 10000,    headers: {      Authorization: "Bearer YOUR_TOKEN",    },  },});const result = await remoteChain.invoke({  param1: "param1",  param2: "param2",});console.log(result);

#### API Reference:

*   RemoteRunnable from `langchain/runnables/remote`

* * *

#### Help us out by providing feedback on this documentation page:

[

Previous

Unstructured

](/v0.1/docs/ecosystem/integrations/unstructured/)[

Next

LangGraph

](/v0.1/docs/langgraph/)

*   [Setup](#setup)
*   [Usage](#usage)
    *   [Configuration](#configuration)

Community

*   [Discord](https://discord.gg/cU2adEyC7w)
*   [Twitter](https://twitter.com/LangChainAI)

GitHub

*   [Python](https://github.com/langchain-ai/langchain)
*   [JS/TS](https://github.com/langchain-ai/langchainjs)

More

*   [Homepage](https://langchain.com)
*   [Blog](https://blog.langchain.dev)

Copyright © 2024 LangChain, Inc.