Chat with your assistants Next.js example

examples/next-js-demos/chat-with-your-assistants/.env.example

@@ -0,0 +1,6 @@
+# Required - OpenAI API key for chat
+OPENAI_API_KEY=''
+
+# Optional - Vercel KV for rate limiting
+KV_REST_API_URL=''
+KV_REST_API_TOKEN=''

examples/next-js-demos/chat-with-your-assistants/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/next-js-demos/chat-with-your-assistants/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/next-js-demos/chat-with-your-assistants/README.md

@@ -0,0 +1,47 @@
+# 🤖 AI Chat App - Chat with your assistants
+
+![Chat with your assistants demo app](app/opengraph-image.png)
+
+This demo app is a chat app that allows you to chat with different assistants.
+
+It uses [NLUX](https://docs.nlkit.com/nlux/) for the AIChat component and the communication with the LLM provider.
+
+## 🌟 Key Features
+
+- 🤖 Chat with Multiple AI Assistants
+- 💾 Persistent Conversations via Local Storage
+- 📅 Conversation Sorting by Recent Activity
+- 🔍 Search for Conversations
+- 🗃️ Conversation history as context
+
+## 🛠️ Tech Stack
+
+- 🔥 Next.js: For blazing-fast, SEO-friendly React applications
+- 🎨 TailwindCSS: Utility-first CSS framework for rapid UI development
+- 🖌️ Shadcn UI: Beautiful, customizable UI components
+- 🧠 NLUX: Powerful AI integration for natural language processing
+- 🪄 OpenAI: OpenAI LLM provider
+
+## 🚀 Getting Started
+
+Install the npm packages
+
+```bash
+npm install
+# or
+yarn
+# or
+pnpm install
+```
+
+Run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

examples/next-js-demos/chat-with-your-assistants/adapter/openai.ts

@@ -0,0 +1,71 @@
+import { clipChatMessagesUpToNTokens } from "@/lib/conversations";
+import {
+  ChatAdapter,
+  ChatAdapterExtras,
+  ChatItem,
+  StreamingAdapterObserver,
+} from "@nlux/react";
+
+const demoProxyServerUrl = "/api/chat";
+
+function chatHistoryMessageInSingleString(
+  chatHistory: (ChatItem<string[]> | ChatItem<string>)[]
+): ChatItem<string>[] {
+  return chatHistory.map((m) => {
+    return {
+      role: m.role,
+      message: typeof m.message === "string" ? m.message : m.message.join(""),
+    };
+  });
+}
+
+// Adapter to send query to the server and receive a stream of chunks as response
+export const openAiAdapter: () => ChatAdapter = () => ({
+  streamText: async (
+    prompt: string,
+    observer: StreamingAdapterObserver,
+    extras: ChatAdapterExtras
+  ) => {
+    const body = {
+      prompt,
+      messages: clipChatMessagesUpToNTokens(
+        chatHistoryMessageInSingleString(extras.conversationHistory || []),
+        200
+      ).map((m) => ({ role: m.role, content: m.message })),
+    };
+    const response = await fetch(demoProxyServerUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+
+    if (response.status !== 200) {
+      observer.error(new Error("Failed to connect to the server"));
+      return;
+    }
+
+    if (!response.body) {
+      return;
+    }
+
+    // Read a stream of server-sent events
+    // and feed them to the observer as they are being generated
+    const reader = response.body.getReader();
+    const textDecoder = new TextDecoder();
+
+    let doneStream = false;
+    while (!doneStream) {
+      const { value, done } = await reader.read();
+      if (done) {
+        doneStream = true;
+      } else {
+        const content = textDecoder.decode(value);
+        if (content) {
+          observer.next(content);
+        }
+      }
+    }
+
+    observer.complete();
+  },
+});

examples/next-js-demos/chat-with-your-assistants/app/api/chat/route.ts

@@ -0,0 +1,53 @@
+import { openai } from "@ai-sdk/openai";
+import { streamText } from "ai";
+import { kv } from "@vercel/kv";
+import { Ratelimit } from "@upstash/ratelimit";
+import { env } from "process";
+
+export async function POST(req: Request) {
+  if (env.KV_REST_API_URL && env.KV_REST_API_TOKEN) {
+    // Rate limiting
+    const ratelimit = new Ratelimit({
+      redis: kv,
+      limiter: Ratelimit.slidingWindow(50, "1 d"),
+    });
+    const ip = req.headers.get("x-forwarded-for");
+
+    const { success, limit, reset, remaining } = await ratelimit.limit(
+      `chat_app_ratelimit_${ip}`
+    );
+
+    if (!success) {
+      return new Response("You have reached your request limit for the day.", {
+        status: 429,
+        headers: {
+          "X-RateLimit-Limit": limit.toString(),
+          "X-RateLimit-Remaining": remaining.toString(),
+          "X-RateLimit-Reset": reset.toString(),
+        },
+      });
+    }
+  }
+
+  const { prompt, messages } = await req.json();
+
+  //  API KEY defaults to the OPENAI_API_KEY environment variable.
+  const result = await streamText({
+    model: openai("gpt-3.5-turbo"),
+    messages: [
+      ...messages,
+      {
+        role: "user",
+        content: prompt,
+      },
+    ],
+    maxTokens: 1000,
+
+    async onFinish({ text, toolCalls, toolResults, usage, finishReason }) {
+      // implement your own logic here, e.g. for storing messages
+      // or recording token usage
+    },
+  });
+
+  return result.toTextStreamResponse();
+}

examples/next-js-demos/chat-with-your-assistants/app/globals.css

@@ -0,0 +1,73 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --border: 0 0% 94.8%;
+    --input: 0 0% 89.8%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --border: 0 0% 11.9%;
+    --input: 0 0% 14.9%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.nlux-AiChat-root > .nlux-chatRoom-container > .nlux-launchPad-container,
+.nlux-AiChat-root > .nlux-chatRoom-container > .nlux-conversation-container {
+  z-index: 30;
+}
+
+/* .nlux-comp-composer > textarea,
+.nlux-comp-composer > textarea:hover {
+  background-color: transparent;
+
+} */
+
+.nlux-AiChat-root.nlux-theme-nova.nlux-colorScheme-dark.nlux-AiChat-style {
+  --nlux-ChatRoom--BackgroundColor: transparent;
+}

examples/next-js-demos/chat-with-your-assistants/app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Chat App",
+  description: "Chat with your assistants",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <ThemeProvider>
+        <body className={inter.className}>{children}</body>
+      </ThemeProvider>
+    </html>
+  );
+}