kaddidlehopper 0.1.0

package/examples/marketing/assets/src/components/MotorcycleAIAssistant.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useRef, useState } from 'react'
+import { useStore } from '@tanstack/react-store'
+import { Send, X } from 'lucide-react'
+import { Streamdown } from 'streamdown'
+
+import { useMotorcycleChat } from '@/lib/motorcycle-ai-hook'
+import type { ChatMessages } from '@/lib/ai-hook'
+import { showMotorcycleAIAssistant } from '@/store/motorcycle-assistant'
+
+import MotorcycleRecommendation from './MotorcycleRecommendation'
+
+function Messages({ messages }: { messages: ChatMessages }) {
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop =
+        messagesContainerRef.current.scrollHeight
+    }
+  }, [messages])
+
+  if (!messages.length) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-gray-400 text-sm">
+        Ask me about your next motorcycle.
+      </div>
+    )
+  }
+
+  return (
+    <div ref={messagesContainerRef} className="flex-1 overflow-y-auto">
+      {messages.map(({ id, role, parts }) => (
+        <div
+          key={id}
+          className={`py-3 ${
+            role === 'assistant'
+              ? 'bg-linear-to-r from-orange-500/5 to-red-600/5'
+              : 'bg-transparent'
+          }`}
+        >
+          {parts.map((part, index) => {
+            if (part.type === 'text' && part.content) {
+              return (
+                <div key={index} className="flex items-start gap-2 px-4">
+                  {role === 'assistant' ? (
+                    <div className="w-6 h-6 rounded-lg bg-linear-to-r from-orange-500 to-red-600 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                      AI
+                    </div>
+                  ) : (
+                    <div className="w-6 h-6 rounded-lg bg-gray-700 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                      Y
+                    </div>
+                  )}
+                  <div className="flex-1 min-w-0 text-white prose dark:prose-invert max-w-none prose-sm">
+                    <Streamdown>{part.content}</Streamdown>
+                  </div>
+                </div>
+              )
+            }
+            if (
+              part.type === 'tool-call' &&
+              part.name === 'recommendMotorcycle' &&
+              part.output
+            ) {
+              return (
+                <div key={part.id} className="max-w-[80%] mx-auto">
+                  <MotorcycleRecommendation id={String(part.output?.id)} />
+                </div>
+              )
+            }
+          })}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default function AIAssistant() {
+  const isOpen = useStore(showMotorcycleAIAssistant)
+  const { messages, sendMessage } = useMotorcycleChat()
+  const [input, setInput] = useState('')
+
+  return (
+    <div className="relative z-50">
+      <button
+        onClick={() => showMotorcycleAIAssistant.setState((state) => !state)}
+        className="flex items-center gap-2 px-4 py-2 rounded-lg bg-black/90 text-white hover:bg-black/80 transition-all border border-orange-500/20 shadow-lg shadow-orange-500/10"
+      >
+        <div className="w-5 h-5 rounded-lg bg-linear-to-r from-orange-500 to-red-600 flex items-center justify-center text-xs font-medium">
+          AI
+        </div>
+        Motorcycle Expert
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full right-0 mt-2 w-[700px] h-[600px] bg-black/95 rounded-lg shadow-2xl border border-orange-500/20 flex flex-col backdrop-blur-sm">
+          <div className="flex items-center justify-between p-4 border-b border-orange-500/20 bg-linear-to-r from-orange-500/5 to-red-600/5">
+            <h3 className="font-semibold text-white flex items-center gap-2">
+              <span className="w-6 h-6 rounded-lg bg-linear-to-r from-orange-500 to-red-600 flex items-center justify-center text-xs">
+                AI
+              </span>
+              Motorcycle Expert
+            </h3>
+            <button
+              onClick={() =>
+                showMotorcycleAIAssistant.setState((state) => !state)
+              }
+              className="text-gray-400 hover:text-white transition-colors"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+
+          <Messages messages={messages} />
+
+          <div className="p-4 border-t border-orange-500/20 bg-linear-to-r from-orange-500/5 to-red-600/5">
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                if (input.trim()) {
+                  sendMessage(input)
+                  setInput('')
+                }
+              }}
+            >
+              <div className="relative">
+                <textarea
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder="Ask about our motorcycles..."
+                  className="w-full rounded-lg border border-orange-500/20 bg-black/50 pl-3 pr-10 py-3 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/30 focus:border-transparent resize-none overflow-hidden shadow-inner"
+                  rows={1}
+                  style={{ minHeight: '44px', maxHeight: '120px' }}
+                  onInput={(e) => {
+                    const target = e.target as HTMLTextAreaElement
+                    target.style.height = 'auto'
+                    target.style.height =
+                      Math.min(target.scrollHeight, 120) + 'px'
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey && input.trim()) {
+                      e.preventDefault()
+                      sendMessage(input)
+                      setInput('')
+                    }
+                  }}
+                />
+                <button
+                  type="submit"
+                  disabled={!input.trim()}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
+                >
+                  <Send className="w-4 h-4" />
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/examples/marketing/assets/src/components/MotorcycleRecommendation.tsx

@@ -0,0 +1,53 @@
+import { useNavigate } from '@tanstack/react-router'
+
+import { showMotorcycleAIAssistant } from '@/store/motorcycle-assistant'
+
+import motorcycles from '@/data/motorcycles'
+
+export default function MotorcycleRecommendation({ id }: { id: string }) {
+  const navigate = useNavigate()
+  const motorcycle = motorcycles.find((motorcycle) => motorcycle.id === +id)
+  if (!motorcycle) {
+    return null
+  }
+  return (
+    <div className="my-4 rounded-lg overflow-hidden border border-orange-500/20 bg-gray-800/50">
+      <div className="aspect-[4/3] relative overflow-hidden">
+        <img
+          src={motorcycle.image}
+          alt={motorcycle.name}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      <div className="p-4">
+        <h3 className="text-lg font-semibold text-white mb-2">
+          {motorcycle.name}
+        </h3>
+        <p className="text-sm text-gray-300 mb-1 line-clamp-2">
+          {motorcycle.shortDescription}
+        </p>
+        <p className="text-sm text-gray-400 mb-3">
+          {motorcycle.engineSize}cc •{' '}
+          {motorcycle.type.charAt(0).toUpperCase() + motorcycle.type.slice(1)}
+        </p>
+        <div className="flex items-center justify-between">
+          <div className="text-lg font-bold text-emerald-400">
+            ${motorcycle.price.toLocaleString()}
+          </div>
+          <button
+            onClick={() => {
+              navigate({
+                to: '/motorcycles/$motorcycleId',
+                params: { motorcycleId: motorcycle.id.toString() },
+              })
+              showMotorcycleAIAssistant.setState(() => false)
+            }}
+            className="bg-linear-to-r from-orange-500 to-red-600 text-white px-4 py-1.5 rounded-lg text-sm hover:opacity-90 transition-opacity"
+          >
+            View Details
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/examples/marketing/assets/src/data/motorcycles.ts.ejs

@@ -0,0 +1,77 @@
+export interface Motorcycle {
+  id: number;
+  name: string;
+  image: string;
+  description: string;
+  shortDescription: string;
+  price: number;
+  engineSize: number; // in CCs
+  type: "scooter" | "cruiser" | "adventure" | "sport" | "supersport";
+}
+
+const motorcycles: Array<Motorcycle> = [
+  {
+    id: 1,
+    name: "Luna-C Urbanite",
+    image: "/motorcycle-scooter.jpg",
+    description:
+      "The Luna-C Urbanite is the perfect city companion, combining style and practicality in a compact package. With its 125cc engine, it delivers excellent fuel efficiency while maintaining enough power for urban commuting. The comfortable seating position and lightweight frame make it easy to maneuver through city traffic, while the under-seat storage provides ample space for your daily essentials.",
+    shortDescription:
+      "A stylish and practical 125cc scooter perfect for urban commuting with excellent fuel efficiency.",
+    price: 3000,
+    engineSize: 125,
+    type: "scooter",
+  },
+<% if (!addOnOption.project?.bareBones) { %>
+  {
+    id: 2,
+    name: "Luna-C Voyager",
+    image: "/motorcycle-cruiser.jpg",
+    description:
+      "The Luna-C Voyager is a classic cruiser that combines comfort with style. Its 750cc engine provides smooth, reliable power for long-distance rides, while the ergonomic design ensures comfort even on extended journeys. The classic cruiser styling with modern touches makes it stand out on any road.",
+    shortDescription:
+      "A comfortable 750cc cruiser perfect for long-distance rides with classic styling.",
+    price: 12000,
+    engineSize: 750,
+    type: "cruiser",
+  },
+  {
+    id: 3,
+    name: "Luna-C Explorer",
+    image: "/motorcycle-adventure.jpg",
+    description:
+      "The Luna-C Explorer is built for adventure, whether you're tackling city streets or exploring off-road trails. Its 850cc engine provides the perfect balance of power and control, while the dual-sport suspension system ensures a smooth ride in any condition. The upright riding position and comfortable seat make it ideal for long journeys.",
+    shortDescription:
+      "An 850cc adventure bike designed for both on-road and off-road exploration.",
+    price: 15000,
+    engineSize: 850,
+    type: "adventure",
+  },
+  {
+    id: 4,
+    name: "Luna-C Velocity",
+    image: "/motorcycle-sport.jpg",
+    description:
+      "The Luna-C Velocity is a high-performance sport bike that delivers thrilling acceleration and precise handling. Its 1000cc engine provides exceptional power, while the aerodynamic design and advanced suspension system ensure optimal performance on the track or the open road. The aggressive styling and premium components make it a true performance machine.",
+    shortDescription:
+      "A high-performance 1000cc sport bike with exceptional power and handling.",
+    price: 20000,
+    engineSize: 1000,
+    type: "sport",
+  },
+  {
+    id: 5,
+    name: "Luna-C Supersport",
+    image: "/motorcycle-supersport.jpg",
+    description:
+      "The Luna-C Supersport represents the pinnacle of motorcycle engineering. Its 1300cc engine delivers breathtaking power and acceleration, while the cutting-edge aerodynamics and race-inspired components ensure maximum performance. This machine is designed for experienced riders who demand the ultimate in speed and handling.",
+    shortDescription:
+      "The ultimate 1300cc supersport machine with race-inspired performance and aerodynamics.",
+    price: 25000,
+    engineSize: 1300,
+    type: "supersport",
+  },
+<% } %>
+];
+
+export default motorcycles;

package/examples/marketing/assets/src/lib/motorcycle-ai-hook.ts

@@ -0,0 +1,24 @@
+import {
+  fetchServerSentEvents,
+  useChat,
+  createChatClientOptions,
+} from "@tanstack/ai-react";
+import type { InferChatMessages } from "@tanstack/ai-react";
+import { clientTools } from "@tanstack/ai-client";
+
+import { recommendMotorcycleToolDef } from "@/lib/motorcycle-tools";
+
+const recommendMotorcycleToolClient = recommendMotorcycleToolDef.client(
+  ({ id }) => ({
+    id: +id,
+  })
+);
+
+const chatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/motorcycle-chat"),
+  tools: clientTools(recommendMotorcycleToolClient),
+});
+
+export type ChatMessages = InferChatMessages<typeof chatOptions>;
+
+export const useMotorcycleChat = () => useChat(chatOptions);

package/examples/marketing/assets/src/lib/motorcycle-tools.ts

@@ -0,0 +1,42 @@
+import { toolDefinition } from "@tanstack/ai";
+import { z } from "zod";
+import motorcycles from "@/data/motorcycles";
+
+// Tool definition for getting motorcycles
+export const getMotorcyclesToolDef = toolDefinition({
+  name: "getMotorcycles",
+  description: "Get all motorcycles from the database",
+  inputSchema: z.object({}),
+  outputSchema: z.array(
+    z.object({
+      id: z.number(),
+      name: z.string(),
+      image: z.string(),
+      description: z.string(),
+      shortDescription: z.string(),
+      price: z.number(),
+      engineSize: z.number(),
+      type: z.enum(["scooter", "cruiser", "adventure", "sport", "supersport"]),
+    })
+  ),
+});
+
+// Server implementation
+export const getMotorcycles = getMotorcyclesToolDef.server(() => motorcycles);
+
+// Tool definition for motorcycle recommendation
+export const recommendMotorcycleToolDef = toolDefinition({
+  name: "recommendMotorcycle",
+  description:
+    "REQUIRED tool to display a motorcycle recommendation to the user. This tool MUST be used whenever recommending a motorcycle - do NOT write recommendations yourself. This displays the motorcycle in a special appealing format with a view details button.",
+  inputSchema: z.object({
+    id: z
+      .union([z.string(), z.number()])
+      .describe(
+        "The ID of the motorcycle to recommend (from the getMotorcycles results)"
+      ),
+  }),
+  outputSchema: z.object({
+    id: z.number(),
+  }),
+});

package/examples/marketing/assets/src/routes/__root.tsx

@@ -0,0 +1,57 @@
+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+import Header from '@/components/Header'
+
+import appCss from '@/styles.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'Luna-C Motorcycles',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+  shellComponent: RootDocument,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body className="bg-black">
+        <Header />
+        {children}
+        <TanStackDevtools
+          config={{
+            position: 'bottom-right',
+          }}
+          plugins={[
+            {
+              name: 'Tanstack Router',
+              render: <TanStackRouterDevtoolsPanel />,
+            },
+          ]}
+        />
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/examples/marketing/assets/src/routes/api.motorcycle-chat.ts

@@ -0,0 +1,78 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { chat, maxIterations, toServerSentEventsResponse } from "@tanstack/ai";
+import { anthropicText } from "@tanstack/ai-anthropic";
+
+import {
+  getMotorcycles,
+  recommendMotorcycleToolDef,
+} from "@/lib/motorcycle-tools";
+
+const SYSTEM_PROMPT = `You are a helpful assistant for a store that sells motorcycles.
+
+You are also a motorcycle enthusiast who is passionate about our products and how they can bring joy to people's lives, the excitement of the open road and adventure. Emphasize these aspects in your responses.
+
+CRITICAL INSTRUCTIONS - YOU MUST FOLLOW THIS EXACT WORKFLOW:
+
+When a user asks for a motorcycle recommendation:
+1. FIRST: Use the getMotorcycles tool (no parameters needed)
+2. SECOND: Use the recommendMotorcycle tool with the ID of the motorcycle you want to recommend
+3. NEVER write a recommendation directly - ALWAYS use the recommendMotorcycle tool
+
+IMPORTANT:
+- The recommendMotorcycle tool will display the motorcycle in a special, appealing format
+- You MUST use recommendMotorcycle for ANY motorcycle recommendation
+- ONLY recommend motorcycles from our inventory (use getMotorcycles first)
+- The recommendMotorcycle tool has a view details button - this is how customers can learn more
+- Do NOT describe the motorcycle yourself - let the recommendMotorcycle tool do it
+`;
+
+export const Route = createFileRoute("/api/motorcycle-chat")({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        // Capture request signal before reading body (it may be aborted after body is consumed)
+        const requestSignal = request.signal;
+
+        // If request is already aborted, return early
+        if (requestSignal.aborted) {
+          return new Response(null, { status: 499 }); // 499 = Client Closed Request
+        }
+
+        const abortController = new AbortController();
+
+        try {
+          const body = await request.json();
+          const { messages } = body;
+
+          const adapter = anthropicText("claude-haiku-4-5");
+
+          const stream = chat({
+            adapter,
+            tools: [
+              getMotorcycles, // Server tool
+              recommendMotorcycleToolDef, // No server execute - client will handle
+            ],
+            systemPrompts: [SYSTEM_PROMPT],
+            agentLoopStrategy: maxIterations(5),
+            messages,
+            abortController,
+          });
+
+          return toServerSentEventsResponse(stream, { abortController });
+        } catch (error: any) {
+          // If request was aborted, return early (don't send error response)
+          if (error.name === "AbortError" || abortController.signal.aborted) {
+            return new Response(null, { status: 499 }); // 499 = Client Closed Request
+          }
+          return new Response(
+            JSON.stringify({ error: "Failed to process chat request" }),
+            {
+              status: 500,
+              headers: { "Content-Type": "application/json" },
+            }
+          );
+        }
+      },
+    },
+  },
+});

