Langbase

usePipe()

You can use the Langbase usePipe() React hook to generate text or handle stream from model provider. It internally manages the state and provides all the necessary callbacks and properties to work with LLM.

Check out how to use the usePipe() hook in this example.

API reference

usePipe(options)

Handle text or stream from model provider.

hook Signature

usePipe(options); // With types. usePipe(options: UsePipeOptions)

options

    UsePipeOptions

  • Name
    options
    Type
    UsePipeOptions
    Description

    UsePipeOptions Object

    interface UsePipeOptions { apiRoute?: string; onResponse?: (message: Message) => void; onFinish?: (messages: Message[]) => void; onConnect?: () => void; onError?: (error: Error) => void; threadId?: string; initialMessages?: Message[]; stream?: boolean; }

    Following are the properties of the options object.

apiRoute

  • Name
    apiRoute
    Type
    string
    Description

    The API route to call that returns LLM response.

onResponse

  • Name
    onResponse
    Type
    (message: Message) => void
    Description

    The callback function that is called when a response is received from the API.

    • Name
      messages
      Type
      Message
      Description

      The message object.

onFinish

  • Name
    onFinish
    Type
    (message: Message) => void
    Description

    The callback function that is called when the API call is finished.

    • Name
      messages
      Type
      Message
      Description

      The message object.

onConnect

  • Name
    onConnect
    Type
    () => void
    Description

    The callback function that is called when the API call is connected.

onError

  • Name
    onError
    Type
    (error: Error) => void;
    Description

    The callback function that is called when an error occurs.

    • Name
      error
      Type
      Error
      Description

      The error object containing information about what went wrong.

threadId

  • Name
    threadId
    Type
    string | undefined
    Description

    The ID of the thread. Enable if you want to continue the conversation in the same thread from the second message onwards. Works only with deployed pipes.

    • If threadId is not provided, a new thread will be created. E.g. first message of a new chat will not have a threadId.
    • After the first message, a new threadId will be returned.
    • Use this threadId to continue the conversation in the same thread from the second message onwards.

initialMessages

  • Name
    initialMessages
    Type
    Message[] | undefined
    Description

    An array of messages to be sent to the LLM.

    • Name
      messages
      Type
      Message
      Description

      The message object.

stream

  • Name
    stream
    Type
    boolean | undefined
    Description

    Whether to stream the response from the API.

    Default: true

Return Object

The usePipe hook returns the following object:

usePipe return object

interface UsePipeReturn { input: string; stop: () => void; isLoading: boolean; error: Error | null; messages: Message[]; threadId: string | null; setMessages: (newMessages: Message[]) => void; regenerate: (options: PipeRequestOptions) => Promise<void>; sendMessage: (content: string, options: PipeRequestOptions) => Promise<void>; handleInputChange: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void; handleSubmit: (event?: React.FormEvent<HTMLFormElement>, options: PipeRequestOptions) => void; }
  • Name
    input
    Type
    string
    Description

    The input value of the input field.

  • Name
    stop
    Type
    () => void
    Description

    A function that stops the response from the API.

  • Name
    isLoading
    Type
    boolean
    Description

    A boolean value that indicates whether the API call is in progress.

  • Name
    error
    Type
    Error | null
    Description

    The error object containing information about what went wrong.

  • Name
    messages
    Type
    Message
    Description

    The message object.

  • Name
    threadId
    Type
    string | null
    Description

    The ID of the thread. Enable if you want to continue the conversation in the same thread from the second message onwards. Works only with deployed pipes.

    • If threadId is not provided, a new thread will be created. E.g. first message of a new chat will not have a threadId.
    • After the first message, a new threadId will be returned.
    • Use this threadId to continue the conversation in the same thread from the second message onwards.
  • Name
    setMessages
    Type
    (newMessages: Message[]) => void
    Description

    A function that sets the messages.

  • Name
    messages
    Type
    Message
    Description

    The message object.

  • Name
    regenerate
    Type
    (options: PipeRequestOptions) => Promise<void
    Description

    A function that regenerates the response from the API.

  • Name
    sendMessage
    Type
    (content: string, options: PipeRequestOptions) => Promise<void>
    Description

    A function that sends a message to the API.

    • Name
      content
      Type
      string
      Description

      The content of the message.

  • Name
    handleInputChange
    Type
    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
    Description

    A function that handles the input change event.

  • Name
    handleSubmit
    Type
    (e?: React.FormEvent<HTMLFormElement>, options: PipeRequestOptions) => void
    Description

    A function that handles the form submit and call the API.

usePipe hook example

usePipe()

import { usePipe } from 'langbase/react'; export default function ChatComponent() { const { stop, input, error, messages, threadId, isLoading, regenerate, setMessages, sendMessage, handleSubmit, handleInputChange, } = usePipe({ stream: true, apiRoute: '<REPLACE-WITH-YOUR-API-ROUTE>', onResponse: (message) => {}, onFinish: (messages) => {}, onError: (error) => {}, initialMessages: [ {role: 'assistant', content: 'Hello! How can I help you?'}, {role: 'user', content: 'Who is an AI engineer?'}, ], // You can set initial messages here if needed }); // UI return <></> }