@tanstack/cta-framework-react-cra 0.10.0-alpha.20

package/examples/tanchat/assets/src/demo.index.css

@@ -0,0 +1,220 @@
+@import "tailwindcss";
+@import "highlight.js/styles/github-dark.css";
+
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.7);
+}
+
+/* Smooth transitions for dark mode */
+html {
+  transition: background-color 0.3s ease;
+}
+
+/* Markdown content styles */
+.prose {
+  max-width: none;
+  color: #e5e7eb; /* text-gray-200 */
+}
+
+/* .prose p {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+} */
+
+.prose code {
+  color: #e5e7eb;
+  background-color: rgba(31, 41, 55, 0.5);
+  padding: 0.2em 0.4em;
+  border-radius: 0.375rem;
+  font-size: 0.875em;
+}
+
+.prose pre {
+  background-color: rgba(31, 41, 55, 0.5);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1.25em 0;
+  overflow-x: auto;
+}
+
+.prose pre code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+  color: inherit;
+}
+
+.prose h1, .prose h2, .prose h3, .prose h4 {
+  color: #f9fafb; /* text-gray-50 */
+  /* margin-top: 2em; */
+  /* margin-bottom: 1em; */
+}
+
+.prose ul, .prose ol {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose blockquote {
+  border-left-color: #f97316; /* orange-500 */
+  background-color: rgba(249, 115, 22, 0.1);
+  padding: 1em;
+  margin: 1.25em 0;
+  border-radius: 0.5rem;
+}
+
+.prose hr {
+  border-color: rgba(249, 115, 22, 0.2);
+  margin: 2em 0;
+}
+
+.prose a {
+  color: #f97316; /* orange-500 */
+  text-decoration: underline;
+  text-decoration-thickness: 0.1em;
+  text-underline-offset: 0.2em;
+}
+
+.prose a:hover {
+  color: #fb923c; /* orange-400 */
+}
+
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.25em 0;
+}
+
+.prose th, .prose td {
+  padding: 0.75em;
+  border: 1px solid rgba(249, 115, 22, 0.2);
+}
+
+.prose th {
+  background-color: rgba(249, 115, 22, 0.1);
+  font-weight: 600;
+}
+
+/* Message transition animations */
+.message-enter {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.message-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 300ms, transform 300ms;
+}
+
+.message-exit {
+  opacity: 1;
+}
+
+.message-exit-active {
+  opacity: 0;
+  transition: opacity 300ms;
+}
+
+/* Add/update these styles to match AI formatting capabilities */
+.prose h1 {
+  font-size: 2em;
+  /* margin-top: 1em; */
+  margin-bottom: 0.5em;
+}
+
+.prose h2 {
+  font-size: 1.5em;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+.prose h3 {
+  font-size: 1.25em;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+.prose ul {
+  list-style-type: disc;
+  padding-left: 1.5em;
+}
+
+.prose ol {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+}
+
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+}
+
+.prose th,
+.prose td {
+  border: 1px solid rgba(249, 115, 22, 0.2);
+  padding: 0.5em;
+}
+
+.prose th {
+  background-color: rgba(249, 115, 22, 0.1);
+}
+
+.prose strong {
+  color: #f9fafb; /* text-gray-50 */
+  font-weight: 600;
+}
+
+.prose em {
+  font-style: italic;
+}
+
+.prose blockquote {
+  border-left: 4px solid #f97316; /* orange-500 */
+  padding-left: 1em;
+  margin: 1em 0;
+  color: #d1d5db; /* text-gray-300 */
+}
+
+/* Ensure code blocks match the AI's formatting */
+.prose code {
+  color: #e5e7eb;
+  background-color: rgba(31, 41, 55, 0.5);
+  padding: 0.2em 0.4em;
+  border-radius: 0.375rem;
+  font-size: 0.875em;
+}
+
+.prose pre {
+  background-color: rgba(31, 41, 55, 0.5);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1em 0;
+}
+
+.prose pre code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+}

package/examples/tanchat/assets/src/integrations/tanchat/header-user.tsx

@@ -0,0 +1,5 @@
+import AIAssistant from '../../components/example-AIAssistant'
+
+export default function HeaderAIAssistant() {
+  return <AIAssistant />
+}

package/examples/tanchat/assets/src/routes/api.messages.ts

@@ -0,0 +1,24 @@
+import { createAPIFileRoute } from "@tanstack/react-start/api";
+import { getEvent } from "vinxi/http";
+
+import { transports } from "@/utils/demo.sse";
+
+export const APIRoute = createAPIFileRoute("/api/messages")({
+  // @ts-ignore
+  POST: async ({ request, params }) => {
+    const body = await request.json();
+    const url = new URL(request.url);
+    const sessionId = url.searchParams.get("sessionId") as string;
+    const transport = transports[sessionId];
+    if (transport) {
+      try {
+        getEvent().node.res.statusCode = 200;
+        await transport.handleMessage(body);
+      } catch (error) {
+        getEvent().node.res.send("Error handling message");
+      }
+    } else {
+      getEvent().node.res.send("No transport found for sessionId");
+    }
+  },
+});

package/examples/tanchat/assets/src/routes/api.sse.ts

@@ -0,0 +1,23 @@
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+import { getEvent } from 'vinxi/http'
+import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js'
+
+import { transports, server } from '@/utils/demo.sse'
+
+export const APIRoute = createAPIFileRoute('/api/sse')({
+  // @ts-ignore
+  GET: async ({}) => {
+    const transport = new SSEServerTransport(
+      '/api/messages',
+      getEvent().node.res,
+    )
+    transports[transport.sessionId] = transport
+    transport.onerror = (error) => {
+      console.error(error)
+    }
+    getEvent().node.res.on('close', () => {
+      delete transports[transport.sessionId]
+    })
+    await server.connect(transport)
+  },
+})

package/examples/tanchat/assets/src/routes/example.chat.tsx

@@ -0,0 +1,159 @@
+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/examples/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/examples/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/examples/tanchat/assets/src/store/example-assistant.ts

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

package/examples/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/examples/tanchat/assets/src/utils/demo.sse.ts

@@ -0,0 +1,31 @@
+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/examples/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,
+  }
+}