Trieve Cloud

Overview

Integration with Trieve Cloud. You will need to get a Trieve Cloud account and set up a dataset to use this runtime at https://dashboard.trieve.ai.

This runtime will allow you to use Trieve Cloud to manage your assistant's responses, along with the ability to use Trieve's advanced features like tagging, filtering, analytics, and more.

Getting Started

Create a Next.JS project

npx create-next-app@latest my-app
cd my-app

Install `trieve-ts-sdk`, `@assistant-ui/react-trieve` and `@assistant-ui/react`

npm install @assistant-ui/react @assistant-ui/react-trieve trieve-ts-sdk

Set up environment variables

.env

NEXT_PUBLIC_TRIEVE_API_URL=https://api.trieve.ai
NEXT_PUBLIC_TRIEVE_API_KEY="tr-*********************"
NEXT_PUBLIC_TRIEVE_DATASET_ID="********-****-****-****-************"

Setup Trieve SDK

@/app/trieve.tsx

"use client";
 
import { TrieveSDK } from "trieve-ts-sdk";
 
export const trieve = new TrieveSDK({
  baseUrl: process.env["NEXT_PUBLIC_TRIEVE_API_URL"]!,
  apiKey: process.env["NEXT_PUBLIC_TRIEVE_API_KEY"]!,
  datasetId: process.env["NEXT_PUBLIC_TRIEVE_DATASET_ID"]!,
});

Define a `MyRuntimeProvider` component

@/app/MyRuntimeProvider.tsx

"use client";
 
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useTrieveRuntime } from "@assistant-ui/react-trieve";
import { trieve } from "@/app/trieve";
 
export const TrieveRuntimeProvider = () => {
 const runtime = useTrieveRuntime({
    trieve,
    // Define what you want to key the owners for threads on
    ownerId: "abcd",
    // Define tags that you want to use for filtering
    tags: [
      {
        name: "Stories",
        value: "story",
      }
    ],
  });
 
  return (
    <AssistantRuntimeProvider runtime={runtime}>
       {children}
    </AssistantRuntimeProvider>
  );
};

Wrap your app in `MyRuntimeProvider`

@/app/layout.tsx

import type { ReactNode } from "react";
import { TrieveRuntimeProvider } from "@/app/MyRuntimeProvider";
 
export default function RootLayout({
  children,
}: Readonly<{
  children: ReactNode;
}>) {
  return (
    <TrieveRuntimeProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </TrieveRuntimeProvider>
  );
}

Example Usage

@/app/layout.tsx

import { Thread } from "@assistant-ui/react";
import {
  makeTrieveMarkdownText,
  TrieveComposer,
  TrieveThreadWelcome,
  useTrieveExtras,
} from "@assistant-ui/react-trieve";
 
const TrieveMarkdownText = makeTrieveMarkdownText();
 
export default function MyAssistant() {
  const { title } = useTrieveExtras();
 
  return (
    <div className="flex h-full flex-col overflow-hidden pt-8">
      <p className="text-center text-xl font-bold">{title}</p>
      <div className="flex-grow overflow-hidden">
        <Thread
          components={{
            Composer: TrieveComposer,
            ThreadWelcome: TrieveThreadWelcome,
          }}
          assistantMessage={{ components: { Text: TrieveMarkdownText } }}
        />
      </div>
    </div>
  );
}

Trieve Cloud

On this page