kaddidlehopper 0.5.0 → 0.6.0

package/examples/ecommerce/README.md

@@ -1,48 +0,0 @@
-# Ecommerce Example
-
-A motorcycle ecommerce site built with TanStack Start, Stripe checkout, and an AI shopping assistant for Netlify deployment.
-
-## Features
-
-- **Product Catalog**: Motorcycle listings with details and images
-- **Stripe Checkout**: Secure payment processing via Stripe
-- **AI Shopping Assistant**: Chat-based motorcycle recommendation engine
-- **Product Detail Pages**: Individual motorcycle pages with full descriptions
-- **Checkout Flow**: Success and cancellation pages
-
-## Project Structure
-
-```
-├── src/
-│   ├── components/
-│   │   ├── BuyButton.tsx              # Stripe checkout trigger
-│   │   ├── Header.tsx                 # Custom header with AI toggle
-│   │   ├── MotorcycleAIAssistant.tsx  # AI chat panel
-│   │   └── MotorcycleRecommendation.tsx
-│   ├── data/
-│   │   └── motorcycles.ts            # Product data
-│   ├── lib/
-│   │   ├── motorcycle-ai-hook.ts     # Chat hook
-│   │   ├── motorcycle-tools.ts       # AI tools
-│   │   └── stripe.server.ts          # Stripe server functions
-│   ├── store/
-│   │   └── motorcycle-assistant.ts   # UI state
-│   └── routes/
-│       ├── index.tsx                  # Product listing
-│       ├── motorcycles/$motorcycleId.tsx
-│       ├── checkout/success.tsx
-│       ├── checkout/cancel.tsx
-│       └── api.motorcycle-chat.ts
-```
-
-## Environment Variables
-
-- `STRIPE_SECRET_KEY` — Stripe secret key for checkout
-- `ANTHROPIC_API_KEY` — For AI assistant
-- `SITE_URL` — Base URL for checkout redirects (defaults to localhost:3000)
-
-## Development
-
-```bash
-npm run dev
-```

package/examples/ecommerce/assets/AGENTS.md.append

@@ -1,22 +0,0 @@
-### Ecommerce Integration
-
-Motorcycle ecommerce site with Stripe checkout and AI shopping assistant.
-
-**Stripe checkout:**
-- `createCheckoutSession` server function in `src/lib/stripe.server.ts`
-- BuyButton component redirects to Stripe Checkout
-- Routes: `/checkout/success`, `/checkout/cancel`
-
-**AI tools available:**
-- `getMotorcycles` - Get all motorcycles from catalog
-- `recommendMotorcycle` - Display motorcycle recommendation card (MUST use for recommendations; do not write recommendations manually)
-
-**Dependencies:** stripe, @tanstack/ai, streamdown
-
-## Environment Variables
-
-```
-STRIPE_SECRET_KEY=...  # Required for checkout
-```
-
-For AI assistant: ANTHROPIC_API_KEY, OPENAI_API_KEY, GEMINI_API_KEY, or OLLAMA_BASE_URL (same as ai add-on).

package/examples/ecommerce/assets/src/components/BuyButton.tsx

@@ -1,35 +0,0 @@
-import { useState } from 'react'
-import { createCheckoutSession } from '@/lib/stripe.server'
-
-export function BuyButton({
-  motorcycleId,
-  className = '',
-}: {
-  motorcycleId: number
-  className?: string
-}) {
-  const [loading, setLoading] = useState(false)
-
-  const handleClick = async () => {
-    setLoading(true)
-    try {
-      const url = await createCheckoutSession({ data: motorcycleId })
-      if (url) {
-        window.location.href = url
-      }
-    } catch (error) {
-      console.error('Checkout error:', error)
-      setLoading(false)
-    }
-  }
-
-  return (
-    <button
-      onClick={handleClick}
-      disabled={loading}
-      className={`bg-emerald-600 hover:bg-emerald-500 disabled:bg-emerald-800 disabled:cursor-wait text-white px-6 py-2 rounded-lg transition-colors ${className}`}
-    >
-      {loading ? 'Processing...' : 'Buy Now'}
-    </button>
-  )
-}

package/examples/ecommerce/assets/src/components/Header.tsx

