kaddidlehopper 0.1.0

package/CONTEXT.md

@@ -0,0 +1,139 @@
+# Netlify CTA - Project Context
+
+## Overview
+
+`netlify-cta` is a custom CLI application that creates TanStack Start applications pre-configured for Netlify deployment. It's based on the `create-rwsdk` example pattern but builds TanStack Start apps instead of Redwood SDK apps.
+
+## What Was Built
+
+### CLI Structure
+
+```
+./
+├── package.json              # CLI package (workspace:* deps)
+├── tsconfig.json             # TypeScript config
+├── src/
+│   └── index.ts              # CLI entry point
+├── project/
+│   ├── packages.json         # Conditional dependencies
+│   └── base/
+│       ├── package.json      # Base project dependencies
+│       ├── vite.config.ts    # Vite + Start + Netlify + Tailwind
+│       ├── tsconfig.json     # TypeScript config
+│       ├── netlify.toml      # Netlify deployment config
+│       ├── _dot_gitignore    # Git ignore (becomes .gitignore)
+│       ├── public/
+│       │   └── favicon.ico
+│       └── src/
+│           ├── styles.css    # Tailwind CSS imports
+│           ├── router.tsx    # TanStack Router config
+│           └── routes/
+│               ├── __root.tsx   # Root layout with SSR shell
+│               └── index.tsx    # Home page - "Hello from Netlify"
+└── add-ons/
+    └── _dot_gitkeep          # Placeholder for future add-ons
+```
+
+### Key Features
+
+1. **TanStack Start**: Full SSR support with `@tanstack/react-start`
+2. **Netlify Deployment**: Pre-configured with `@netlify/vite-plugin-tanstack-start`
+3. **Tailwind CSS**: Installed and configured out of the box
+4. **File-based Routing**: Uses TanStack Router's file-based routing (TypeScript enforced)
+5. **Minimal Setup**: Just a home route saying "Hello from Netlify" - no demo routes
+
+### Framework Registration
+
+The CLI registers a framework called "Netlify TanStack Start" with:
+- ID: `netlify-start`
+- Single mode: `file-router` (TypeScript enforced)
+- No customized UI (uses default CTA UI)
+
+## Usage
+
+## Dependencies
+
+### CLI Dependencies
+- `@tanstack/cta-cli`: workspace:*
+- `@tanstack/cta-engine`: workspace:*
+
+### Generated Project Dependencies
+- `@tanstack/react-start`: ^1.132.0
+- `@tanstack/react-router`: ^1.132.0
+- `@netlify/vite-plugin-tanstack-start`: ^1.2.3
+- `tailwindcss`: ^4.0.6
+- `react`: ^19.2.0
+- `vite`: ^7.1.7
+
+## Files Reference
+
+### src/index.ts
+Registers the framework and starts the CLI. Key points:
+- Scans `project/` directory for base files
+- Scans `add-ons/` directory for add-ons (currently empty)
+- Registers single "file-router" mode with forced TypeScript
+
+### project/base/vite.config.ts
+Configures Vite with:
+- `@tanstack/devtools-vite` - TanStack devtools
+- `vite-tsconfig-paths` - Path alias support
+- `@tailwindcss/vite` - Tailwind CSS
+- `@netlify/vite-plugin-tanstack-start` - Netlify deployment
+- `@tanstack/react-start/plugin/vite` - TanStack Start
+- `@vitejs/plugin-react` - React support
+
+### project/base/src/routes/__root.tsx
+Root layout using TanStack Start's `shellComponent` for SSR:
+- Sets up HTML document structure
+- Configures head meta tags
+- Includes TanStack devtools
+- Renders children with Scripts for hydration
+
+### project/base/src/routes/index.tsx
+Simple home page with:
+- Teal/cyan gradient background
+- "Hello from Netlify" heading
+- Links to TanStack Start and Netlify docs
+- Edit instruction pointing to the file
+
+## Examples
+
+Four example applications are included:
+
+### Blog Example (`examples/blog/`)
+A Hawaii adventures travel blog built with content-collections and shadcn UI components.
+- Content-collections for markdown blog posts
+- Category-based navigation
+- Postcard-style blog cards with beautiful UI
+- Routes: `/`, `/posts/$slug`, `/category/$category`
+
+### Events Example (`examples/events/`)
+A pastry conference website ("Haute Pâtisserie 2026") with speakers, sessions, schedule, and AI assistant.
+- Content-collections for speakers and talks markdown content
+- Conference schedule with day-by-day timeline
+- AI-powered chat assistant (Remy) for conference navigation
+- Beautiful dark theme with Playfair Display font and copper/gold accents
+- Routes: `/`, `/schedule`, `/speakers`, `/speakers/$slug`, `/talks`, `/talks/$slug`, `/api/remy-chat`
+
+### Marketing Example (`examples/marketing/`)
+An AI-powered motorcycle marketing site with TanStack AI chat assistant.
+- TanStack AI for intelligent chat
+- TanStack Store for state management
+- Motorcycle product catalog
+- AI-powered product recommendations
+- Routes: `/`, `/motorcycles/$motorcycleId`, `/api/motorcycle-chat`
+
+### Resume Example (`examples/resume/`)
+A professional resume template with content-collections and shadcn UI components.
+- Content-collections for jobs and education
+- Interactive skills filter sidebar
+- Multiple shadcn UI components (badge, card, checkbox, hover-card, separator)
+- Routes: `/`
+
+## Future Enhancements
+
+Potential additions:
+- Add-ons for common Netlify features (Functions, Edge Functions, Blobs)
+- Authentication add-ons (Netlify Identity)
+- Database add-ons (Netlify DB, Supabase, etc.)
+- Customized UI with Netlify branding

