---
sidebar_label: 'LangChain LangServe'
---

import {PlatformSelector} from '@site/src/components/PlatformSelector/PlatformSelector';
import {PlatformSection} from '@site/src/components/PlatformSection/PlatformSection';

import ReactJs from './_001-langchain-langserve/#react.mdx';
import Javascript from './_001-langchain-langserve/#js.mdx';

import InstallationJavascript from './_001-langchain-langserve/#js/installation.mdx';
import InstallationReactJs from './_001-langchain-langserve/#react/installation.mdx';

import UsageJavascript from './_001-langchain-langserve/#js/usage.mdx';
import UsageReactJs from './_001-langchain-langserve/#react/usage.mdx';

import ConfigJavascript from './_001-langchain-langserve/#js/config.mdx';
import ConfigReactJs from './_001-langchain-langserve/#react/config.mdx';

import ConfigUrlJavascript from './_001-langchain-langserve/#js/config/url.mdx';
import ConfigUrlReactJs from './_001-langchain-langserve/#react/config/url.mdx';

import ConfigUseInputSchemaJavascript from './_001-langchain-langserve/#js/config/useInputSchema.mdx';
import ConfigUseInputSchemaReactJs from './_001-langchain-langserve/#react/config/useInputSchema.mdx';

import ConfigDataTransferModeJavascript from './_001-langchain-langserve/#js/config/dataTransferMode.mdx';
import ConfigDataTransferModeReactJs from './_001-langchain-langserve/#react/config/dataTransferMode.mdx';

import ConfigInputPreProcessorJavascript from './_001-langchain-langserve/#js/config/inputPreProcessor.mdx';
import ConfigInputPreProcessorReactJs from './_001-langchain-langserve/#react/config/inputPreProcessor.mdx';

import ConfigOutputPreProcessorJavascript from './_001-langchain-langserve/#js/config/outputPreProcessor.mdx';
import ConfigOutputPreProcessorReactJs from './_001-langchain-langserve/#react/config/outputPreProcessor.mdx';

# LangChain LangServe

[LangChain](https://www.langchain.com/) is a popular framework for building backend services powered by large language
models. It enables applications that are context-aware. It allows connecting a language model to sources of context
such as databases, APIs, and other services. It also relies on language models to reason about the context.

[LangServe](https://www.langchain.com/langserve) is a library that comes with LangChain, and that allows developers to
build Restful APIs that can be used to interact with language models. A LangServe API provides a set of pre-defined
endpoints and an input/out schema that can be used to interact with the language model.

This documentation page is about the standard adapter provided by `NLUX` for APIs built using LangServe.

<PlatformSelector reactJs={ReactJs} javascript={Javascript}/>

## Installation

<PlatformSection reactJs={InstallationReactJs} javascript={InstallationJavascript}/>

## Usage

<PlatformSection reactJs={UsageReactJs} javascript={UsageJavascript}/>

## Configuration

<PlatformSection reactJs={ConfigReactJs} javascript={ConfigJavascript}/>

---

### Runnable URL

This is the URL of the LangServe API.<br />
Example: `https://my-langserver-api.example.com/parrot-speaks`

Do **NOT** append the specific LangServe endpoint (such as `/invoke` `/stream` or `/input_schema`) to the URL.
The adapter will automatically append the endpoint to the URL based on other configuration.

<PlatformSection reactJs={ConfigUrlReactJs} javascript={ConfigUrlJavascript}/>

---

### Data Transfer Mode

The data transfer mode to use when communicating with the LangServe runnable.
`NLUX` LangServe adapter supports `stream` and `fetch` modes.

When the adapter is configured to use `stream` mode, the `/stream` endpoint of the LangServe API will be used to
communicate with the runnable. When the adapter is configured to use `fetch` mode, the `/invoke` endpoint will be used.

<PlatformSection reactJs={ConfigDataTransferModeReactJs} javascript={ConfigDataTransferModeJavascript}/>

---

### Input Pre-Processor

The input pre-processor is a function that is called before sending the input to the LangServe API.
It can be used to transform the input before sending it to the runnable.

Whatever this function returns will be sent to the runnable under the `input` property.

Example: If your runnable expects an object with `user_prompt` and `additional_data` properties, you can use the
following input pre-processor in the example below to transform the input.

<PlatformSection reactJs={ConfigInputPreProcessorReactJs} javascript={ConfigInputPreProcessorJavascript}/>

---

### Output Pre-Processor

The output pre-processor is a function that is called after receiving the output from the LangServe API.
The `output` parameter of this function will get the part of the response from the runnable returned
under the `output` property.

This function returns a string that will be used displayed in the `NLUX` conversational UI.

Example: If your runnable returns an object with `value` and `base` properties, you can use the out in the
example below to transform the output to a string.

<PlatformSection reactJs={ConfigOutputPreProcessorReactJs} javascript={ConfigOutputPreProcessorJavascript}/>

---

### Use Input Schema

When no `inputPreProcessor` is provided, the LangServe adapter will attempt to call `/input_schema`
endpoint on the LangServe runnable and build the input according to the schema retrieved.
Set this option to `false` to disable this behavior.

If disabled, the input will be sent to the runnable as a string without any transformation.

<PlatformSection reactJs={ConfigUseInputSchemaReactJs} javascript={ConfigUseInputSchemaJavascript}/>