@tanstack/cta-framework-react-cra 0.44.3 → 0.46.1

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

@@ -0,0 +1,110 @@
+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 {
+  getJobsBySkill,
+  getAllJobs,
+  getAllEducation,
+  searchExperience,
+} from '@/lib/resume-tools'
+
+export const Route = createFileRoute('/api/resume-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 || {}
+
+          const SYSTEM_PROMPT = `You are a helpful resume assistant helping recruiters and hiring managers evaluate if this candidate is a good fit for their job requirements.
+
+CAPABILITIES:
+1. Use getJobsBySkill to find jobs where the candidate used specific technologies or skills
+2. Use getAllJobs to get the candidate's complete work history with all details
+3. Use getAllEducation to get the candidate's educational background
+4. Use searchExperience to search for specific types of roles or experience by keywords
+
+INSTRUCTIONS:
+- When asked about specific technologies or skills, use getJobsBySkill to find relevant experience
+- When asked about overall experience or career progression, use getAllJobs
+- When asked about education or training, use getAllEducation
+- When asked about specific types of roles (e.g., "senior", "lead"), use searchExperience
+- Be professional, concise, and helpful in your responses
+- Provide specific details from the resume when available
+- When calculating years of experience, consider the date ranges provided
+- If the candidate has experience with something, highlight specific roles and time periods
+- If the candidate lacks certain experience, be honest but constructive
+
+CONTEXT: You are helping evaluate this candidate's qualifications for potential job opportunities.`
+
+          // 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'
+          }
+          // 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: [getJobsBySkill, getAllJobs, getAllEducation, searchExperience],
+            systemPrompts: [SYSTEM_PROMPT],
+            agentLoopStrategy: maxIterations(5),
+            messages,
+            abortController,
+          })
+
+          return toServerSentEventsResponse(stream, { abortController })
+        } catch (error: any) {
+          console.error('Resume 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/resume/assets/src/routes/index.tsx

@@ -0,0 +1,220 @@
+import { useState, useMemo } from 'react'
+import { marked } from 'marked'
+
+import { createFileRoute } from '@tanstack/react-router'
+import { allJobs, allEducations } from 'content-collections'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card'
+
+import ResumeAssistant from '@/components/ResumeAssistant'
+
+export const Route = createFileRoute('/')({
+  component: App,
+})
+
+function App() {
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+
+  // Get unique tags from all jobs
+  const allTags = useMemo(() => {
+    const tags = new Set<string>()
+    allJobs.forEach((job) => {
+      job.tags.forEach((tag) => tags.add(tag))
+    })
+    return Array.from(tags).sort()
+  }, [])
+
+  // Filter jobs based on selected tags
+  const filteredJobs = useMemo(() => {
+    if (selectedTags.length === 0) return allJobs
+    return allJobs.filter((job) =>
+      selectedTags.some((tag) => job.tags.includes(tag)),
+    )
+  }, [selectedTags])
+
+  return (
+    <>
+      <ResumeAssistant />
+      <div className="min-h-screen bg-linear-to-b from-gray-50 to-gray-100">
+        <div className="flex">
+          {/* Sidebar with filters */}
+          <div className="w-72 min-h-screen bg-white border-r shadow-sm p-8 sticky top-0">
+            <h3 className="text-lg font-semibold mb-6 text-gray-900">
+              Skills & Technologies
+            </h3>
+            <div className="space-y-4">
+              {allTags.map((tag) => (
+                <div key={tag} className="flex items-center space-x-3 group">
+                  <Checkbox
+                    id={tag}
+                    checked={selectedTags.includes(tag)}
+                    onCheckedChange={(checked) => {
+                      if (checked) {
+                        setSelectedTags([...selectedTags, tag])
+                      } else {
+                        setSelectedTags(selectedTags.filter((t) => t !== tag))
+                      }
+                    }}
+                    className="data-[state=checked]:bg-blue-600"
+                  />
+                  <label
+                    htmlFor={tag}
+                    className="text-sm font-medium leading-none text-gray-700 group-hover:text-gray-900 transition-colors cursor-pointer"
+                  >
+                    {tag}
+                  </label>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Main content */}
+          <div className="flex-1 p-8 lg:p-12">
+            <div className="max-w-4xl mx-auto space-y-12">
+              <div className="text-center space-y-4">
+                <h1 className="text-5xl font-bold bg-linear-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent">
+                  My Resume
+                </h1>
+                <p className="text-gray-600 text-lg">
+                  Professional Experience & Education
+                </p>
+                <Separator className="mt-8" />
+              </div>
+
+              {/* Career Summary */}
+              <Card className="border-0 shadow-lg bg-white/50 backdrop-blur-sm">
+                <CardHeader>
+                  <CardTitle className="text-2xl text-gray-900">
+                    Career Summary
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex items-center gap-8">
+                    <p className="text-gray-700 flex-1 leading-relaxed">
+                      I am a passionate and driven professional seeking
+                      opportunities that will leverage my extensive experience
+                      in frontend development while providing continuous growth
+                      and learning opportunities. My goal is to contribute to
+                      innovative projects that challenge me to expand my skill
+                      set and make meaningful impacts through technology.
+                    </p>
+                    <img
+                      src="/headshot-on-white.jpg"
+                      alt="Professional headshot"
+                      className="w-44 h-52 rounded-2xl object-cover shadow-md transition-transform hover:scale-105"
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Work Experience */}
+              <section className="space-y-6">
+                <h2 className="text-3xl font-semibold text-gray-900">
+                  Work Experience
+                </h2>
+                <div className="space-y-6">
+                  {filteredJobs.map((job) => (
+                    <Card
+                      key={job.jobTitle}
+                      className="border-0 shadow-md hover:shadow-lg transition-shadow"
+                    >
+                      <CardHeader>
+                        <div className="flex justify-between items-start">
+                          <div className="space-y-2">
+                            <CardTitle className="text-xl text-gray-900">
+                              {job.jobTitle}
+                            </CardTitle>
+                            <p className="text-blue-600 font-medium">
+                              {job.company} - {job.location}
+                            </p>
+                          </div>
+                          <Badge variant="secondary" className="text-sm">
+                            {job.startDate} - {job.endDate || 'Present'}
+                          </Badge>
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-gray-700 mb-6 leading-relaxed">
+                          {job.summary}
+                        </p>
+                        <div className="flex flex-wrap gap-2">
+                          {job.tags.map((tag) => (
+                            <HoverCard key={tag}>
+                              <HoverCardTrigger>
+                                <Badge
+                                  variant="outline"
+                                  className="hover:bg-gray-100 transition-colors cursor-pointer"
+                                >
+                                  {tag}
+                                </Badge>
+                              </HoverCardTrigger>
+                              <HoverCardContent className="w-64">
+                                <p className="text-sm text-gray-600">
+                                  Experience with {tag} in professional
+                                  development
+                                </p>
+                              </HoverCardContent>
+                            </HoverCard>
+                          ))}
+                        </div>
+                        {job.content && (
+                          <div
+                            className="mt-6 text-gray-700 prose prose-sm max-w-none"
+                            dangerouslySetInnerHTML={{
+                              __html: marked(job.content),
+                            }}
+                          />
+                        )}
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </section>
+
+              {/* Education */}
+              <section className="space-y-6">
+                <h2 className="text-3xl font-semibold text-gray-900">
+                  Education
+                </h2>
+                <div className="space-y-6">
+                  {allEducations.map((education) => (
+                    <Card
+                      key={education.school}
+                      className="border-0 shadow-md hover:shadow-lg transition-shadow"
+                    >
+                      <CardHeader>
+                        <CardTitle className="text-xl text-gray-900">
+                          {education.school}
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-gray-700 leading-relaxed">
+                          {education.summary}
+                        </p>
+                        {education.content && (
+                          <div
+                            className="mt-6 text-gray-700 prose prose-sm max-w-none"
+                            dangerouslySetInnerHTML={{
+                              __html: marked(education.content),
+                            }}
+                          />
+                        )}
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </section>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/examples/resume/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/resume/info.json

@@ -0,0 +1,30 @@
+{
+  "name": "Resume",
+  "description": "Professional resume template with content-collections and shadcn UI components for Netlify.",
+  "phase": "example",
+  "modes": ["file-router"],
+  "type": "example",
+  "priority": 10,
+  "link": "",
+  "routes": [
+    {
+      "url": "/",
+      "path": "src/routes/index.tsx",
+      "jsName": "ResumeHome"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "header-user",
+      "path": "src/components/ResumeAssistantButton",
+      "jsName": "ResumeAssistantButton"
+    },
+    {
+      "type": "vite-plugin",
+      "import": "import contentCollections from '@content-collections/vite'",
+      "code": "contentCollections()"
+    }
+  ],
+  "dependsOn": [],
+  "variables": []
+}

package/examples/resume/package.json

@@ -0,0 +1,27 @@
+{
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.2.2",
+    "@radix-ui/react-hover-card": "^1.1.10",
+    "@radix-ui/react-separator": "^1.1.4",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@tanstack/ai": "latest",
+    "@tanstack/ai-anthropic": "latest",
+    "@tanstack/ai-client": "latest",
+    "@tanstack/ai-gemini": "latest",
+    "@tanstack/ai-ollama": "latest",
+    "@tanstack/ai-openai": "latest",
+    "@tanstack/ai-react": "latest",
+    "@tanstack/store": "latest",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "marked": "^15.0.8",
+    "streamdown": "^1.6.5",
+    "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"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cta-framework-react-cra",
-  "version": "0.44.3",
+  "version": "0.46.1",
   "description": "CTA Framework for React (Create React App)",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,7 @@
   "author": "Jack Herrington <jherr@pobox.com>",
   "license": "MIT",
   "dependencies": {
-    "@tanstack/cta-engine": "0.44.3"
+    "@tanstack/cta-engine": "0.46.1"
   },
   "devDependencies": {
     "@types/node": "^24.6.0",

package/examples/tanchat/assets/src/lib/model-selection.ts

@@ -1,78 +0,0 @@
-export type Provider = 'openai' | 'anthropic' | 'gemini' | 'ollama'
-
-export interface ModelOption {
-  provider: Provider
-  model: string
-  label: string
-}
-
-export const MODEL_OPTIONS: Array<ModelOption> = [
-  // OpenAI models
-  { provider: 'openai', model: 'gpt-4o', label: 'OpenAI - GPT-4o' },
-  { provider: 'openai', model: 'gpt-4o-mini', label: 'OpenAI - GPT-4o Mini' },
-
-  // Anthropic models
-  {
-    provider: 'anthropic',
-    model: 'claude-haiku-4-5',
-    label: 'Anthropic - Claude Haiku 4.5',
-  },
-  {
-    provider: 'anthropic',
-    model: 'claude-sonnet-4-5-20250929',
-    label: 'Anthropic - Claude Sonnet 4.5',
-  },
-
-  // Gemini models
-  {
-    provider: 'gemini',
-    model: 'gemini-2.0-flash-exp',
-    label: 'Gemini - 2.0 Flash',
-  },
-
-  // Ollama models
-  { provider: 'ollama', model: 'mistral:7b', label: 'Ollama - Mistral 7B' },
-]
-
-const STORAGE_KEY = 'tanstack-ai-model-preference'
-
-export function getStoredModelPreference(): ModelOption | null {
-  if (typeof window === 'undefined') return null
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY)
-    if (stored) {
-      const parsed = JSON.parse(stored)
-      // Validate that the stored option still exists in MODEL_OPTIONS
-      const found = MODEL_OPTIONS.find(
-        (o) => o.provider === parsed.provider && o.model === parsed.model,
-      )
-      if (found) return found
-    }
-  } catch {
-    // Ignore storage errors
-  }
-  return null
-}
-
-export function setStoredModelPreference(option: ModelOption): void {
-  if (typeof window === 'undefined') return
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(option))
-  } catch {
-    // Ignore storage errors
-  }
-}
-
-export function getDefaultModelOption(): ModelOption {
-  return getStoredModelPreference() || MODEL_OPTIONS[0]
-}
-
-export function getModelOptionsForProvider(provider: Provider): ModelOption[] {
-  return MODEL_OPTIONS.filter((o) => o.provider === provider)
-}
-
-export function getAvailableModelOptions(
-  availableProviders: Provider[],
-): ModelOption[] {
-  return MODEL_OPTIONS.filter((o) => availableProviders.includes(o.provider))
-}

package/examples/tanchat/assets/src/lib/vendor-capabilities.ts

@@ -1,55 +0,0 @@
-import type { Provider } from './model-selection'
-
-export interface VendorCapabilities {
-  chat: boolean
-  structured: boolean
-  image: boolean
-  transcription: boolean
-  tts: boolean
-}
-
-export const VENDOR_CAPABILITIES: Record<Provider, VendorCapabilities> = {
-  openai: {
-    chat: true,
-    structured: true,
-    image: true,
-    transcription: true,
-    tts: true,
-  },
-  anthropic: {
-    chat: true,
-    structured: true,
-    image: false,
-    transcription: false,
-    tts: false,
-  },
-  gemini: {
-    chat: true,
-    structured: true,
-    image: false,
-    transcription: false,
-    tts: false,
-  },
-  ollama: {
-    chat: true,
-    structured: true,
-    image: false,
-    transcription: false,
-    tts: false,
-  },
-}
-
-export function hasCapability(
-  provider: Provider,
-  capability: keyof VendorCapabilities,
-): boolean {
-  return VENDOR_CAPABILITIES[provider]?.[capability] ?? false
-}
-
-export function getProvidersWithCapability(
-  capability: keyof VendorCapabilities,
-): Provider[] {
-  return (Object.keys(VENDOR_CAPABILITIES) as Provider[]).filter(
-    (provider) => VENDOR_CAPABILITIES[provider][capability],
-  )
-}