package/examples/marketing/assets/src/routes/index.tsx

@@ -0,0 +1,72 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import motorcycles from '@/data/motorcycles'
+
+export const Route = createFileRoute('/')({
+  component: MotorcyclesIndex,
+})
+
+function MotorcyclesIndex() {
+  return (
+    <div className="bg-black text-white p-5">
+      <h1 className="text-3xl font-bold mb-16 text-center">
+        Luna-C Motorcycles
+      </h1>
+      <div className="max-w-7xl mx-auto">
+        {motorcycles.map((motorcycle, index) => (
+          <div
+            key={motorcycle.id}
+            className={`relative flex flex-col md:flex-row items-stretch gap-8 mb-32 ${
+              index % 2 === 1 ? 'md:flex-row-reverse' : ''
+            }`}
+          >
+            <div className="w-full md:w-[60%] relative">
+              <Link
+                to="/motorcycles/$motorcycleId"
+                params={{
+                  motorcycleId: motorcycle.id.toString(),
+                }}
+                className="group block relative"
+              >
+                <div className="relative z-0 w-full aspect-[4/3]">
+                  <div className="w-full h-full overflow-hidden rounded-2xl border border-gray-800/50 shadow-2xl">
+                    <img
+                      src={motorcycle.image}
+                      alt={motorcycle.name}
+                      className="w-full h-full object-cover motorcycle-image group-hover:scale-105 transition-transform duration-500"
+                    />
+                    <div className="absolute inset-0 bg-linear-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                  </div>
+                  <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-emerald-500/80 text-white px-4 py-2 rounded-full text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 backdrop-blur-sm">
+                    View Details
+                  </div>
+                </div>
+              </Link>
+            </div>
+
+            <div
+              className={`w-full md:w-[50%] relative ${index % 2 === 0 ? 'md:-ml-24' : 'md:-mr-24'} md:my-12`}
+            >
+              <div className="bg-gray-900/40 backdrop-blur-xl rounded-2xl p-8 border border-gray-500/20 shadow-2xl relative z-10">
+                <div className="absolute inset-0 rounded-2xl bg-linear-to-br from-white/5 to-white/0"></div>
+                <div className="relative z-10">
+                  <h2 className="text-2xl font-bold mb-3">{motorcycle.name}</h2>
+                  <p className="text-gray-300 mb-2 font-medium">
+                    {motorcycle.engineSize}cc •{' '}
+                    {motorcycle.type.charAt(0).toUpperCase() +
+                      motorcycle.type.slice(1)}
+                  </p>
+                  <p className="text-gray-100 mb-4 leading-relaxed">
+                    {motorcycle.shortDescription}
+                  </p>
+                  <div className="text-2xl font-bold text-emerald-400">
+                    ${motorcycle.price.toLocaleString()}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/examples/marketing/assets/src/routes/motorcycles/$motorcycleId.tsx

@@ -0,0 +1,56 @@
+import { Link, createFileRoute } from "@tanstack/react-router";
+import motorcycles from "../../data/motorcycles";
+
+export const Route = createFileRoute("/motorcycles/$motorcycleId")({
+  component: RouteComponent,
+  loader: async ({ params }) => {
+    const motorcycle = motorcycles.find(
+      (motorcycle) => motorcycle.id === +params.motorcycleId
+    );
+    if (!motorcycle) {
+      throw new Error("Motorcycle not found");
+    }
+    return motorcycle;
+  },
+});
+
+function RouteComponent() {
+  const motorcycle = Route.useLoaderData();
+
+  return (
+    <div className="relative min-h-[100vh] flex items-center bg-black text-white p-5">
+      <div className="relative z-10 w-[60%] bg-gray-900/60 backdrop-blur-md rounded-2xl p-8 border border-gray-800/50 shadow-xl">
+        <Link
+          to="/"
+          className="inline-block mb-4 text-emerald-400 hover:text-emerald-300"
+        >
+          &larr; Back to all motorcycles
+        </Link>
+        <h1 className="text-3xl font-bold mb-2">{motorcycle.name}</h1>
+        <p className="text-gray-400 mb-2">
+          {motorcycle.engineSize}cc •{" "}
+          {motorcycle.type.charAt(0).toUpperCase() + motorcycle.type.slice(1)}
+        </p>
+        <p className="text-gray-300 mb-6">{motorcycle.description}</p>
+        <div className="flex items-center justify-between">
+          <div className="text-2xl font-bold text-emerald-400">
+            ${motorcycle.price.toLocaleString()}
+          </div>
+          <button className="bg-emerald-600 hover:bg-emerald-500 text-white px-6 py-2 rounded-lg transition-colors">
+            Add to Cart
+          </button>
+        </div>
+      </div>
+
+      <div className="absolute top-0 right-0 w-[55%] h-full z-0">
+        <div className="w-full h-full overflow-hidden rounded-2xl border-4 border-gray-800 shadow-2xl">
+          <img
+            src={motorcycle.image}
+            alt={motorcycle.name}
+            className="w-full h-full object-cover motorcycle-image"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/examples/marketing/assets/src/store/motorcycle-assistant.ts

@@ -0,0 +1,3 @@
+import { Store } from '@tanstack/store'
+
+export const showMotorcycleAIAssistant = new Store(false)