kaddidlehopper 0.1.0

package/examples/blog/assets/src/lib/blog-tools.ts

@@ -0,0 +1,111 @@
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+
+import { allPosts } from 'content-collections'
+
+// Tool definition for getting the current blog post content
+export const getPostBySlugToolDef = toolDefinition({
+  name: 'getCurrentBlogPost',
+  description:
+    'Get the full content and metadata of the current blog post the user is viewing. Use this to answer questions about the article.',
+  inputSchema: z.object({
+    slug: z.string().describe('The slug of the current blog post'),
+  }),
+  outputSchema: z.object({
+    title: z.string(),
+    summary: z.string(),
+    content: z.string(),
+    categories: z.array(z.string()),
+    date: z.string(),
+    image: z.string(),
+  }),
+})
+
+// Server implementation
+export const getPostBySlug = getPostBySlugToolDef.server(({ slug }) => {
+  const post = allPosts.find((post) => post.slug === slug)
+  if (!post) {
+    return {
+      title: 'Post not found',
+      summary: '',
+      content: 'The requested blog post was not found.',
+      categories: [],
+      date: '',
+      image: '',
+    }
+  }
+  return {
+    title: post.title,
+    summary: post.summary,
+    content: post.content,
+    categories: post.categories,
+    date: post.date,
+    image: post.image,
+  }
+})
+
+// Tool definition for listing all available blog posts
+export const getAllBlogPostsToolDef = toolDefinition({
+  name: 'getAllBlogPosts',
+  description:
+    'Get a list of all available blog posts with their titles, summaries, and categories. Useful for recommending related content or answering questions about other posts.',
+  inputSchema: z.object({}),
+  outputSchema: z.array(
+    z.object({
+      slug: z.string(),
+      title: z.string(),
+      summary: z.string(),
+      categories: z.array(z.string()),
+      date: z.string(),
+    }),
+  ),
+})
+
+// Server implementation
+export const getAllBlogPosts = getAllBlogPostsToolDef.server(() => {
+  return allPosts.map((post) => ({
+    slug: post.slug,
+    title: post.title,
+    summary: post.summary,
+    categories: post.categories,
+    date: post.date,
+  }))
+})
+
+// Tool definition for suggesting related posts
+export const searchBlogPostsToolDef = toolDefinition({
+  name: 'searchBlogPosts',
+  description:
+    "Search for blog posts by title, summary, or categories. Use this to find articles that match the user's query.",
+  inputSchema: z.object({
+    query: z.string().describe('The search query'),
+  }),
+  outputSchema: z.array(
+    z.object({
+      slug: z.string(),
+      title: z.string(),
+      summary: z.string(),
+      categories: z.array(z.string()),
+      sharedCategories: z.array(z.string()),
+    }),
+  ),
+})
+
+// Server implementation
+export const searchBlogPosts = searchBlogPostsToolDef.server(({ query }) => {
+  return allPosts
+    .filter(
+      (post) =>
+        post.title.toLowerCase().includes(query.toLowerCase()) ||
+        post.summary.toLowerCase().includes(query.toLowerCase()) ||
+        post.categories.some((cat) =>
+          cat.toLowerCase().includes(query.toLowerCase()),
+        ),
+    )
+    .map((post) => ({
+      slug: post.slug,
+      title: post.title,
+      summary: post.summary,
+      categories: post.categories,
+    }))
+})

package/examples/blog/assets/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/examples/blog/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: 'Hawaii Adventures Blog',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+  shellComponent: RootDocument,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body className="bg-[#f5f1e4] min-h-screen">
+        <Header />
+        <main className="mt-20">{children}</main>
+        <TanStackDevtools
+          config={{
+            position: 'bottom-right',
+          }}
+          plugins={[
+            {
+              name: 'Tanstack Router',
+              render: <TanStackRouterDevtoolsPanel />,
+            },
+          ]}
+        />
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/examples/blog/assets/src/routes/api.blog-chat.ts

@@ -0,0 +1,117 @@
+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 {
+  getPostBySlug,
+  getAllBlogPosts,
+  searchBlogPosts,
+} from '@/lib/blog-tools'
+import type { Provider } from '@/lib/model-selection'
+
+export const Route = createFileRoute('/api/blog-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, slug } = body
+          const data = body.data || {}
+
+          const SYSTEM_PROMPT = slug
+            ? `You are a helpful blog assistant. You help readers understand and engage with blog articles.
+
+CAPABILITIES:
+1. Use getPostBySlug to read the content of the article the user is currently viewing
+2. Use getAllBlogPosts to see all available articles on the blog
+3. Use searchBlogPosts to find articles that match the user's query
+
+INSTRUCTIONS:
+- When a user asks about "this article", "this post", or "what I'm reading", use getPostBySlug first
+- Be conversational and helpful
+- Summarize content when asked, highlight key points, and answer questions about the article
+- If asked for recommendations, use getRelatedPosts to suggest similar content
+- Keep responses concise but informative
+- You can help explain concepts, provide additional context, or discuss themes from the articles
+
+CONTEXT: The current article slug is "${slug}".`
+            : `You are a helpful blog assistant. You help readers understand and engage with blog articles.
+
+CAPABILITIES:
+1. Use getAllBlogPosts to see all available articles on the blog
+2. UsUse searchBlogPosts to find articles that match the user's query
+
+INSTRUCTIONS:
+- When a user asks for a recommendation, use searchBlogPosts to suggest similar content
+- Keep responses concise but informative
+- You can help explain concepts, provide additional context, or discuss themes from the articles`
+
+          // Determine the best available provider
+          let provider: Provider = 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'
+          }
+          // else keep ollama as default
+
+          // Adapter factory pattern for multi-vendor support
+          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: [getPostBySlug, getAllBlogPosts, searchBlogPosts],
+            systemPrompts: [SYSTEM_PROMPT],
+            agentLoopStrategy: maxIterations(5),
+            messages,
+            abortController,
+          })
+
+          return toServerSentEventsResponse(stream, { abortController })
+        } catch (error: any) {
+          console.error('Blog 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' },
+            },
+          )
+        }
+      },
+    },
+  },
+})

