@assistant-ui/mcp-docs-server 0.1.6 → 0.1.8

package/.docs/organized/code-examples/search-agent-for-e-commerce.md

@@ -1,1721 +0,0 @@
-# Example: search-agent-for-e-commerce
-
-## app/actions.tsx
-
-```tsx
-"use server";
-
-import { openai } from "@ai-sdk/openai";
-import { createAI, getMutableAIState, streamUI } from "ai/rsc";
-import { nanoid } from "nanoid";
-import type { ReactNode } from "react";
-import { z } from "zod";
-import { CarouselPlugin } from "../components/ui/productcarousel";
-import fs from "fs";
-import path from "path";
-import { streamText } from "ai";
-
-export interface ServerMessage {
-  role: "user" | "assistant";
-  content: string;
-}
-
-export interface ClientMessage {
-  id: string;
-  role: "user" | "assistant";
-  display: ReactNode;
-}
-
-export async function continueConversation(
-  input: string,
-  indexId: string,
-): Promise<ClientMessage> {
-  "use server";
-
-  const history = getMutableAIState();
-
-  const result = await streamUI({
-    model: openai("gpt-3.5-turbo"),
-    temperature: 0,
-    system: `\
-    You are a friendly assistant that helps the user with shopping on a ecommerce website ('DUMMY SHOP'). You help users with end-to-end shopping experience
-    starting from general information about the brands and products, and helping with product discovery, search, and product details, as well as
-    product purchase, customer support, fitting questions, technical questions.
-    Your responses are solely based on the provided context about the store and its products.
-    Right now, the user clicked on the AI assistant widget and your job is to determine their intent.
-    The user intent migth not be clear, in this case you ask clarifications questions.
-    The user quesiton might not be complete, in this case you ask for follow up questions.
-      
-    Here's a list of user intents to pick from: 
-    - Product search
-    - Guideline for clothes fitting
-    - Product specific questions
-    - Customer support questions (e.g. track purchase, payment issues, order issues)
-    - Escalate to human agent
-    - Ask a clarification/follow up question
-    - Product comparison
-    - Promotions, hot deals
-    `,
-    messages: [...history.get(), { role: "user", content: input, indexId }],
-    text: ({ content, done }) => {
-      if (done) {
-        history.done((messages: ServerMessage[]) => [
-          ...messages,
-          { role: "assistant", content },
-        ]);
-      }
-      return <div>{content}</div>;
-    },
-    // toolChoice: 'required', // force the model to call a tool
-    // maxToolRoundtrips: 5, // allow up to 5 tool roundtrips
-    tools: {
-      product_search: {
-        description:
-          "Search for products on this website using pre-built indices",
-        parameters: z.object({
-          query: z
-            .string()
-            .describe(
-              "A clear factual product query, potentially including type, name, qualities, characteristics of the product",
-            ),
-        }),
-        generate: async ({ query }) => {
-          try {
-            console.log("query=", query);
-            const response = await fetch(
-              `https://dummyjson.com/products/search?q=${query}`,
-            );
-            const data = (await response.json()) as {
-              products: {
-                thumbnail: string;
-                title: string;
-                description: string;
-                price: string;
-                url: string;
-              }[];
-            };
-            console.log("data=", data);
-            if (data.products && data.products.length > 0) {
-              const products = data.products.map((item) => ({
-                thumbnail: item.thumbnail,
-                title: item.title,
-                description: item.description,
-                metadata_3: item.price,
-                link: item.url,
-              }));
-              return <CarouselPlugin products={products} />;
-            } else {
-              return <p>No products found.</p>;
-            }
-          } catch {
-            return (
-              <p>
-                Sorry, we are experiencing some error. Please refresh the chat
-                and try again.
-              </p>
-            );
-          }
-        },
-      },
-      general_question: {
-        description: "User questions not related to products directly",
-        parameters: z.object({
-          user_question: z
-            .string()
-            .describe("User questions not related to products directly"),
-        }),
-        generate: async function* ({ user_question }) {
-          const filePath = path.resolve(process.cwd(), "public/shop_info.txt");
-          const generalInfo = fs.readFileSync(filePath, "utf-8");
-          const result = streamText({
-            model: openai("gpt-3.5-turbo"),
-            temperature: 0,
-            prompt: `Generate response to user question ${user_question} based on the context ${generalInfo}`,
-          });
-          let textContent = "";
-
-          for await (const textPart of result.textStream) {
-            textContent += textPart;
-            yield textContent;
-          }
-          return textContent;
-        },
-      },
-      clothes_fitting: {
-        description:
-          "Send to user link to guidelines for clothes fitting https://images.app.goo.gl/LECaeXJfXa7gzYCC8 ",
-        parameters: z.object({}),
-        generate: async ({}) => {
-          const fittingGuidelinesLink =
-            "https://images.app.goo.gl/LECaeXJfXa7gzYCC8 ";
-          const formattedLink = `<a href="${fittingGuidelinesLink}" target="_blank">Guidelines for clothes fitting</a>`;
-          const linkStyle = {
-            color: "blue",
-            textDecoration: "underline",
-          };
-          history.done((messages: ServerMessage[]) => [
-            ...messages,
-            {
-              role: "assistant",
-              content: formattedLink,
-            },
-          ]);
-
-          return (
-            <a href={fittingGuidelinesLink} target="_blank" style={linkStyle}>
-              Guidelines for clothes fitting
-            </a>
-          );
-        },
-      },
-      escalate: {
-        description:
-          "Escalate to human agent if none of the other tools seem relevant or the interaction is repetative, or if the user is getting upset",
-        parameters: z.object({
-          identifiable_info: z
-            .string()
-            .describe(
-              "Email, full name, or order number to make the request identifiable",
-            ),
-          summary: z.string().describe("Summarize user request concisely"),
-        }),
-        generate: async function* ({ identifiable_info, summary }) {
-          let textContent =
-            "I am escalating your question to the human assistant\n\n";
-          yield textContent;
-          console.log(
-            "generating answer while escalating, ",
-            identifiable_info,
-          );
-          const filePath = path.resolve(process.cwd(), "public/shop_info.txt");
-          const generalInfo = fs.readFileSync(filePath, "utf-8");
-          const result = await streamText({
-            model: openai("gpt-3.5-turbo"),
-            temperature: 0,
-            system: `Generate response to user question ${summary} based on the context ${generalInfo}. Your answer begins with: "While we wait for the human assistant,`,
-            messages: [
-              {
-                role: "user",
-                content: summary,
-              },
-              {
-                role: "assistant",
-                content: textContent,
-              },
-            ],
-          });
-
-          for await (const textPart of result.textStream) {
-            textContent += textPart;
-            yield textContent;
-          }
-          return textContent;
-        },
-      },
-    },
-  });
-
-  return {
-    id: nanoid(),
-    role: "assistant",
-    display: result.value,
-  };
-}
-
-export const AI = createAI<ServerMessage[], ClientMessage[]>({
-  actions: {
-    continueConversation,
-  },
-  initialAIState: [],
-  initialUIState: [],
-});
-
-```
-
-## app/globals.css
-
-```css
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
-}
-
-.dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-```
-
-## app/layout.tsx
-
-```tsx
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import { AI } from "@/app/actions";
-import { MyRuntimeProvider } from "@/app/MyRuntimeProvider";
-import type React from "react";
-
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <AI>
-        <MyRuntimeProvider>
-          <body
-            className={inter.className}
-            style={{ backgroundColor: "transparent" }}
-          >
-            {children}
-          </body>
-        </MyRuntimeProvider>
-      </AI>
-    </html>
-  );
-}
-
-```
-
-## app/MyRuntimeProvider.tsx
-
-```tsx
-"use client";
-
-import {
-  type AppendMessage,
-  AssistantRuntimeProvider,
-} from "@assistant-ui/react";
-import { useVercelRSCRuntime } from "@assistant-ui/react-ai-sdk-v4";
-import { useActions, useUIState } from "ai/rsc";
-import { nanoid } from "nanoid";
-
-import type { AI } from "@/app/actions";
-
-export function MyRuntimeProvider({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const { continueConversation } = useActions();
-  const [messages, setMessages] = useUIState<typeof AI>();
-
-  const onNew = async (m: AppendMessage) => {
-    if (m.content[0]?.type !== "text")
-      throw new Error("Only text messages are supported");
-
-    const input = m.content[0].text;
-    setMessages((currentConversation) => [
-      ...currentConversation,
-      { id: nanoid(), role: "user", display: input },
-    ]);
-
-    const message = await continueConversation(input);
-
-    setMessages((currentConversation) => [...currentConversation, message]);
-  };
-
-  const runtime = useVercelRSCRuntime({ messages, onNew });
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      {children}
-    </AssistantRuntimeProvider>
-  );
-}
-
-```
-
-## app/page.tsx
-
-```tsx
-"use client";
-
-import { Suspense } from "react";
-import { AssistantModal } from "@/components/ui/assistant-ui/assistant-modal";
-
-function Home() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <div className="fixed bottom-4 right-4 size-12 rounded-full shadow">
-        <AssistantModal />
-      </div>
-    </Suspense>
-  );
-}
-
-export default function Page() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <Home />
-    </Suspense>
-  );
-}
-
-```
-
-## components.json
-
-```json
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/app/globals.css",
-    "baseColor": "slate",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
-  }
-}
-
-```
-
-## components/ui/assistant-ui/assistant-modal.tsx
-
-```tsx
-import { BotIcon, ChevronDownIcon } from "lucide-react";
-import { Thread } from "@/components/ui/assistant-ui/thread";
-import { Button } from "@/components/ui/button";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import { useEffect, forwardRef, useState } from "react";
-
-export const AssistantModal = () => {
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    const height = open ? 770 : 70; // Set the height based on the modal state
-    const width = open ? 720 : 70; // Set the width based on the modal state
-    window.parent.postMessage(
-      {
-        type: "resize",
-        height: height,
-        width: width,
-      },
-      "*",
-    );
-  }, [open]);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <FloatingAssistantButton />
-      </PopoverTrigger>
-      <PopoverContent
-        side="top"
-        align="end"
-        className="fixed bottom-0 right-0 z-50 h-[700px] w-[700px] overflow-y-auto rounded-2xl p-0"
-      >
-        <Thread />
-      </PopoverContent>
-    </Popover>
-  );
-};
-
-type FloatingAssistantButton = { "data-state"?: "open" | "closed" };
-
-const FloatingAssistantButton = forwardRef<
-  HTMLButtonElement,
-  FloatingAssistantButton
->(({ "data-state": state, ...rest }, forwardedRef) => {
-  const tooltip = state === "open" ? "Close Assistant" : "Open Assistant";
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="default"
-          size="icon"
-          className="fixed bottom-4 right-4 size-12 rounded-full shadow transition-transform hover:scale-110 active:scale-90"
-          {...rest}
-          ref={forwardedRef}
-          style={{ zIndex: 1000 }}
-        >
-          <BotIcon
-            className={cn(
-              "absolute size-6 transition-all",
-              state === "open" && "rotate-90 scale-0",
-              state === "closed" && "rotate-0 scale-100",
-            )}
-          />
-
-          <ChevronDownIcon
-            className={cn(
-              "absolute size-6 transition-all",
-              state === "open" && "rotate-0 scale-100",
-              state === "closed" && "-rotate-90 scale-0",
-            )}
-          />
-          <span className="sr-only">{tooltip}</span>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent side="left">{tooltip}</TooltipContent>
-    </Tooltip>
-  );
-});
-
-FloatingAssistantButton.displayName = "FloatingAssistantButton";
-
-```
-
-## components/ui/assistant-ui/thread.tsx
-
-```tsx
-"use client";
-
-import {
-  ComposerPrimitive,
-  MessagePrimitive,
-  ThreadPrimitive,
-} from "@assistant-ui/react";
-import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
-import type { ComponentPropsWithRef, FC, PropsWithChildren } from "react";
-import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import { ArrowDownIcon, SendHorizontalIcon } from "lucide-react";
-import Image from "next/image";
-import { RSCDisplay } from "@assistant-ui/react-ai-sdk-v4";
-
-export const Thread: FC = () => {
-  return (
-    <ThreadPrimitive.Root className="flex h-full flex-col items-center pb-3">
-      <ThreadPrimitive.Viewport className="flex w-full flex-grow flex-col items-center overflow-y-scroll scroll-smooth px-4 pt-12">
-        <ThreadPrimitive.Empty>
-          <ThreadEmpty />
-        </ThreadPrimitive.Empty>
-
-        <ThreadPrimitive.Messages
-          components={{
-            UserMessage,
-            AssistantMessage,
-          }}
-        />
-        <ThreadScrollToBottom />
-      </ThreadPrimitive.Viewport>
-
-      <Composer />
-    </ThreadPrimitive.Root>
-  );
-};
-
-const ThreadEmpty: FC = () => {
-  return (
-    <div className="flex w-full max-w-2xl grow flex-col justify-end px-4 py-6">
-      {" "}
-      {/* Stick to bottom */}
-      <div className="mb-1 flex flex-grow flex-col items-center justify-center">
-        {" "}
-        {/* Reduced margin-bottom */}
-        <Image
-          src="/image.png"
-          alt="Your Logo"
-          className="mb-4 w-1/2 max-w-xs"
-          width={320}
-          height={164}
-        />{" "}
-        {/* Smaller image */}
-        <div className="flex items-center">
-          <Avatar className="mr-4" style={{ width: "20px", height: "20px" }}>
-            {" "}
-            {/* Adjusted size */}
-            <AvatarImage src="/favicon.ico" alt="AI" />
-            <AvatarFallback>AI</AvatarFallback>
-          </Avatar>
-          <p className="mt-4">
-            Hi, do you know what product you are looking for, or you have a
-            general question?
-          </p>
-        </div>
-      </div>
-      <div className="flex flex-col gap-4 self-stretch sm:flex-row">
-        <ThreadSuggestion prompt="I need help with product search">
-          <p className="mb-2 font-semibold">Product search</p>
-        </ThreadSuggestion>
-        <ThreadSuggestion prompt="I need to talk to human agent support">
-          <p className="mb-2 font-semibold">Human agent</p>
-        </ThreadSuggestion>
-      </div>
-    </div>
-  );
-};
-
-const ThreadSuggestion: FC<PropsWithChildren<{ prompt: string }>> = ({
-  prompt,
-  children,
-}) => {
-  return (
-    <ThreadPrimitive.Suggestion
-      prompt={prompt}
-      method="replace"
-      autoSend
-      asChild
-    >
-      <Button
-        variant="outline"
-        className="text-md flex h-full items-center justify-center sm:basis-full"
-      >
-        {children}
-      </Button>
-    </ThreadPrimitive.Suggestion>
-  );
-};
-
-const ThreadScrollToBottom: FC = () => {
-  return (
-    <div className="sticky bottom-0">
-      <ThreadPrimitive.ScrollToBottom asChild>
-        <IconButton
-          tooltip="Scroll to bottom"
-          variant="outline"
-          className="absolute -top-10 rounded-full disabled:invisible"
-        >
-          <ArrowDownIcon className="size-4" />
-        </IconButton>
-      </ThreadPrimitive.ScrollToBottom>
-    </div>
-  );
-};
-
-const Composer: FC = () => {
-  return (
-    <ComposerPrimitive.Root className="flex w-[calc(100%-32px)] max-w-[42rem] items-end rounded-lg border p-0.5 transition-shadow focus-within:shadow-sm">
-      <ComposerPrimitive.Input
-        placeholder="Write a message..."
-        className="placeholder:text-foreground/50 h-12 max-h-40 flex-grow resize-none bg-transparent p-3.5 text-sm outline-none"
-      />
-      <ComposerPrimitive.Send className="bg-foreground m-2 flex h-8 w-8 items-center justify-center rounded-md text-2xl font-bold shadow transition-opacity disabled:opacity-10">
-        <SendHorizontalIcon className="text-background size-4" />
-      </ComposerPrimitive.Send>
-    </ComposerPrimitive.Root>
-  );
-};
-
-const UserMessage: FC = () => {
-  return (
-    <MessagePrimitive.Root className="relative mb-6 flex w-full max-w-2xl flex-col items-end gap-2 pl-24">
-      <div className="relative mr-1 flex items-start gap-3">
-        <p className="bg-foreground/5 text-foreground max-w-xl whitespace-pre-line break-words rounded-3xl px-5 py-2.5">
-          <MessagePrimitive.Parts components={{ Text: RSCDisplay }} />
-        </p>
-      </div>
-    </MessagePrimitive.Root>
-  );
-};
-
-const AssistantMessage: FC = () => {
-  return (
-    <MessagePrimitive.Root className="relative mb-6 flex w-full max-w-2xl gap-3">
-      <Avatar>
-        <AvatarFallback>A</AvatarFallback>
-      </Avatar>
-
-      <div className="mt-2 flex-grow">
-        <p className="text-foreground max-w-xl whitespace-pre-line break-words">
-          <MessagePrimitive.Parts components={{ Text: RSCDisplay }} />
-        </p>
-      </div>
-    </MessagePrimitive.Root>
-  );
-};
-
-type IconButton = ComponentPropsWithRef<typeof Button> & { tooltip: string };
-
-const IconButton: FC<IconButton> = ({
-  children,
-  tooltip,
-  className,
-  ...rest
-}) => {
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className={cn("size-auto p-1", className)}
-          {...rest}
-        >
-          {children}
-          <span className="sr-only">{tooltip}</span>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent side="bottom">{tooltip}</TooltipContent>
-    </Tooltip>
-  );
-};
-
-```
-
-## components/ui/avatar.tsx
-
-```tsx
-"use client";
-
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-
-import { cn } from "@/lib/utils";
-
-const Avatar = React.forwardRef<
-  React.ComponentRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className,
-    )}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-  React.ComponentRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    src="/favicon.ico"
-    alt="AI"
-    {...props}
-  />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "bg-muted flex h-full w-full items-center justify-center rounded-full",
-      className,
-    )}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };
-
-```
-
-## components/ui/button.tsx
-
-```tsx
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };
-
-```
-
-## components/ui/card.tsx
-
-```tsx
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "bg-card text-card-foreground rounded-lg border shadow-sm",
-      className,
-    )}
-    {...props}
-  />
-));
-Card.displayName = "Card";
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-));
-CardHeader.displayName = "CardHeader";
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className,
-    )}
-    {...props}
-  />
-));
-CardTitle.displayName = "CardTitle";
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
-));
-CardDescription.displayName = "CardDescription";
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-));
-CardContent.displayName = "CardContent";
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-));
-CardFooter.displayName = "CardFooter";
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
-};
-
-```
-
-## components/ui/carousel.tsx
-
-```tsx
-"use client";
-
-import * as React from "react";
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
-
-type CarouselProps = {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void;
-};
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
-} & CarouselProps;
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-
-  return context;
-}
-
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins,
-    );
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return;
-      }
-
-      setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext());
-    }, []);
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev();
-    }, [api]);
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext();
-    }, [api]);
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault();
-          scrollPrev();
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault();
-          scrollNext();
-        }
-      },
-      [scrollPrev, scrollNext],
-    );
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return;
-      }
-
-      setApi(api);
-    }, [api, setApi]);
-
-    React.useEffect(() => {
-      if (!api) {
-        return;
-      }
-
-      onSelect(api);
-      api.on("reInit", onSelect);
-      api.on("select", onSelect);
-
-      return () => {
-        api?.off("select", onSelect);
-      };
-    }, [api, onSelect]);
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    );
-  },
-);
-Carousel.displayName = "Carousel";
-
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
-
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-});
-CarouselContent.displayName = "CarouselContent";
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
-
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-CarouselItem.displayName = "CarouselItem";
-
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  );
-});
-CarouselPrevious.displayName = "CarouselPrevious";
-
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  );
-});
-CarouselNext.displayName = "CarouselNext";
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-};
-
-```
-
-## components/ui/popover.tsx
-
-```tsx
-"use client";
-
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-
-import { cn } from "@/lib/utils";
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverContent = React.forwardRef<
-  React.ComponentRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent };
-
-```
-
-## components/ui/productcarousel.tsx
-
-```tsx
-"use client";
-
-import * as React from "react";
-import Autoplay from "embla-carousel-autoplay";
-
-import { Card, CardContent } from "@/components/ui/card";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel";
-
-interface Product {
-  thumbnail: string;
-  title: string;
-  description: string;
-  metadata_3: string;
-  link: string;
-}
-
-interface ProductCarouselProps {
-  products: Product[];
-}
-
-const productStyle = {
-  display: "flex",
-  flexDirection: "column" as const,
-  alignItems: "center",
-  textAlign: "center" as const,
-};
-
-const imageContainerStyle = {
-  justifyContent: "center",
-  maxWidth: "100%",
-  overflow: "hidden",
-};
-
-const productLinkStyle = {
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  maxWidth: "100%",
-  height: "100%",
-};
-
-const productNameStyle = {
-  marginTop: "0.5rem",
-};
-
-const productPriceStyle = {
-  marginTop: "0.5rem",
-};
-
-export function CarouselPlugin({ products }: ProductCarouselProps) {
-  const plugin = React.useRef(
-    Autoplay({ delay: 2000, stopOnInteraction: true }),
-  );
-
-  return (
-    <Carousel
-      plugins={[plugin.current]}
-      className="relative w-full max-w-2xl"
-      onMouseEnter={plugin.current.stop}
-      onMouseLeave={plugin.current.reset}
-    >
-      <CarouselContent className="w-full">
-        {products.map((product, index) => (
-          <CarouselItem key={index} className="basis-1/2">
-            <div className="relative w-full p-1">
-              <Card className="h-full w-full">
-                <CardContent className="flex flex-col items-center justify-center p-6">
-                  <div className="product" style={productStyle}>
-                    <div
-                      className="image-container"
-                      style={imageContainerStyle}
-                    >
-                      <a
-                        className="product-link product_image"
-                        href={product.link}
-                        style={productLinkStyle}
-                        data-mpn={product.metadata_3}
-                        data-query={product.title}
-                        data-intent="product_search"
-                        data-order={index}
-                      >
-                        {/* eslint-disable-next-line @next/next/no-img-element */}
-                        <img
-                          className="img-fluid mb-3"
-                          src={product.thumbnail}
-                          alt={product.title}
-                          style={{ maxWidth: "100%", maxHeight: "100%" }}
-                        />
-                      </a>
-                      <div className="productName" style={productNameStyle}>
-                        <a
-                          className="product-name-link"
-                          href={product.link}
-                          data-mpn={product.metadata_3}
-                        >
-                          {product.title}
-                        </a>
-                      </div>
-                      <p>
-                        <span
-                          className="productPrice"
-                          style={productPriceStyle}
-                          dangerouslySetInnerHTML={{
-                            __html: product.metadata_3,
-                          }}
-                        />
-                      </p>
-                      {/* <div className="actionGroup" style={actionGroupStyle}>
-                        <a
-                          className="chat_buy_now"
-                          href={product.link}
-                          data-mpn={product.metadata_3}
-                        >
-                          Buy Now
-                        </a>
-                      </div>
-                      <div
-                        className="see_more_products"
-                        style={seeMoreProductsStyle}
-                        data-mpn={product.metadata_3}
-                        data-image={product.thumbnail}
-                        data-title={product.title}
-                      >
-                        See more like this
-                      </div> */}
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious className="absolute left-2 top-1/2 z-10 -translate-y-1/2 transform" />
-      <CarouselNext className="absolute right-2 top-1/2 z-10 -translate-y-1/2 transform" />
-    </Carousel>
-  );
-}
-
-```
-
-## components/ui/tooltip.tsx
-
-```tsx
-"use client";
-
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "@/lib/utils";
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-[--radix-tooltip-content-transform-origin] text-balance rounded-md px-3 py-1.5 text-xs",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
-
-```
-
-## eslint.config.ts
-
-```typescript
-export { default } from "@assistant-ui/x-buildutils/eslint";
-
-```
-
-## lib/utils.ts
-
-```typescript
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-```
-
-## next.config.ts
-
-```typescript
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  /* config options here */
-};
-
-export default nextConfig;
-
-```
-
-## package.json
-
-```json
-{
-  "name": "search-agent-for-e-commerce",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev --turbo",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@ai-sdk/openai": "^1.3.22",
-    "@assistant-ui/react": "workspace:*",
-    "@assistant-ui/react-ai-sdk-v4": "workspace:*",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-tooltip": "^1.2.7",
-    "ai": "^4.3.16",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "embla-carousel-autoplay": "^8.6.0",
-    "embla-carousel-react": "^8.6.0",
-    "lucide-react": "^0.535.0",
-    "nanoid": "5.1.5",
-    "next": "15.4.5",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "tailwind-merge": "^3.3.1",
-    "tw-animate-css": "^1.3.6",
-    "zod": "^4.0.14"
-  },
-  "devDependencies": {
-    "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^24.1.0",
-    "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
-    "eslint": "^9",
-    "eslint-config-next": "15.4.5",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.11",
-    "typescript": "^5.9.2"
-  }
-}
-
-```
-
-## README.md
-
-```markdown
-## Getting Started
-
-1. Clone the repository:
-
-```sh
-git clone https://github.com/assistant-ui/assistant-ui.git
-```
-
-2. Navigate to the project directory:
-
-```sh
-cd assistant-ui/examples/search-agent-for-e-commerce
-```
-
-3. Create a `.env` file with the following variable:
-
-```sh
-OPENAI_API_KEY="skXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
-```
-
-4. Make the `start.sh` script executable:
-
-```sh
-chmod +x start.sh
-```
-
-5. Start the servers:
-
-```sh
-./start.sh
-```
-
-6. Open the dummy e-commerce website in your browser:
-   [http://localhost:8080/dummy-ecommerce-website.html](http://localhost:8080/dummy-ecommerce-website.html)
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-## Learn More
-
-This project uses:
-
-- assistant-ui components
-- shadcn components
-- Vercel AI SDK
-
-```
-
-## tsconfig.json
-
-```json
-{
-  "extends": "@assistant-ui/x-buildutils/ts/base",
-  "compilerOptions": {
-    "target": "ES6",
-    "module": "ESNext",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "allowJs": true,
-    "strictNullChecks": true,
-    "jsx": "preserve",
-    "paths": {
-      "@/*": ["./*"],
-      "@assistant-ui/*": ["../../packages/*/src"],
-      "@assistant-ui/react/*": ["../../packages/react/src/*"],
-      "assistant-stream": ["../../packages/assistant-stream/src"],
-      "assistant-stream/*": ["../../packages/assistant-stream/src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
-
-```
-
-## vercel.json
-
-```json
-{
-  "version": 2,
-  "builds": [
-    {
-      "src": "src/app/api/chat/validate.ts",
-      "use": "@vercel/node"
-    },
-    {
-      "src": "next.config.ts",
-      "use": "@vercel/next"
-    }
-  ],
-  "routes": [
-    {
-      "src": "/api/validate",
-      "dest": "src/app/api/chat/validate.ts"
-    },
-    {
-      "src": "/(.*)",
-      "dest": "/"
-    }
-  ]
-}
-
-```
-