@tanstack/cta-engine 0.10.0-alpha.6

package/templates/react/example/tanchat/assets/src/routes/example.guitars/$guitarId.tsx

@@ -0,0 +1,50 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import guitars from '../../data/example-guitars'
+
+export const Route = createFileRoute('/example/guitars/$guitarId')({
+  component: RouteComponent,
+  loader: async ({ params }) => {
+    const guitar = guitars.find((guitar) => guitar.id === +params.guitarId)
+    if (!guitar) {
+      throw new Error('Guitar not found')
+    }
+    return guitar
+  },
+})
+
+function RouteComponent() {
+  const guitar = Route.useLoaderData()
+
+  return (
+    <div className="relative min-h-[100vh] flex items-center bg-black text-white p-5">
+      <div className="relative z-10 w-[60%] bg-gray-900/60 backdrop-blur-md rounded-2xl p-8 border border-gray-800/50 shadow-xl">
+        <Link
+          to="/example/guitars"
+          className="inline-block mb-4 text-emerald-400 hover:text-emerald-300"
+        >
+          &larr; Back to all guitars
+        </Link>
+        <h1 className="text-3xl font-bold mb-4">{guitar.name}</h1>
+        <p className="text-gray-300 mb-6">{guitar.description}</p>
+        <div className="flex items-center justify-between">
+          <div className="text-2xl font-bold text-emerald-400">
+            ${guitar.price}
+          </div>
+          <button className="bg-emerald-600 hover:bg-emerald-500 text-white px-6 py-2 rounded-lg transition-colors">
+            Add to Cart
+          </button>
+        </div>
+      </div>
+
+      <div className="absolute top-0 right-0 w-[55%] h-full z-0">
+        <div className="w-full h-full overflow-hidden rounded-2xl border-4 border-gray-800 shadow-2xl">
+          <img
+            src={guitar.image}
+            alt={guitar.name}
+            className="w-full h-full object-cover guitar-image"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/react/example/tanchat/assets/src/routes/example.guitars/index.tsx

@@ -0,0 +1,54 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import guitars from '../../data/example-guitars'
+
+export const Route = createFileRoute('/example/guitars/')({
+  component: GuitarsIndex,
+})
+
+function GuitarsIndex() {
+  return (
+    <div className="bg-black text-white p-5">
+      <h1 className="text-3xl font-bold mb-8 text-center">Featured Guitars</h1>
+      <div className="flex flex-wrap gap-12 justify-center">
+        {guitars.map((guitar) => (
+          <div
+            key={guitar.id}
+            className="w-full md:w-[calc(50%-1.5rem)] xl:w-[calc(33.333%-2rem)] relative mb-24"
+          >
+            <Link
+              to="/example/guitars/$guitarId"
+              params={{
+                guitarId: guitar.id.toString(),
+              }}
+            >
+              <div className="relative z-0 w-full aspect-square mb-8">
+                <div className="w-full h-full overflow-hidden rounded-2xl border-4 border-gray-800 shadow-2xl">
+                  <img
+                    src={guitar.image}
+                    alt={guitar.name}
+                    className="w-full h-full object-cover guitar-image group-hover:scale-105 transition-transform duration-500"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                </div>
+
+                <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-emerald-500/80 text-white px-4 py-2 rounded-full text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 backdrop-blur-sm">
+                  View Details
+                </div>
+              </div>
+
+              <div className="absolute bottom-0 right-0 z-10 w-[80%] bg-gray-900/60 backdrop-blur-md rounded-2xl p-5 border border-gray-800/50 shadow-xl transform translate-y-[40%]">
+                <h2 className="text-xl font-bold mb-2">{guitar.name}</h2>
+                <p className="text-gray-300 mb-3 line-clamp-2">
+                  {guitar.shortDescription}
+                </p>
+                <div className="text-xl font-bold text-emerald-400">
+                  ${guitar.price}
+                </div>
+              </div>
+            </Link>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/templates/react/example/tanchat/assets/src/store/example-assistant.ts

@@ -0,0 +1,3 @@
+import { Store } from '@tanstack/store'
+
+export const showAIAssistant = new Store(false)

package/templates/react/example/tanchat/assets/src/utils/demo.ai.ts

@@ -0,0 +1,62 @@
+import { createServerFn } from '@tanstack/react-start'
+import { anthropic } from '@ai-sdk/anthropic'
+import { streamText } from 'ai'
+
+import getTools from './demo.tools'
+
+export interface Message {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+}
+
+const SYSTEM_PROMPT = `You are a helpful assistant for a store that sells guitars.
+
+You can use the following tools to help the user:
+
+- getGuitars: Get all guitars from the database
+- recommendGuitar: Recommend a guitar to the user
+`
+
+export const genAIResponse = createServerFn({ method: 'POST', response: 'raw' })
+  .validator(
+    (d: {
+      messages: Array<Message>
+      systemPrompt?: { value: string; enabled: boolean }
+    }) => d,
+  )
+  .handler(async ({ data }) => {
+    const messages = data.messages
+      .filter(
+        (msg) =>
+          msg.content.trim() !== '' &&
+          !msg.content.startsWith('Sorry, I encountered an error'),
+      )
+      .map((msg) => ({
+        role: msg.role,
+        content: msg.content.trim(),
+      }))
+
+    const tools = await getTools()
+
+    try {
+      const result = streamText({
+        model: anthropic('claude-3-5-sonnet-latest'),
+        messages,
+        system: SYSTEM_PROMPT,
+        maxSteps: 10,
+        tools,
+      })
+
+      return result.toDataStreamResponse()
+    } catch (error) {
+      console.error('Error in genAIResponse:', error)
+      if (error instanceof Error && error.message.includes('rate limit')) {
+        return { error: 'Rate limit exceeded. Please try again in a moment.' }
+      }
+      return {
+        error:
+          error instanceof Error ? error.message : 'Failed to get AI response',
+      }
+    }
+  })

package/templates/react/example/tanchat/assets/src/utils/demo.tools.ts

@@ -0,0 +1,47 @@
+import { experimental_createMCPClient, tool } from 'ai'
+//import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
+import { z } from 'zod'
+import guitars from '../data/example-guitars'
+
+// Example of using an SSE MCP server
+// const mcpClient = await experimental_createMCPClient({
+//   transport: {
+//     type: "sse",
+//     url: "http://localhost:8081/sse",
+//   },
+//   name: "Demo Service",
+// });
+
+// Example of using an STDIO MCP server
+// const mcpClient = await experimental_createMCPClient({
+//   transport: new StdioClientTransport({
+//     command: "node",
+//     args: [
+//       "stdio-server.js",
+//     ],
+//   }),
+// });
+
+const getGuitars = tool({
+  description: 'Get all products from the database',
+  parameters: z.object({}),
+  execute: async () => {
+    return Promise.resolve(guitars)
+  },
+})
+
+const recommendGuitar = tool({
+  description: 'Use this tool to recommend a guitar to the user',
+  parameters: z.object({
+    id: z.string().describe('The id of the guitar to recommend'),
+  }),
+})
+
+export default async function getTools() {
+  // const mcpTools = await mcpCient.tools()
+  return {
+    // ...mcpTools,
+    getGuitars,
+    recommendGuitar,
+  }
+}

package/templates/react/example/tanchat/info.json

@@ -0,0 +1,19 @@
+{
+  "name": "TanStack Chat",
+  "description": "A chat example that uses TanStack Start and TanStack Store. Features chat with Anthropic Sonnet, chat history and custom prompts.",
+  "phase": "example",
+  "templates": ["file-router"],
+  "link": "",
+  "routes": [
+    {
+      "url": "/example/chat",
+      "name": "Chat"
+    },
+    {
+      "url": "/example/guitars",
+      "name": "Guitar Demo"
+    }
+  ],
+  "dependsOn": ["start", "store"],
+  "variables": []
+}

package/templates/react/example/tanchat/package.json

@@ -0,0 +1,15 @@
+{
+  "dependencies": {
+    "@ai-sdk/anthropic": "^1.1.17",
+    "@ai-sdk/react": "^1.1.23",
+    "ai": "^4.1.65",
+    "highlight.js": "^11.11.1",
+    "react-markdown": "^9.0.1",
+    "rehype-highlight": "^7.0.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
+    "lucide-react": "^0.475.0",
+    "zod": "^3.24.2"
+  }
+}

package/templates/react/file-router/package.fr.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@tanstack/router-plugin": "^1.114.3"
+  }
+}

package/templates/react/file-router/src/main.tsx.ejs

@@ -0,0 +1,55 @@
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+<% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+import * as <%= integration.name %> from "./<%= integration.path %>";
+<% } %>
+
+// Import the generated route tree
+import { routeTree } from "./routeTree.gen";
+
+import "./styles.css";
+import reportWebVitals from "./reportWebVitals.<%= js %>";
+
+// Create a new router instance
+const router = createRouter({
+  routeTree,
+  context: {
+    <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+      ...<%= integration.name %>.getContext(),
+    <% } %>
+  },
+  defaultPreload: "intent",
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+});
+
+// Register the router instance for type safety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById("app");
+if (rootElement && !rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+        <<%= integration.name %>.Provider>
+      <% } %>
+          <RouterProvider router={router} />
+      <% for(const integration of integrations.filter(i => i.type === 'root-provider').reverse()) { %>
+        </<%= integration.name %>.Provider>
+      <% } %>
+    </StrictMode>
+  );
+}
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/templates/react/file-router/src/routes/__root.tsx.ejs

@@ -0,0 +1,82 @@
+import { Outlet<% if (addOnEnabled.start) { %>
+, HeadContent, Scripts<% } %>, <% if (addOnEnabled["tanstack-query"]) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+<% if (addOns.length) { %>
+import Header from '../components/Header'
+<% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
+import <%= integration.name %> from "../<%= integration.path %>";
+<% } %>
+<% if (addOnEnabled.start) { %>
+import appCss from '../styles.css?url'
+<% } %><% if (addOnEnabled["tanstack-query"]) { %>
+import type { QueryClient } from '@tanstack/react-query'
+<% if (addOnEnabled.tRPC) { %>
+import type { TRPCRouter } from '@/integrations/trpc/router'
+import type { TRPCOptionsProxy } from '@trpc/tanstack-react-query'
+<% } %>
+
+interface MyRouterContext {
+  queryClient: QueryClient
+  <% if (addOnEnabled.tRPC) { %>
+  trpc: TRPCOptionsProxy<TRPCRouter>
+  <% } %>
+}<% } %>
+  
+export const Route = <% if (addOnEnabled["tanstack-query"]) { %>createRootRouteWithContext<MyRouterContext>()<% } else { %>createRootRoute<% } %>({
+<% if (addOnEnabled.start) { %>
+    head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'TanStack Start Starter',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+<% } %>
+  component: () => (
+<% if (addOnEnabled.start) { %><RootDocument><% } else { %><><% } %>
+  <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
+    <<%= integration.name %>>
+  <% } %>
+  <% if (addOns.length) { %>
+    <Header />  
+  <% } %>
+      <Outlet />
+      <TanStackRouterDevtools />
+      <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
+        <<%= integration.name %> />
+      <% } %>
+    <% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %>
+      </<%= integration.name %>>
+    <% } %>
+<% if (addOnEnabled.start) { %></RootDocument><% } else { %></><% } %>
+  ),
+})
+
+<% if (addOnEnabled.start) { %>
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+<% } %>