@@ -1,36 +0,0 @@
-import { Link } from '@tanstack/react-router'
-
-import HeaderNav from './HeaderNav'
-
-import MotorcycleAIAssistant from '@/components/MotorcycleAIAssistant'
-
-export default function Header() {
-  return (
-    <>
-      <div className="z-40">
-        <HeaderNav />
-      </div>
-      <header className="p-4 flex gap-2 bg-black/30 text-white border-b border-orange-500/20 backdrop-blur-md sticky top-0 z-40">
-        <nav className="flex flex-row items-center">
-          <div className="px-4 font-extrabold text-lg">
-            <Link
-              to="/"
-              className="hover:text-orange-400 transition-colors flex flex-row items-center"
-            >
-              <img
-                src="/logo.png"
-                alt="Luna-C Motorcycles"
-                className="w-20 h-20"
-              />
-              <span className="text-2xl font-bold">Luna-C Motorcycles</span>
-            </Link>
-          </div>
-        </nav>
-
-        <div className="ml-auto">
-          <MotorcycleAIAssistant />
-        </div>
-      </header>
-    </>
-  )
-}

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

@@ -1,162 +0,0 @@
-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/ecommerce/assets/src/components/MotorcycleRecommendation.tsx

@@ -1,53 +0,0 @@
-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/ecommerce/assets/src/data/motorcycles.ts

@@ -1,27 +0,0 @@
-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',
-  },
-]
-
-export default motorcycles

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

@@ -1,24 +0,0 @@
-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/ecommerce/assets/src/lib/motorcycle-tools.ts

@@ -1,42 +0,0 @@
-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/ecommerce/assets/src/lib/stripe.server.ts

@@ -1,39 +0,0 @@
-import Stripe from 'stripe'
-import { createServerFn } from '@tanstack/react-start'
-import motorcycles from '@/data/motorcycles'
-
-const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
-
-export const createCheckoutSession = createServerFn({
-  method: 'POST',
-})
-  .inputValidator((motorcycleId: number) => motorcycleId)
-  .handler(async ({ data: motorcycleId }) => {
-    const motorcycle = motorcycles.find((m) => m.id === motorcycleId)
-    if (!motorcycle) {
-      throw new Error('Motorcycle not found')
-    }
-
-    const session = await stripe.checkout.sessions.create({
-      payment_method_types: ['card'],
-      line_items: [
-        {
-          price_data: {
-            currency: 'usd',
-            product_data: {
-              name: motorcycle.name,
-              description: motorcycle.shortDescription,
-              images: [motorcycle.image],
-            },
-            unit_amount: motorcycle.price * 100,
-          },
-          quantity: 1,
-        },
-      ],
-      mode: 'payment',
-      success_url: `${process.env.SITE_URL ?? 'http://localhost:3000'}/checkout/success`,
-      cancel_url: `${process.env.SITE_URL ?? 'http://localhost:3000'}/checkout/cancel`,
-    })
-
-    return session.url
-  })

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

@@ -1,57 +0,0 @@
-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/ecommerce/assets/src/routes/api.motorcycle-chat.ts

@@ -1,78 +0,0 @@
-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/ecommerce/assets/src/routes/checkout/cancel.tsx

@@ -1,25 +0,0 @@
-import { Link, createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/checkout/cancel')({
-  component: CheckoutCancel,
-})
-
-function CheckoutCancel() {
-  return (
-    <div className="bg-black text-white min-h-screen flex items-center justify-center p-5">
-      <div className="bg-gray-900/60 backdrop-blur-md rounded-2xl p-12 border border-gray-800/50 shadow-xl text-center max-w-lg">
-        <div className="text-gray-400 text-6xl mb-6">&#10005;</div>
-        <h1 className="text-3xl font-bold mb-4">Checkout Cancelled</h1>
-        <p className="text-gray-300 mb-8">
-          Your payment was cancelled. No charges were made.
-        </p>
-        <Link
-          to="/"
-          className="inline-block bg-emerald-600 hover:bg-emerald-500 text-white px-6 py-3 rounded-lg transition-colors"
-        >
-          Back to Home
-        </Link>
-      </div>
-    </div>
-  )
-}