package/examples/blog/assets/src/routes/category.$category.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { allPosts } from "content-collections";
+
+import BlogPosts from "@/components/blog-posts";
+
+export const Route = createFileRoute("/category/$category")({
+  component: RouteComponent,
+  loader: async ({ params }) => {
+    const category = params.category;
+    const posts = allPosts.filter((post) => post.categories.includes(category));
+    return { category, posts };
+  },
+});
+
+function RouteComponent() {
+  const { category, posts } = Route.useLoaderData();
+  return <BlogPosts title={category} posts={posts} />;
+}

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

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { allPosts } from 'content-collections'
+
+import BlogPosts from '@/components/blog-posts'
+import VacayAssistant from '@/components/VacayAssistant'
+
+export const Route = createFileRoute('/')({
+  component: App,
+})
+
+function App() {
+  return (
+    <>
+      <VacayAssistant />
+      <BlogPosts title="Hawaii Adventures" posts={allPosts} />
+    </>
+  )
+}

package/examples/blog/assets/src/routes/posts.$slug.tsx

@@ -0,0 +1,63 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { marked } from 'marked'
+
+import { allPosts } from 'content-collections'
+
+import VacayAssistant from '@/components/VacayAssistant'
+
+export const Route = createFileRoute('/posts/$slug')({
+  loader: async ({ params }) => {
+    const post = allPosts.find((post) => post.slug === params.slug)
+    if (!post) {
+      throw new Error('Post not found')
+    }
+    return post
+  },
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const post = Route.useLoaderData()
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <VacayAssistant slug={post.slug} postTitle={post.title} />
+
+      <div
+        className="relative h-[66vh]"
+        style={{
+          backgroundImage: `url(/${post.image})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }}
+      >
+        <div className="absolute inset-0 bg-black/30" />
+      </div>
+
+      <div className="relative -mt-[40vh]">
+        <div className="container mx-auto max-w-4xl px-4 text-white">
+          <div className="rounded-2xl overflow-hidden backdrop-blur-xl bg-white/10 border border-white/20 shadow-2xl">
+            <div className="p-8 md:p-12">
+              {/* Title section */}
+              <h1 className="text-4xl font-serif italic md:text-5xl font-bold  mb-4 drop-shadow-lg">
+                {post.title}
+              </h1>
+
+              {/* Summary section */}
+              <p className="text-lg text-white mb-8 drop-shadow">
+                {post.summary}
+              </p>
+
+              {/* Main content */}
+              <div className="prose prose-lg max-w-none prose-invert prose-p:text-white prose-headings:text-white prose-strong:text-white prose-a:text-teal-300">
+                <div
+                  dangerouslySetInnerHTML={{ __html: marked(post.content) }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/examples/blog/assets/src/styles.css

@@ -0,0 +1,138 @@
+@import 'tailwindcss';
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+:root {
+  --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);
+  --destructive-foreground: 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.871 0.006 286.286);
+  --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);
+  --radius: 0.625rem;
+  --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.871 0.006 286.286);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.141 0.005 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.141 0.005 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --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.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.274 0.006 286.033);
+  --input: oklch(0.274 0.006 286.033);
+  --ring: oklch(0.442 0.017 285.786);
+  --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(0.274 0.006 286.033);
+  --sidebar-ring: oklch(0.442 0.017 285.786);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/examples/blog/info.json

@@ -0,0 +1,43 @@
+{
+  "name": "Blog",
+  "description": "A Hawaii adventures travel blog built with content-collections and TanStack Start for Netlify.",
+  "phase": "example",
+  "modes": ["file-router"],
+  "type": "example",
+  "priority": 10,
+  "link": "",
+  "routes": [
+    {
+      "url": "/",
+      "path": "src/routes/index.tsx",
+      "jsName": "BlogHome"
+    },
+    {
+      "url": "/posts/$slug",
+      "path": "src/routes/posts.$slug.tsx",
+      "jsName": "BlogPost"
+    },
+    {
+      "url": "/category/$category",
+      "path": "src/routes/category.$category.tsx",
+      "jsName": "BlogCategory"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "vite-plugin",
+      "import": "import contentCollections from '@content-collections/vite'",
+      "code": "contentCollections()"
+    }
+  ],
+  "dependsOn": [],
+  "variables": [],
+  "bareBones": {
+    "deleteFiles": [
+      "public/jungle.jpg",
+      "public/mountains.jpg",
+      "public/snorkeling.jpg",
+      "public/waterfall.jpg"
+    ]
+  }
+}

package/examples/blog/package.json

@@ -0,0 +1,23 @@
+{
+  "dependencies": {
+    "@tanstack/ai": "0.2.2",
+    "@tanstack/ai-anthropic": "0.2.0",
+    "@tanstack/ai-client": "0.2.2",
+    "@tanstack/ai-gemini": "0.3.2",
+    "@tanstack/ai-ollama": "0.3.0",
+    "@tanstack/ai-openai": "0.3.0",
+    "@tanstack/ai-react": "0.2.2",
+    "@tanstack/store": "^0.8.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "marked": "^17.0.1",
+    "streamdown": "^2.1.0",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^4.3.5"
+  },
+  "devDependencies": {
+    "@content-collections/core": "^0.13.1",
+    "@content-collections/vite": "^0.2.8"
+  }
+}