package/README.md

@@ -0,0 +1,47 @@
+# Netlify CTA
+
+Create TanStack Start applications for Netlify.
+
+## Installation
+
+Install dependencies using pnpm:
+
+```bash
+pnpm install
+```
+
+## Build
+
+Build the project by compiling TypeScript:
+
+```bash
+pnpm build
+```
+
+Or using npm:
+
+```bash
+npm run build
+```
+
+This will compile the TypeScript source files from `src/` to `dist/`.
+
+## Running
+
+After building, you can run the CLI tool using:
+
+```bash
+node dist/index.js
+```
+
+Or if running from a different directory context:
+
+```bash
+node ../netlify-cta/dist/index.js
+```
+
+If you need to specify the package manager user agent:
+
+```bash
+npm_config_user_agent=pnpm node ../netlify-cta/dist/index.js
+```

package/add-ons/ai/README.md

@@ -0,0 +1,34 @@
+# AI Chat Add-on
+
+This add-on provides AI chat capabilities with multi-vendor support for your application.
+
+## Features
+
+- **Chat Page** (`/chat`) - Full-featured chat interface with model selection
+- **AI Assistant** - Pop-up assistant available throughout the app
+- **Multi-vendor Support** - Works with OpenAI, Anthropic, Gemini, and Ollama
+
+## Setup
+
+Add your API keys to `.env.local`:
+
+```bash
+# Anthropic (Claude)
+ANTHROPIC_API_KEY=your-key-here
+
+# OpenAI (GPT-4o)
+OPENAI_API_KEY=your-key-here
+
+# Google Gemini
+GEMINI_API_KEY=your-key-here
+```
+
+**Note:** Ollama is available locally without an API key. Install from [ollama.ai](https://ollama.ai).
+
+## Usage
+
+The chat page is available at `/chat`. The AI Assistant button is added to the header and provides a pop-up chat interface available on any page.
+
+## Dependencies
+
+This add-on requires the `start` and `store` add-ons.

package/add-ons/ai/assets/_dot_env.local.append

@@ -0,0 +1,13 @@
+# AI Provider API Keys (add the ones you want to use)
+# At least one key is required for AI chat to work
+
+# Anthropic (Claude)
+ANTHROPIC_API_KEY=
+
+# OpenAI (GPT-4o)
+OPENAI_API_KEY=
+
+# Google Gemini
+GEMINI_API_KEY=
+
+# Note: Ollama is available locally without an API key

package/add-ons/ai/assets/src/components/AIAssistant.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useRef, useState } from "react";
+import { useStore } from "@tanstack/react-store";
+import { Store } from "@tanstack/store";
+
+import { Send, X, ChevronRight } from "lucide-react";
+import { Streamdown } from "streamdown";
+
+import { useAIChat } from "@/lib/ai-hook";
+import type { ChatMessages } from "@/lib/ai-hook";
+
+export const showAIAssistant = new Store(false);
+
+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 anything! I'm here to help.
+      </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>
+              );
+            }
+            return null;
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function AIAssistant() {
+  const isOpen = useStore(showAIAssistant);
+  const { messages, sendMessage } = useAIChat();
+  const [input, setInput] = useState("");
+
+  return (
+    <div className="relative z-50">
+      <button
+        onClick={() => showAIAssistant.setState((state) => !state)}
+        className="w-full flex items-center justify-between px-4 py-2.5 rounded-lg bg-linear-to-r from-orange-500 to-red-600 text-white hover:opacity-90 transition-opacity"
+      >
+        <div className="flex items-center gap-2">
+          <div className="w-5 h-5 rounded-lg bg-white/20 flex items-center justify-center text-xs font-medium">
+            AI
+          </div>
+          <span className="font-medium">AI Assistant</span>
+        </div>
+        <ChevronRight className="w-4 h-4" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute bottom-0 left-full ml-2 w-[700px] h-[600px] bg-gray-900 rounded-lg shadow-xl border border-orange-500/20 flex flex-col">
+          <div className="flex items-center justify-between p-3 border-b border-orange-500/20">
+            <h3 className="font-semibold text-white">AI Assistant</h3>
+            <button
+              onClick={() => showAIAssistant.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-3 border-t border-orange-500/20">
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                if (input.trim()) {
+                  sendMessage(input);
+                  setInput("");
+                }
+              }}
+            >
+              <div className="relative">
+                <textarea
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder="Type your message..."
+                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-3 pr-10 py-2 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden"
+                  rows={1}
+                  style={{ minHeight: "36px", 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-1.5 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/add-ons/ai/assets/src/lib/ai-hook.ts

@@ -0,0 +1,21 @@
+import {
+  fetchServerSentEvents,
+  useChat,
+  createChatClientOptions,
+} from '@tanstack/ai-react'
+import type { InferChatMessages } from '@tanstack/ai-react'
+
+// Default chat options for simple usage
+const defaultChatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents('/api/chat'),
+})
+
+export type ChatMessages = InferChatMessages<typeof defaultChatOptions>
+
+export const useAIChat = () => {
+  const chatOptions = createChatClientOptions({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+
+  return useChat(chatOptions)
+}

package/add-ons/ai/assets/src/lib/weather-tools.ts

@@ -0,0 +1,30 @@
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+
+// Tool definition for getting weather
+export const getWeatherToolDef = toolDefinition({
+  name: 'getWeather',
+  description:
+    'Get the current weather for a city. Returns temperature, condition, and humidity.',
+  inputSchema: z.object({
+    city: z.string().describe('The city to get weather for'),
+  }),
+  outputSchema: z.object({
+    city: z.string(),
+    temperature: z.number(),
+    condition: z.string(),
+    humidity: z.number(),
+  }),
+})
+
+// Server implementation - mock weather data
+export const getWeather = getWeatherToolDef.server(({ city }) => {
+  // Mock weather data - in a real app, call a weather API
+  const conditions = ['sunny', 'cloudy', 'rainy', 'partly cloudy', 'windy']
+  return {
+    city,
+    temperature: Math.floor(Math.random() * 30) + 5,
+    condition: conditions[Math.floor(Math.random() * conditions.length)],
+    humidity: Math.floor(Math.random() * 50) + 30,
+  }
+})

package/add-ons/ai/assets/src/routes/api.chat.ts

@@ -0,0 +1,94 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { chat, maxIterations, toServerSentEventsResponse } from '@tanstack/ai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+import { openaiText } from '@tanstack/ai-openai'
+import { geminiText } from '@tanstack/ai-gemini'
+import { ollamaText } from '@tanstack/ai-ollama'
+
+import { getWeather } from '@/lib/weather-tools'
+
+const SYSTEM_PROMPT = `You are a helpful weather assistant. You can check the weather for any city using the getWeather tool.
+
+CAPABILITIES:
+1. Use getWeather to get the current weather for any city
+
+INSTRUCTIONS:
+- When users ask about weather, use the getWeather tool to get the information
+- Provide friendly, conversational responses about the weather
+- You can give advice based on weather conditions (e.g., "bring an umbrella" if rainy)
+- Keep responses concise but helpful`
+
+export const Route = createFileRoute('/api/chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const requestSignal = request.signal
+
+        if (requestSignal.aborted) {
+          return new Response(null, { status: 499 })
+        }
+
+        const abortController = new AbortController()
+
+        try {
+          const body = await request.json()
+          const { messages } = body
+          const data = body.data || {}
+
+          // Determine the best available provider
+          let provider: 'anthropic' | 'openai' | 'gemini' | 'ollama' =
+            data.provider || 'ollama'
+          let model: string = data.model || 'mistral:7b'
+
+          // Use the first available provider with an API key, fallback to ollama
+          if (process.env.ANTHROPIC_API_KEY) {
+            provider = 'anthropic'
+            model = 'claude-haiku-4-5'
+          } else if (process.env.OPENAI_API_KEY) {
+            provider = 'openai'
+            model = 'gpt-4o'
+          } else if (process.env.GEMINI_API_KEY) {
+            provider = 'gemini'
+            model = 'gemini-2.0-flash-exp'
+          }
+
+          const adapterConfig = {
+            anthropic: () =>
+              anthropicText((model || 'claude-haiku-4-5') as any),
+            openai: () => openaiText((model || 'gpt-4o') as any),
+            gemini: () => geminiText((model || 'gemini-2.0-flash-exp') as any),
+            ollama: () => ollamaText((model || 'mistral:7b') as any),
+          }
+
+          const adapter = adapterConfig[provider]()
+
+          const stream = chat({
+            adapter,
+            tools: [getWeather],
+            systemPrompts: [SYSTEM_PROMPT],
+            agentLoopStrategy: maxIterations(5),
+            messages,
+            abortController,
+          })
+
+          return toServerSentEventsResponse(stream, { abortController })
+        } catch (error: any) {
+          console.error('Chat error:', error)
+          if (error.name === 'AbortError' || abortController.signal.aborted) {
+            return new Response(null, { status: 499 })
+          }
+          return new Response(
+            JSON.stringify({
+              error: 'Failed to process chat request',
+              message: error.message,
+            }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+      },
+    },
+  },
+})