@tanstack/cta-engine 0.14.3 → 0.15.0

package/templates/react/example/tanchat/assets/src/routes/example.chat.tsx

@@ -1,159 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { useEffect, useRef } from 'react'
-import { Send } from 'lucide-react'
-import ReactMarkdown from 'react-markdown'
-import rehypeRaw from 'rehype-raw'
-import rehypeSanitize from 'rehype-sanitize'
-import rehypeHighlight from 'rehype-highlight'
-import remarkGfm from 'remark-gfm'
-import { useChat } from '@ai-sdk/react'
-
-import { genAIResponse } from '../utils/demo.ai'
-
-import type { UIMessage } from 'ai'
-
-import '../demo.index.css'
-
-function InitalLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex-1 flex items-center justify-center px-4">
-      <div className="text-center max-w-3xl mx-auto w-full">
-        <h1 className="text-6xl font-bold mb-4 bg-gradient-to-r from-orange-500 to-red-600 text-transparent bg-clip-text uppercase">
-          <span className="text-white">TanStack</span> Chat
-        </h1>
-        <p className="text-gray-400 mb-6 w-2/3 mx-auto text-lg">
-          You can ask me about anything, I might or might not have a good
-          answer, but you can still ask.
-        </p>
-        {children}
-      </div>
-    </div>
-  )
-}
-
-function ChattingLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="absolute bottom-0 right-0 left-64 bg-gray-900/80 backdrop-blur-sm border-t border-orange-500/10">
-      <div className="max-w-3xl mx-auto w-full px-4 py-3">{children}</div>
-    </div>
-  )
-}
-
-function Messages({ messages }: { messages: Array<UIMessage> }) {
-  const messagesContainerRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (messagesContainerRef.current) {
-      messagesContainerRef.current.scrollTop =
-        messagesContainerRef.current.scrollHeight
-    }
-  }, [messages])
-
-  if (!messages.length) {
-    return null
-  }
-
-  return (
-    <div ref={messagesContainerRef} className="flex-1 overflow-y-auto pb-24">
-      <div className="max-w-3xl mx-auto w-full px-4">
-        {messages.map(({ id, role, content }) => (
-          <div
-            key={id}
-            className={`py-6 ${
-              role === 'assistant'
-                ? 'bg-gradient-to-r from-orange-500/5 to-red-600/5'
-                : 'bg-transparent'
-            }`}
-          >
-            <div className="flex items-start gap-4 max-w-3xl mx-auto w-full">
-              {role === 'assistant' ? (
-                <div className="w-8 h-8 rounded-lg bg-gradient-to-r from-orange-500 to-red-600 mt-2 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
-                  AI
-                </div>
-              ) : (
-                <div className="w-8 h-8 rounded-lg bg-gray-700 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
-                  Y
-                </div>
-              )}
-              <div className="flex-1 min-w-0">
-                <ReactMarkdown
-                  className="prose dark:prose-invert max-w-none"
-                  rehypePlugins={[
-                    rehypeRaw,
-                    rehypeSanitize,
-                    rehypeHighlight,
-                    remarkGfm,
-                  ]}
-                >
-                  {content}
-                </ReactMarkdown>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function ChatPage() {
-  const { messages, input, handleInputChange, handleSubmit } = useChat({
-    initialMessages: [],
-    fetch: (_url, options) => {
-      const { messages } = JSON.parse(options!.body! as string)
-      return genAIResponse({
-        data: {
-          messages,
-        },
-      })
-    },
-  })
-
-  const Layout = messages.length ? ChattingLayout : InitalLayout
-
-  return (
-    <div className="relative flex h-[calc(100vh-32px)] bg-gray-900">
-      <div className="flex-1 flex flex-col">
-        <Messages messages={messages} />
-
-        <Layout>
-          <form onSubmit={handleSubmit}>
-            <div className="relative max-w-xl mx-auto">
-              <textarea
-                value={input}
-                onChange={handleInputChange}
-                placeholder="Type something clever (or don't, we won't judge)..."
-                className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-4 pr-12 py-3 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden shadow-lg"
-                rows={1}
-                style={{ minHeight: '44px', maxHeight: '200px' }}
-                onInput={(e) => {
-                  const target = e.target as HTMLTextAreaElement
-                  target.style.height = 'auto'
-                  target.style.height =
-                    Math.min(target.scrollHeight, 200) + 'px'
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault()
-                    handleSubmit(e)
-                  }
-                }}
-              />
-              <button
-                type="submit"
-                disabled={!input.trim()}
-                className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
-              >
-                <Send className="w-4 h-4" />
-              </button>
-            </div>
-          </form>
-        </Layout>
-      </div>
-    </div>
-  )
-}
-
-export const Route = createFileRoute('/example/chat')({
-  component: ChatPage,
-})

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

@@ -1,50 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

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

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

@@ -1,62 +0,0 @@
-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.sse.ts

@@ -1,31 +0,0 @@
-import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
-import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
-import { getWebRequest } from "vinxi/http";
-
-import guitars from "@/data/example-guitars";
-
-export const server = new McpServer({
-  name: "guitar-server",
-  version: "1.0.0",
-});
-export const transports: { [sessionId: string]: SSEServerTransport } = {};
-
-server.tool("getGuitars", {}, async ({}) => {
-  const port = new URL(getWebRequest().url).port;
-  return {
-    content: [
-      {
-        type: "text",
-        text: JSON.stringify(
-          guitars.map((guitar) => ({
-            id: guitar.id,
-            name: guitar.name,
-            description: guitar.description,
-            price: guitar.price,
-            image: `http://localhost:${port}${guitar.image}`,
-          }))
-        ),
-      },
-    ],
-  };
-});

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

@@ -1,47 +0,0 @@
-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

@@ -1,19 +0,0 @@
-{
-  "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

@@ -1,16 +0,0 @@
-{
-  "dependencies": {
-    "@ai-sdk/anthropic": "^1.1.17",
-    "@ai-sdk/react": "^1.1.23",
-    "@modelcontextprotocol/sdk": "^1.8.0",
-    "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

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

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

@@ -1,55 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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>
-  )
-}
-<% } %>