kaddidlehopper 0.1.2 → 0.3.0

package/add-ons/db/assets/DB-SETUP.md

@@ -0,0 +1,65 @@
+# Netlify DB Setup
+
+After scaffolding your project with the DB add-on, follow these steps to get Netlify DB running.
+
+## Prerequisites
+
+- A [Netlify](https://www.netlify.com/) account
+- The [Netlify CLI](https://docs.netlify.com/cli/get-started/) installed (`npm install -g netlify-cli`)
+
+## 1. Link Your Project to Netlify
+
+If you haven't already, link your local project to a Netlify site:
+
+```sh
+netlify login
+netlify init
+```
+
+Follow the prompts to create a new site or link to an existing one.
+
+## 2. Initialize the Database
+
+Run the Netlify DB initialization command to provision a Postgres database for your site:
+
+```sh
+netlify db init
+```
+
+This creates a Neon Postgres database attached to your Netlify site and sets the `DATABASE_URL` environment variable automatically.
+
+## 3. Push the Schema to the Database
+
+Use Drizzle Kit to push your schema to the database:
+
+```sh
+npx drizzle-kit push
+```
+
+This creates the `guestbook` table defined in `src/db/schema.ts`.
+
+## 4. Run the Dev Server
+
+Start local development via the Netlify CLI:
+
+```sh
+netlify dev
+```
+
+Then visit [http://localhost:8888/db-example](http://localhost:8888/db-example) to see the guestbook demo.
+
+## 5. Deploy
+
+When you're ready, deploy to Netlify:
+
+```sh
+netlify deploy --build --prod
+```
+
+Or push to your git remote and Netlify will build and deploy automatically if continuous deployment is configured.
+
+## Troubleshooting
+
+- **`DATABASE_URL` not set** — Make sure you've run `netlify db:init` and `netlify env:pull`.
+- **Table not found errors** — Run `npx drizzle-kit push` to ensure the schema is applied.
+- **Connection errors locally** — Confirm `.env.local` has the correct `DATABASE_URL` and that your IP is not blocked by the Neon project settings.

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

@@ -0,0 +1,2 @@
+# Netlify DB - run `netlify db:init` to set up your database
+# DATABASE_URL is automatically set by Netlify after initialization

package/add-ons/db/assets/drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  schema: "./src/db/schema.ts",
+  out: "./drizzle",
+  dialect: "postgresql",
+  dbCredentials: {
+    url: process.env.DATABASE_URL!,
+  },
+});

package/add-ons/db/assets/src/db/index.ts

@@ -0,0 +1,8 @@
+import { drizzle } from "drizzle-orm/neon-http";
+import { neon } from "@neondatabase/serverless";
+import * as schema from "./schema";
+
+const sql = neon(process.env.DATABASE_URL!);
+export const db = drizzle(sql, { schema });
+
+export { schema };

package/add-ons/db/assets/src/db/schema.ts

@@ -0,0 +1,8 @@
+import { pgTable, serial, text, timestamp } from "drizzle-orm/pg-core";
+
+export const guestbook = pgTable("guestbook", {
+  id: serial("id").primaryKey(),
+  name: text("name").notNull(),
+  message: text("message").notNull(),
+  createdAt: timestamp("created_at").defaultNow().notNull(),
+});

package/add-ons/db/assets/src/routes/db-example.tsx

@@ -0,0 +1,118 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useRouter } from "@tanstack/react-router";
+import { useState } from "react";
+import { getEntries, addEntry } from "@/server/guestbook.functions";
+
+export const Route = createFileRoute("/db-example")({
+  loader: async () => {
+    const entries = await getEntries();
+    return { entries };
+  },
+  component: DBExample,
+});
+
+function DBExample() {
+  const { entries } = Route.useLoaderData();
+  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const form = e.currentTarget;
+    setIsSubmitting(true);
+
+    const formData = new FormData(form);
+    const name = formData.get("name") as string;
+    const message = formData.get("message") as string;
+
+    try {
+      await addEntry({ data: { name, message } });
+      form.reset();
+      await router.invalidate();
+    } catch (error) {
+      console.error("Failed to add entry:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-linear-to-br from-teal-900 via-emerald-800 to-cyan-900 flex items-center justify-center">
+      <div className="w-full max-w-lg px-4 py-12">
+        <h1 className="text-4xl md:text-5xl font-black text-white mb-2 tracking-tight">
+          Guestbook
+        </h1>
+        <p className="text-teal-100/80 mb-8">
+          Sign the guestbook — powered by Netlify DB with Drizzle ORM.
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-6 mb-12">
+          <div>
+            <label
+              htmlFor="name"
+              className="block text-sm font-medium text-teal-200 mb-2"
+            >
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              required
+              className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-teal-300/50 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent"
+              placeholder="Your name"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="message"
+              className="block text-sm font-medium text-teal-200 mb-2"
+            >
+              Message
+            </label>
+            <textarea
+              id="message"
+              name="message"
+              required
+              rows={3}
+              className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-teal-300/50 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent resize-none"
+              placeholder="Leave a message..."
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="w-full px-8 py-3 bg-teal-500 hover:bg-teal-600 disabled:bg-teal-500/50 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-teal-500/30"
+          >
+            {isSubmitting ? "Signing..." : "Sign Guestbook"}
+          </button>
+        </form>
+
+        <div className="space-y-4">
+          <h2 className="text-xl font-bold text-white">
+            {entries.length === 0
+              ? "No entries yet — be the first!"
+              : `${entries.length} ${entries.length === 1 ? "entry" : "entries"}`}
+          </h2>
+
+          {entries.map((entry) => (
+            <div
+              key={entry.id}
+              className="rounded-lg bg-white/10 border border-white/10 p-4"
+            >
+              <div className="flex items-baseline justify-between mb-1">
+                <span className="font-semibold text-white">{entry.name}</span>
+                <span className="text-xs text-teal-300/60">
+                  {new Date(entry.createdAt).toLocaleDateString()}
+                </span>
+              </div>
+              <p className="text-teal-100/80 text-sm">{entry.message}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/add-ons/db/assets/src/server/guestbook.functions.ts

@@ -0,0 +1,23 @@
+import { createServerFn } from "@tanstack/react-start";
+import { db, schema } from "@/db";
+import { desc } from "drizzle-orm";
+
+export const getEntries = createServerFn({ method: "POST" }).handler(
+  async () => {
+    const entries = await db
+      .select()
+      .from(schema.guestbook)
+      .orderBy(desc(schema.guestbook.createdAt));
+    return entries;
+  }
+);
+
+export const addEntry = createServerFn({ method: "POST" })
+  .inputValidator((data: { name: string; message: string }) => data)
+  .handler(async ({ data }) => {
+    const result = await db
+      .insert(schema.guestbook)
+      .values({ name: data.name, message: data.message })
+      .returning();
+    return result[0];
+  });

package/add-ons/db/info.json

@@ -0,0 +1,21 @@
+{
+  "name": "Netlify DB",
+  "phase": "add-on",
+  "description": "Add a guestbook demo powered by Netlify DB (Postgres) with Drizzle ORM. Demonstrates full CRUD with a serverless database.",
+  "link": "https://docs.netlify.com/database/overview/",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "priority": 20,
+  "routes": [
+    {
+      "icon": "Database",
+      "url": "/db-example",
+      "name": "DB Example",
+      "path": "src/routes/db-example.tsx",
+      "jsName": "DBExample"
+    }
+  ],
+  "integrations": [],
+  "dependsOn": [],
+  "variables": []
+}

package/add-ons/db/package.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "drizzle-orm": "^0.44.0",
+    "@neondatabase/serverless": "^1.0.0",
+    "@netlify/neon": "^0.1.2"
+  },
+  "devDependencies": {
+    "drizzle-kit": "^0.31.0"
+  }
+}

package/add-ons/forms/assets/public/form-example.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Form</title>
+</head>
+<body>
+  <form name="signup" method="POST" data-netlify="true" netlify-honeypot="bot-field" hidden>
+    <input type="text" name="name" />
+    <input type="email" name="email" />
+    <input name="bot-field" />
+  </form>
+</body>
+</html>

package/add-ons/forms/assets/src/routes/form-example.tsx

@@ -0,0 +1,76 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/form-example')({
+  component: FormExample,
+})
+
+function FormExample() {
+  return (
+    <div className="min-h-screen bg-linear-to-br from-teal-900 via-emerald-800 to-cyan-900 flex items-center justify-center">
+      <div className="w-full max-w-md px-4">
+        <h1 className="text-4xl md:text-5xl font-black text-white mb-2 tracking-tight">
+          Sign up
+        </h1>
+        <p className="text-teal-100/80 mb-8">
+          Enter your name and email to get started.
+        </p>
+
+        <form
+          name="signup"
+          method="POST"
+          data-netlify="true"
+          netlify-honeypot="bot-field"
+          className="space-y-6"
+        >
+          <input type="hidden" name="form-name" value="signup" />
+          <p className="hidden" style={{ display: 'none' }}>
+            <label>
+              Don&apos;t fill this out: <input name="bot-field" />
+            </label>
+          </p>
+
+          <div>
+            <label
+              htmlFor="name"
+              className="block text-sm font-medium text-teal-200 mb-2"
+            >
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              required
+              className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-teal-300/50 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent"
+              placeholder="Your name"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-teal-200 mb-2"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              required
+              className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-teal-300/50 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent"
+              placeholder="you@example.com"
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="w-full px-8 py-3 bg-teal-500 hover:bg-teal-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-teal-500/30"
+          >
+            Submit
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}

package/add-ons/forms/info.json

@@ -0,0 +1,21 @@
+{
+  "name": "Netlify Forms",
+  "phase": "add-on",
+  "description": "Add a signup form powered by Netlify Forms with spam protection via honeypot field. No server-side code required.",
+  "link": "https://docs.netlify.com/forms/setup/",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "priority": 20,
+  "routes": [
+    {
+      "icon": "FormInput",
+      "url": "/form-example",
+      "name": "Form Example",
+      "path": "src/routes/form-example.tsx",
+      "jsName": "FormExample"
+    }
+  ],
+  "integrations": [],
+  "dependsOn": [],
+  "variables": []
+}

package/add-ons/forms/package.json

@@ -0,0 +1,3 @@
+{
+  "dependencies": {}
+}

package/examples/ai-chat/README.md

@@ -0,0 +1,36 @@
+# AI Chat Example
+
+A weather chat assistant built with TanStack Start and TanStack AI for Netlify deployment.
+
+## Features
+
+- **AI Chat Interface**: Conversational weather assistant with streaming responses
+- **Multi-Provider Support**: Works with Anthropic, OpenAI, Gemini, or Ollama
+- **Tool Calling**: AI uses a getWeather tool to fetch weather data
+- **Markdown Rendering**: Rich message formatting with syntax highlighting
+
+## Project Structure
+
+```
+├── src/
+│   ├── lib/
+│   │   ├── ai-hook.ts          # Chat hook setup
+│   │   └── weather-tools.ts    # Weather tool definition
+│   └── routes/
+│       ├── __root.tsx           # Root layout
+│       ├── index.tsx            # Chat UI
+│       └── api.chat.ts          # Chat API endpoint
+```
+
+## Development
+
+```bash
+npm run dev
+```
+
+Set one of these environment variables to use a cloud provider:
+- `ANTHROPIC_API_KEY`
+- `OPENAI_API_KEY`
+- `GEMINI_API_KEY`
+
+Falls back to Ollama (local) if no API key is set.

package/examples/ai-chat/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/examples/ai-chat/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/examples/ai-chat/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 appCss from '../styles.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'Weather Chat',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+  shellComponent: RootDocument,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <header className="p-4 flex items-center justify-between bg-gray-800 text-white shadow-lg">
+          <h1 className="text-xl font-semibold">Weather Chat</h1>
+        </header>
+        {children}
+        <TanStackDevtools
+          config={{
+            position: 'bottom-right',
+          }}
+          plugins={[
+            {
+              name: 'Tanstack Router',
+              render: <TanStackRouterDevtoolsPanel />,
+            },
+          ]}
+        />
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/examples/ai-chat/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' },
+            },
+          )
+        }
+      },
+    },
+  },
+})