​
Frontend Integration

Inferable provides a flexible, hooks-based React SDK for building custom AI copilot interfaces in your React applications.

While we currently offer official support for React, Inferable is API-driven at its core, allowing you to build integrations for any platform or framework by directly utilizing our HTTP APIs.

​
React SDK Integration

The React SDK provides a hooks-based foundation for integrating AI agents into your frontend application. This approach gives you complete control over the user interface and interaction design, perfect for creating custom copilot experiences or conversational interfaces that match your application’s look and feel.

import { useInferable, useRun, useMessages } from "@inferable/react";

function Chat() {
  // Initialize the Inferable client
  const inferable = useInferable({
    clusterId: "your-cluster-id",
    ...authSettings,
  });

  const { createMessage, messages, setRunId } = useRun(inferable);

  // Get utility functions for working with messages
  const messages = useMessages(run.messages);

  return (
    <div>
      {/* Display messages */}
      {messages.all("asc")?.map((msg) => (
        <div key={msg.id}>
          {msg.type === "human" ? "You: " : "Assistant: "}
          {msg.data.message}
        </div>
      ))}

      {/* Message input */}
      <input
        onKeyPress={(e) => {
          if (e.key === "Enter") {
            if (!run?.id) {
              const { id } = await inferable.createRun({
                initialPrompt: message,
                interactive: true,
              });
              setRunId(id);
            } else {
              await createMessage(message);
            }
            e.target.value = "";
          }
        }}
        placeholder={"Type your message..."}
      />
    </div>
  );
}

For the examples and more details see Inferable React SDK Github

​
Demo

This is a demo of the React SDK in action.

​
Authentication

React SDK allows you to authenticate with your Inferable API secret key. However, this is not recommended for production environments as it exposes your API key to the client.

Instead, we have implemented a Custom Auth method that allows you to authenticate a user with your own authentication system. Typically, the custom auth token in this case would be your user’s session token.

Was this page helpful?

Suggest edits
Architecture Deep DiveCustom Authn & Authz