Merge branch 'main' into ms/add-chat-ui-example

.changeset/fresh-dancers-refuse.md

@@ -0,0 +1,5 @@
+---
+"chat-ui": patch
+---
+
+Add example using chat-ui components

apps/next/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@icons-pack/react-simple-icons": "^10.1.0",
+    "@llamaindex/chat-ui": "0.0.5",
     "@llamaindex/cloud": "workspace:*",
     "@llamaindex/core": "workspace:*",
     "@llamaindex/node-parser": "workspace:*",

apps/next/src/app/api/chat/route.ts

@@ -0,0 +1,30 @@
+import { LlamaIndexAdapter, type Message } from "ai";
+import { SimpleChatEngine, type ChatMessage } from "llamaindex";
+import { NextResponse, type NextRequest } from "next/server";
+
+export async function POST(request: NextRequest) {
+  try {
+    const { messages } = (await request.json()) as { messages: Message[] };
+    const userMessage = messages[messages.length - 1];
+    if (!userMessage || userMessage.role !== "user") {
+      return NextResponse.json(
+        { detail: "Last message is not a user message" },
+        { status: 400 },
+      );
+    }
+
+    const chatEngine = new SimpleChatEngine();
+
+    return LlamaIndexAdapter.toDataStreamResponse(
+      await chatEngine.chat({
+        message: userMessage.content,
+        chatHistory: messages as ChatMessage[],
+        stream: true,
+      }),
+      {},
+    );
+  } catch (error) {
+    const detail = (error as Error).message;
+    return NextResponse.json({ detail }, { status: 500 });
+  }
+}

apps/next/src/components/demo/chat.tsx

@@ -0,0 +1,8 @@
+"use client";
+import { ChatSection } from "@llamaindex/chat-ui";
+import { useChat } from "ai/react";
+
+export const ChatDemo = () => {
+  const handler = useChat();
+  return <ChatSection handler={handler} />;
+};

apps/next/src/content/docs/llamaindex/guide/chat.mdx

@@ -0,0 +1,46 @@
+---
+title: Chat-UI 
+description: Use chat-ui to add a chat interface to your LlamaIndexTS application.
+---
+import { ChatDemo } from '../../../../components/demo/chat';
+import "@llamaindex/chat-ui/styles/code.css";
+import "@llamaindex/chat-ui/styles/katex.css";
+
+Using [chat-ui](https://github.com/run-llama/chat-ui), it's easy to add a chat interface to your LlamaIndexTS application.
+You just need to create an API route that provides an `api/chat` endpoint and a chat component to consume the API.
+
+## API route
+
+As an example, this is an API route for the Next.js App Router. Copy the following code into your `app/api/chat/route.ts` file to get started:
+
+```json doc-gen:file
+{
+  "file": "./src/app/api/chat/route.ts",
+	"codeblock": true
+}
+```
+
+## Chat UI
+
+This is the simplest way to add a chat interface to your application. Copy the following code into your application to consume the API:
+
+```json doc-gen:file
+{
+  "file": "./src/components/demo/chat.tsx",
+	"codeblock": true
+}
+```
+
+## Try it out ⬇️
+
+Combining both, you're getting a fully functional chat interface:
+
+<ChatDemo />
+
+## Next Steps
+
+The steps above are the bare minimum to get a chat interface working. From here, you can go two ways:
+
+1. Use [create-llama](https://github.com/run-llama/create-llama) to scaffold a new LlamaIndexTS project including complex API routes and chat interfaces or
+2. Learn more about [chat-ui](https://github.com/run-llama/chat-ui) and [LlamaIndexTS](https://github.com/run-llama/llamaindex-ts) to customize the chat interface and API routes to your needs.
+

apps/next/src/content/docs/llamaindex/guide/meta.json

@@ -1,5 +1,5 @@
 {
   "title": "Guide",
   "description": "See our guide",
-  "pages": ["workflow"]
+  "pages": ["workflow", "chat"]
 }

apps/next/tailwind.config.js

@@ -10,6 +10,7 @@ export default {
     "./src/mdx-components.{ts,tsx}",
     "./node_modules/fumadocs-ui/dist/**/*.js",
     "./node_modules/fumadocs-openapi/dist/**/*.js",
+    "./node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}",
   ],
   presets: [createPreset()],
   // eslint-disable-next-line @typescript-eslint/no-require-imports