Skip to content

Latest commit

 

History

History
161 lines (128 loc) · 3.63 KB

README.md

File metadata and controls

161 lines (128 loc) · 3.63 KB
title
assistant-ui Trieve Integration

Overview

Integration with Trieve. 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

import { Steps, Step } from "fumadocs-ui/components/steps";

### 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-ui @assistant-ui/react-trieve trieve-ts-sdk

Set up environment variables

NEXT_PUBLIC_TRIEVE_API_URL=https://api.trieve.ai
NEXT_PUBLIC_TRIEVE_API_KEY="tr-*********************"
NEXT_PUBLIC_TRIEVE_DATASET_ID="********-****-****-****-************"
### Setup Trieve SDK 
// @errors: 2307 2580
"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

// @filename: /app/MyRuntimeProvider.tsx
// ---cut---
"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

// @include: MyRuntimeProvider
// @filename: /app/layout.tsx
// ---cut---
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

// @include: MyRuntimeProvider
// @filename: /app/layout.tsx
// ---cut---
import { Thread } from "@assistant-ui/react-ui";
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>
  );
}