Introducing assistant-ui Runtime for Inferable

Build beautiful conversational AI interfaces with Inferable and assistant-ui. Open-source components for chat-based LLM applications.

John Smith on 11-12-2024

Yonom/assistant-ui provides a set of open-source components that can be used to build chat-based LLM applications.

Today we have relased @inferable/assistant-ui, an adapter that allows you to use Yonom/assistant-ui to build conversational UIs powered by Inferable.

Features

Inferable makes it easy to build conversational applications (Agents, Copilots, etc) quickly by providing a number of features out of the box:

Chat State Management

Inferable Runs are stateful and maintain chat history. This makes it easier to build conversational applications as the message history is managed and automatically truncated as needed.

Frontend-safe Authentication

Most model providers recommend against calling their API's directly from the frontend as this would expose the API key.

The Inferable API's can be used from the frontend directly by allowing for your to manage your own Authentication strategy.

Distributed Tool Calling

With Inferable, it is possible to build a custom conversational AI application in the frontend without needing to expose any API endpoints. These applications can leverage functions within your backend services, handling concerns such as authentication and routing.

Getting Started

It is really simple to get started building a Chat UI with @inferable/assistant-ui and Yonom/assistant-ui:

import { AssistantRuntimeProvider, Thread } from "@assistant-ui/react";
import { useInferableRuntime } from "@inferable/assistant-ui";

const MyPage = () => {
  const { runtime, run } = useInferableRuntime({
    clusterId: "<YOUR_CLUSTER_ID>",
    customAuthToken: "<YOUR_CUSTOM_API_SECRET>",
    // runId: existingRunId, // Optional, continue an existing run
    onError: (error) => {
      console.error(error);
    },
  });

  if (!run) {
    return <div className="center">Loading...</div>;
  }

  return (
    <div className="h-full">
      <AssistantRuntimeProvider runtime={runtime}>
        <Thread />
      </AssistantRuntimeProvider>
    </div>
  );
};

That's it!

Learn More

Explore our frontend usage documentation for detailed setup instructions and check out our GitHub repository to get started today!