| title |
|---|
assistant-ui Trieve Integration |
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.
import { Steps, Step } from "fumadocs-ui/components/steps";
### Create a Next.JS projectnpx create-next-app@latest my-app
cd my-appnpm install @assistant-ui/react @assistant-ui/react-ui @assistant-ui/react-trieve trieve-ts-sdkNEXT_PUBLIC_TRIEVE_API_URL=https://api.trieve.ai
NEXT_PUBLIC_TRIEVE_API_KEY="tr-*********************"
NEXT_PUBLIC_TRIEVE_DATASET_ID="********-****-****-****-************"// @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"]!,
});// @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>
);
};// @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>
);
}// @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>
);
}