​
Overview

Inferable supports usage from front-end applications including via the React SDK. This makes it possible to trigger runs from your React application without needing to proxy the requests through your service’s API.

​
Installation

npm install @inferable/react

​
Authentication

When calling the Inferable API’s from the browser, it is strongly recomended not to use an Inferable Cluster API keys as these will be exposed to the client. Instead, Inferable provides a mechanisim for authenticating your own Customer Provided Secrets.

You can pass a session token or similar to the Inferable API and then validate this using a handleCustomerAuth function registered from your service’s backend.

This also has the benifit of being able to propogate user-specific auth context to vary the run’s function call based on the user’s session.

For more details on authentication, see Authentication.

​
Run Configuration

Runs can only be triggered from existing Run Configurations which have been marked as “public”. This allows you to restrict the configuration of Runs triggered from the front-end. For example, defining an initialPrompt and inputSchema on the configuration will limit the run’s input to a an object matching the inputSchema.

For more details on run configurations, see Run Configurations.

​
useRun

The useRun hook returns an object with the following properties:

{
  createMessage: Function;  // Function to add new messages to the run
  messages: Message[];      // Array of all messages in the run
  run?: Run;               // Current run status and metadata
  start: Function;         // Function to start the run
}

​
Basic Usage

The following example uses the useRun hook to trigger a run based on a button click and display the results once ready:

import { useRun } from "@inferable/react";

function MyComponent() {
  const { start, run } = useRun({
    clusterId: "MY_CLUSTER_ID",
    config: {
      id: "MY_CONFIG_ID",
      // input: {...} // Only if an inputSchema is defined in the run configuration
    },
    initialPrompt: "What are my orders?", // Only if an initialPrompt is not defined in the run configuration
    customerProvidedSecret: "MY_CUSTOMER_PROVIDED_SECRET",
  });

  const handleClick = () => {
    start();
  };

  return (
    <div>
      <button onClick={handleClick}>Find Orders</button>
      {run?.status === "done" && (
        <pre>{JSON.stringify(run.result, null, 2)}</pre>
      )}
    </div>
  );
}

​
Interactive Usage (Chat)

The following example uses the useRun hook to create a simple chat interface: In this example, we are continuing an existing run by passing the runId.

import { useRun } from "@inferable/react";

function ChatComponent() {
  const [input, setInput] = useState("");
  const { start, createMessage, messages, run } = useRun({
    clusterId: "MY_CLUSTER_ID",
    runId: "MY_EXISINT_RUN_ID",
    customerProvidedSecret: "MY_CUSTOMER_PROVIDED_SECRET",
  });

  useEffect(() => {
    start();
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    createMessage({ type: "human", message: input });
    setInput("");
  };

  return (
    <div>
      <div className="messages">
        {messages.map((msg, i) => (
          <div key={i}>
            <strong>{msg.type}:</strong>{" "}
            <pre>{JSON.stringify(msg, null, 2)}</pre>
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type a message..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

Was this page helpful?

Choosing InferableAdopting Inferable