@tanstack/create 0.49.1

package/dist/frameworks/react/examples/events/assets/src/components/RemyAssistant.tsx

@@ -0,0 +1,207 @@
+import { useEffect, useRef, useState } from 'react'
+import { Send, X, ChefHat, Croissant } from 'lucide-react'
+import { Streamdown } from 'streamdown'
+import { Store } from '@tanstack/store'
+
+import { useConferenceChat } from '@/lib/conference-ai-hook'
+import type { ConferenceChatMessages } from '@/lib/conference-ai-hook'
+
+function Messages({ messages }: { messages: ConferenceChatMessages }) {
+  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 flex-col items-center justify-center text-cream/60 text-sm px-6 py-8">
+        <div className="relative mb-4">
+          <ChefHat className="w-12 h-12 text-copper/60 animate-pulse" />
+          <Croissant className="w-6 h-6 text-gold/60 absolute -bottom-1 -right-1" />
+        </div>
+        <p className="text-center text-cream/80 font-medium font-display text-lg">
+          Bonjour! I'm Remy 👨‍🍳
+        </p>
+        <p className="text-xs text-cream/40 mt-2 text-center max-w-[220px]">
+          Your culinary guide to Haute Pâtisserie 2026. Ask about speakers, sessions, or pastry techniques!
+        </p>
+      </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-gradient-to-r from-copper/5 via-gold/5 to-copper/5'
+              : 'bg-transparent'
+          }`}
+        >
+          {parts.map((part, index) => {
+            if (part.type === 'text' && part.content) {
+              return (
+                <div key={index} className="flex items-start gap-3 px-4">
+                  {role === 'assistant' ? (
+                    <div className="w-7 h-7 rounded-full bg-gradient-to-br from-copper via-copper-dark to-gold flex items-center justify-center text-xs font-bold text-charcoal flex-shrink-0 shadow-lg shadow-copper/20">
+                      👨‍🍳
+                    </div>
+                  ) : (
+                    <div className="w-7 h-7 rounded-full bg-charcoal-light flex items-center justify-center text-xs font-medium text-cream flex-shrink-0 border border-border/50">
+                      You
+                    </div>
+                  )}
+                  <div className="flex-1 min-w-0 text-cream prose dark:prose-invert max-w-none prose-sm prose-p:text-cream prose-headings:text-cream prose-strong:text-gold">
+                    <Streamdown>{part.content}</Streamdown>
+                  </div>
+                </div>
+              )
+            }
+            return null
+          })}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+interface RemyAssistantProps {
+  speakerSlug?: string
+  talkSlug?: string
+  contextTitle?: string
+}
+
+// Export store for header control
+export const showRemyAssistant = new Store(false)
+
+export default function RemyAssistant({
+  speakerSlug,
+  talkSlug,
+  contextTitle,
+}: RemyAssistantProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const { messages, sendMessage, isLoading } = useConferenceChat(speakerSlug, talkSlug)
+  const [input, setInput] = useState('')
+
+  // Sync with store for header control
+  useEffect(() => {
+    return showRemyAssistant.subscribe(() => {
+      setIsOpen(showRemyAssistant.state)
+    })
+  }, [])
+
+  const handleToggle = () => {
+    const newState = !isOpen
+    setIsOpen(newState)
+    showRemyAssistant.setState(() => newState)
+  }
+
+  const handleSend = () => {
+    if (input.trim()) {
+      sendMessage(input)
+      setInput('')
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed top-36 right-4 z-[100] w-[400px] h-[520px] rounded-2xl shadow-2xl flex flex-col overflow-hidden border border-copper/20 backdrop-blur-xl bg-gradient-to-b from-charcoal/98 via-charcoal/95 to-charcoal-light/98">
+      {/* Decorative top gradient */}
+      <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-copper/10 via-gold/5 to-transparent pointer-events-none" />
+
+      {/* Header */}
+      <div className="relative flex items-center justify-between p-4 border-b border-copper/10">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-copper via-copper-dark to-gold flex items-center justify-center shadow-lg shadow-copper/30 rotate-3 hover:rotate-0 transition-transform">
+            <span className="text-lg">👨‍🍳</span>
+          </div>
+          <div>
+            <h3 className="font-display font-bold text-cream text-base tracking-tight">
+              Remy
+            </h3>
+            {contextTitle && (
+              <p className="text-xs text-copper/70 truncate max-w-[220px]">
+                🥐 {contextTitle}
+              </p>
+            )}
+          </div>
+        </div>
+        <button
+          onClick={handleToggle}
+          className="text-cream/50 hover:text-cream transition-colors p-2 hover:bg-white/5 rounded-xl"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+
+      {/* Messages */}
+      <Messages messages={messages} />
+
+      {/* Loading indicator */}
+      {isLoading && (
+        <div className="px-4 py-3 border-t border-copper/10">
+          <div className="flex items-center gap-2 text-copper/80 text-xs">
+            <div className="flex gap-1">
+              <span className="w-2 h-2 bg-copper rounded-full animate-bounce [animation-delay:-0.3s]"></span>
+              <span className="w-2 h-2 bg-gold rounded-full animate-bounce [animation-delay:-0.15s]"></span>
+              <span className="w-2 h-2 bg-copper-light rounded-full animate-bounce"></span>
+            </div>
+            <span className="font-medium">Crafting a response...</span>
+          </div>
+        </div>
+      )}
+
+      {/* Input */}
+      <div className="relative p-4 border-t border-copper/10 bg-charcoal/50">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            handleSend()
+          }}
+        >
+          <div className="relative">
+            <textarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="Ask about speakers, sessions, techniques..."
+              disabled={isLoading}
+              className="w-full rounded-xl border border-copper/20 bg-charcoal-light/50 pl-4 pr-12 py-3 text-sm text-cream placeholder-cream/30 focus:outline-none focus:ring-2 focus:ring-copper/40 focus:border-transparent resize-none overflow-hidden disabled:opacity-50 transition-all"
+              rows={1}
+              style={{ minHeight: '48px', maxHeight: '100px' }}
+              onInput={(e) => {
+                const target = e.target as HTMLTextAreaElement
+                target.style.height = 'auto'
+                target.style.height = Math.min(target.scrollHeight, 100) + 'px'
+              }}
+              onKeyDown={(e) => {
+                if (
+                  e.key === 'Enter' &&
+                  !e.shiftKey &&
+                  input.trim() &&
+                  !isLoading
+                ) {
+                  e.preventDefault()
+                  handleSend()
+                }
+              }}
+            />
+            <button
+              type="submit"
+              disabled={!input.trim() || isLoading}
+              className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-lg bg-gradient-to-r from-copper to-copper-dark text-charcoal disabled:opacity-30 disabled:bg-gray-600 disabled:from-gray-600 disabled:to-gray-600 transition-all hover:shadow-lg hover:shadow-copper/20"
+            >
+              <Send className="w-4 h-4" />
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package/dist/frameworks/react/examples/events/assets/src/components/RemyButton.tsx

@@ -0,0 +1,18 @@
+import { ChefHat, ChevronRight } from "lucide-react";
+import { showRemyAssistant } from "./RemyAssistant";
+
+export default function RemyButton() {
+  return (
+    <button
+      onClick={() => showRemyAssistant.setState(true)}
+      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"
+      aria-label="Open Remy Assistant"
+    >
+      <div className="flex items-center gap-2">
+        <ChefHat size={24} />
+        <span className="text-sm">Remy</span>
+      </div>
+      <ChevronRight className="w-4 h-4" />
+    </button>
+  );
+}

package/dist/frameworks/react/examples/events/assets/src/components/SpeakerCard.tsx

@@ -0,0 +1,67 @@
+import { Link } from '@tanstack/react-router'
+import { MapPin } from 'lucide-react'
+
+import { type Speaker } from 'content-collections'
+
+import { Card, CardContent } from '@/components/ui/card'
+
+interface SpeakerCardProps {
+  speaker: Speaker
+  featured?: boolean
+}
+
+export default function SpeakerCard({ speaker, featured = false }: SpeakerCardProps) {
+  return (
+    <Link
+      to={`/speakers/${speaker.slug}`}
+      className="group relative block"
+    >
+      <Card
+        className={`relative overflow-hidden bg-card border-border/50 card-hover
+          ${featured ? 'aspect-square' : 'aspect-square'}
+          hover:border-copper/50`}
+      >
+        {/* Headshot */}
+        <div className="absolute inset-0">
+          <img 
+            src={`/${speaker.headshot}`} 
+            alt={speaker.name}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-charcoal via-charcoal/50 to-transparent" />
+        </div>
+
+        {/* Content overlay */}
+        <CardContent className="absolute bottom-0 left-0 right-0 p-6 z-10">
+          <div className="space-y-2">
+            {/* Specialty tag */}
+            <span className="inline-block px-3 py-1 text-xs font-medium tracking-wider uppercase bg-copper/20 text-copper-light rounded-full border border-copper/30">
+              {speaker.specialty}
+            </span>
+            
+            {/* Name */}
+            <h3 className="font-display text-2xl font-semibold text-cream group-hover:text-gold transition-colors">
+              {speaker.name}
+            </h3>
+            
+            {/* Title & Restaurant */}
+            <p className="text-cream/70 font-body text-lg">
+              {speaker.title}
+            </p>
+            
+            {/* Location */}
+            <div className="flex items-center gap-2 text-cream/50 text-sm">
+              <MapPin className="w-3.5 h-3.5" />
+              <span>{speaker.restaurant}, {speaker.location}</span>
+            </div>
+          </div>
+        </CardContent>
+
+        {/* Decorative corner accent */}
+        <div className="absolute top-0 right-0 w-20 h-20 overflow-hidden">
+          <div className="absolute top-0 right-0 w-28 h-28 bg-gradient-to-bl from-copper/20 to-transparent transform rotate-45 translate-x-14 -translate-y-14" />
+        </div>
+      </Card>
+    </Link>
+  )
+}

package/dist/frameworks/react/examples/events/assets/src/components/TalkCard.tsx

@@ -0,0 +1,77 @@
+import { Link } from '@tanstack/react-router'
+import { Clock, User } from 'lucide-react'
+
+import { type Talk } from 'content-collections'
+
+import { Card, CardContent } from '@/components/ui/card'
+
+interface TalkCardProps {
+  talk: Talk
+  featured?: boolean
+}
+
+export default function TalkCard({ talk, featured = false }: TalkCardProps) {
+  return (
+    <Link
+      to={`/talks/${talk.slug}`}
+      className="group relative block"
+    >
+      <Card
+        className={`relative overflow-hidden bg-card border-border/50 card-hover
+          ${featured ? 'aspect-[16/10]' : 'aspect-[16/9]'}
+          hover:border-gold/50`}
+      >
+        {/* Image */}
+        <div className="absolute inset-0">
+          <img 
+            src={`/${talk.image}`} 
+            alt={talk.title}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-charcoal via-charcoal/60 to-transparent" />
+        </div>
+
+        {/* Content overlay */}
+        <CardContent className="absolute bottom-0 left-0 right-0 p-6 z-10">
+          <div className="space-y-3">
+            {/* Topics */}
+            <div className="flex flex-wrap gap-2">
+              {talk.topics.slice(0, 2).map((topic) => (
+                <span 
+                  key={topic}
+                  className="px-2.5 py-0.5 text-xs font-medium tracking-wide uppercase bg-gold/15 text-gold border border-gold/30 rounded-full"
+                >
+                  {topic}
+                </span>
+              ))}
+            </div>
+            
+            {/* Title */}
+            <h3 className="font-display text-xl font-semibold text-cream group-hover:text-gold transition-colors leading-tight">
+              {talk.title}
+            </h3>
+            
+            {/* Speaker & Duration */}
+            <div className="flex items-center gap-4 text-cream/60 text-sm">
+              <div className="flex items-center gap-1.5">
+                <User className="w-3.5 h-3.5" />
+                <span>{talk.speaker}</span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Clock className="w-3.5 h-3.5" />
+                <span>{talk.duration}</span>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+
+        {/* Decorative accent */}
+        <div className="absolute top-4 right-4">
+          <div className="w-8 h-8 rounded-full bg-gold/10 border border-gold/20 flex items-center justify-center">
+            <span className="text-gold/60 text-xs font-display">✦</span>
+          </div>
+        </div>
+      </Card>
+    </Link>
+  )
+}

package/dist/frameworks/react/examples/events/assets/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/dist/frameworks/react/examples/events/assets/src/lib/conference-ai-hook.js

@@ -0,0 +1,16 @@
+import { fetchServerSentEvents, useChat, createChatClientOptions, } from '@tanstack/ai-react';
+// Default chat options for type inference
+const defaultChatOptions = createChatClientOptions({
+    connection: fetchServerSentEvents('/api/remy-chat'),
+});
+export const useConferenceChat = (speakerSlug, talkSlug) => {
+    const chatOptions = createChatClientOptions({
+        connection: fetchServerSentEvents('/api/remy-chat', {
+            body: {
+                speakerSlug,
+                talkSlug,
+            },
+        }),
+    });
+    return useChat(chatOptions);
+};

package/dist/frameworks/react/examples/events/assets/src/lib/conference-tools.js

@@ -0,0 +1,177 @@
+import { toolDefinition } from '@tanstack/ai';
+import { z } from 'zod';
+import { allSpeakers, allTalks } from 'content-collections';
+// Tool definition for getting a speaker by slug
+export const getSpeakerBySlugToolDef = toolDefinition({
+    name: 'getSpeakerBySlug',
+    description: 'Get the full profile and bio of a specific speaker. Use this when asked about a particular speaker.',
+    inputSchema: z.object({
+        slug: z.string().describe('The slug of the speaker'),
+    }),
+    outputSchema: z.object({
+        name: z.string(),
+        title: z.string(),
+        specialty: z.string(),
+        restaurant: z.string(),
+        location: z.string(),
+        bio: z.string(),
+        awards: z.array(z.string()),
+    }),
+});
+// Server implementation
+export const getSpeakerBySlug = getSpeakerBySlugToolDef.server(({ slug }) => {
+    const speaker = allSpeakers.find((s) => s.slug === slug);
+    if (!speaker) {
+        return {
+            name: 'Speaker not found',
+            title: '',
+            specialty: '',
+            restaurant: '',
+            location: '',
+            bio: 'The requested speaker was not found.',
+            awards: [],
+        };
+    }
+    return {
+        name: speaker.name,
+        title: speaker.title,
+        specialty: speaker.specialty,
+        restaurant: speaker.restaurant,
+        location: speaker.location,
+        bio: speaker.content,
+        awards: speaker.awards || [],
+    };
+});
+// Tool definition for getting a talk by slug
+export const getTalkBySlugToolDef = toolDefinition({
+    name: 'getTalkBySlug',
+    description: 'Get the full details of a specific session/talk. Use this when asked about a particular session.',
+    inputSchema: z.object({
+        slug: z.string().describe('The slug of the talk'),
+    }),
+    outputSchema: z.object({
+        title: z.string(),
+        speaker: z.string(),
+        duration: z.string(),
+        topics: z.array(z.string()),
+        description: z.string(),
+    }),
+});
+// Server implementation
+export const getTalkBySlug = getTalkBySlugToolDef.server(({ slug }) => {
+    const talk = allTalks.find((t) => t.slug === slug);
+    if (!talk) {
+        return {
+            title: 'Session not found',
+            speaker: '',
+            duration: '',
+            topics: [],
+            description: 'The requested session was not found.',
+        };
+    }
+    return {
+        title: talk.title,
+        speaker: talk.speaker,
+        duration: talk.duration,
+        topics: talk.topics,
+        description: talk.content,
+    };
+});
+// Tool definition for listing all speakers
+export const getAllSpeakersToolDef = toolDefinition({
+    name: 'getAllSpeakers',
+    description: 'Get a list of all speakers at the conference with their names, specialties, and restaurants.',
+    inputSchema: z.object({}),
+    outputSchema: z.array(z.object({
+        slug: z.string(),
+        name: z.string(),
+        specialty: z.string(),
+        restaurant: z.string(),
+        location: z.string(),
+    })),
+});
+// Server implementation
+export const getAllSpeakers = getAllSpeakersToolDef.server(() => {
+    return allSpeakers.map((speaker) => ({
+        slug: speaker.slug,
+        name: speaker.name,
+        specialty: speaker.specialty,
+        restaurant: speaker.restaurant,
+        location: speaker.location,
+    }));
+});
+// Tool definition for listing all talks
+export const getAllTalksToolDef = toolDefinition({
+    name: 'getAllTalks',
+    description: 'Get a list of all sessions/talks at the conference with their titles, speakers, and topics.',
+    inputSchema: z.object({}),
+    outputSchema: z.array(z.object({
+        slug: z.string(),
+        title: z.string(),
+        speaker: z.string(),
+        duration: z.string(),
+        topics: z.array(z.string()),
+    })),
+});
+// Server implementation
+export const getAllTalks = getAllTalksToolDef.server(() => {
+    return allTalks.map((talk) => ({
+        slug: talk.slug,
+        title: talk.title,
+        speaker: talk.speaker,
+        duration: talk.duration,
+        topics: talk.topics,
+    }));
+});
+// Tool definition for searching conference content
+export const searchConferenceToolDef = toolDefinition({
+    name: 'searchConference',
+    description: 'Search for speakers or sessions by keyword. Use this to find content matching user queries about topics, techniques, or names.',
+    inputSchema: z.object({
+        query: z.string().describe('The search query'),
+    }),
+    outputSchema: z.object({
+        speakers: z.array(z.object({
+            slug: z.string(),
+            name: z.string(),
+            specialty: z.string(),
+            restaurant: z.string(),
+        })),
+        talks: z.array(z.object({
+            slug: z.string(),
+            title: z.string(),
+            speaker: z.string(),
+            topics: z.array(z.string()),
+        })),
+    }),
+});
+// Server implementation
+export const searchConference = searchConferenceToolDef.server(({ query }) => {
+    const queryLower = query.toLowerCase();
+    const matchingSpeakers = allSpeakers
+        .filter((speaker) => speaker.name.toLowerCase().includes(queryLower) ||
+        speaker.specialty.toLowerCase().includes(queryLower) ||
+        speaker.restaurant.toLowerCase().includes(queryLower) ||
+        speaker.content.toLowerCase().includes(queryLower))
+        .map((speaker) => ({
+        slug: speaker.slug,
+        name: speaker.name,
+        specialty: speaker.specialty,
+        restaurant: speaker.restaurant,
+    }));
+    const matchingTalks = allTalks
+        .filter((talk) => talk.title.toLowerCase().includes(queryLower) ||
+        talk.speaker.toLowerCase().includes(queryLower) ||
+        talk.topics.some((topic) => topic.toLowerCase().includes(queryLower)) ||
+        talk.content.toLowerCase().includes(queryLower))
+        .map((talk) => ({
+        slug: talk.slug,
+        title: talk.title,
+        speaker: talk.speaker,
+        topics: talk.topics,
+    }));
+    return {
+        speakers: matchingSpeakers,
+        talks: matchingTalks,
+    };
+});

package/dist/frameworks/react/examples/events/assets/src/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}