@tanstack/create 0.49.1

package/dist/frameworks/react/add-ons/form/assets/src/routes/demo/form.address.tsx.ejs

@@ -0,0 +1,213 @@
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
+
+import { useAppForm } from '@/hooks/demo.form'
+
+<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/form')({
+  component: AddressForm,
+})
+<% } %>
+
+function AddressForm() {
+  const form = useAppForm({
+    defaultValues: {
+      fullName: '',
+      email: '',
+      address: {
+        street: '',
+        city: '',
+        state: '',
+        zipCode: '',
+        country: '',
+      },
+      phone: '',
+    },
+    validators: {
+      onBlur: ({ value }) => {
+        const errors = {
+          fields: {},
+        } as {
+          fields: Record<string, string>
+        }
+        if (value.fullName.trim().length === 0) {
+          errors.fields.fullName = 'Full name is required'
+        }
+        return errors
+      },
+    },
+    onSubmit: ({ value }) => {
+      console.log(value)
+      // Show success message
+      alert('Form submitted successfully!')
+    },
+  })
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
+      style={{
+        backgroundImage:
+          'radial-gradient(50% 50% at 5% 40%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            form.handleSubmit()
+          }}
+          className="space-y-6"
+        >
+          <form.AppField name="fullName">
+            {(field) => <field.TextField label="Full Name" />}
+          </form.AppField>
+
+          <form.AppField
+            name="email"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Email is required'
+                }
+                if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value)) {
+                  return 'Invalid email address'
+                }
+                return undefined
+              },
+            }}
+          >
+            {(field) => <field.TextField label="Email" />}
+          </form.AppField>
+
+          <form.AppField
+            name="address.street"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Street address is required'
+                }
+                return undefined
+              },
+            }}
+          >
+            {(field) => <field.TextField label="Street Address" />}
+          </form.AppField>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <form.AppField
+              name="address.city"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'City is required'
+                  }
+                  return undefined
+                },
+              }}
+            >
+              {(field) => <field.TextField label="City" />}
+            </form.AppField>
+            <form.AppField
+              name="address.state"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'State is required'
+                  }
+                  return undefined
+                },
+              }}
+            >
+              {(field) => <field.TextField label="State" />}
+            </form.AppField>
+            <form.AppField
+              name="address.zipCode"
+              validators={{
+                onBlur: ({ value }) => {
+                  if (!value || value.trim().length === 0) {
+                    return 'Zip code is required'
+                  }
+                  if (!/^\d{5}(-\d{4})?$/.test(value)) {
+                    return 'Invalid zip code format'
+                  }
+                  return undefined
+                },
+              }}
+            >
+              {(field) => <field.TextField label="Zip Code" />}
+            </form.AppField>
+          </div>
+
+          <form.AppField
+            name="address.country"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Country is required'
+                }
+                return undefined
+              },
+            }}
+          >
+            {(field) => (
+              <field.Select
+                label="Country"
+                values={[
+                  { label: 'United States', value: 'US' },
+                  { label: 'Canada', value: 'CA' },
+                  { label: 'United Kingdom', value: 'UK' },
+                  { label: 'Australia', value: 'AU' },
+                  { label: 'Germany', value: 'DE' },
+                  { label: 'France', value: 'FR' },
+                  { label: 'Japan', value: 'JP' },
+                ]}
+                placeholder="Select a country"
+              />
+            )}
+        </form.AppField>
+
+          <form.AppField
+            name="phone"
+            validators={{
+              onBlur: ({ value }) => {
+                if (!value || value.trim().length === 0) {
+                  return 'Phone number is required'
+                }
+                if (
+                  !/^(\+\d{1,3})?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/.test(
+                    value,
+                  )
+                ) {
+                  return 'Invalid phone number format'
+                }
+                return undefined
+              },
+            }}
+          >
+            {(field) => (
+              <field.TextField label="Phone" placeholder="123-456-7890" />
+            )}
+          </form.AppField>
+
+          <div className="flex justify-end">
+            <form.AppForm>
+              <form.SubscribeButton label="Submit" />
+            </form.AppForm>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/form/address',
+  component: AddressForm,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

package/dist/frameworks/react/add-ons/form/assets/src/routes/demo/form.simple.tsx.ejs

@@ -0,0 +1,77 @@
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
+import { z } from 'zod'
+
+import { useAppForm } from '@/hooks/demo.form'
+
+<% if (codeRouter) { %>
+  import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/form')({
+  component: SimpleForm,
+})
+<% } %>
+
+const schema = z.object({
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().min(1, 'Description is required'),
+})
+
+function SimpleForm() {
+  const form = useAppForm({
+    defaultValues: {
+      title: '',
+      description: '',
+    },
+    validators: {
+      onBlur: schema,
+    },
+    onSubmit: ({ value }) => {
+      console.log(value)
+      // Show success message
+      alert('Form submitted successfully!')
+    },
+  })
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
+      style={{
+        backgroundImage:
+          'radial-gradient(50% 50% at 5% 40%, #add8e6 0%, #0000ff 70%, #00008b 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            form.handleSubmit()
+          }}
+          className="space-y-6"
+        >
+          <form.AppField name="title">
+            {(field) => <field.TextField label="Title" />}
+          </form.AppField>
+
+          <form.AppField name="description">
+            {(field) => <field.TextArea label="Description" />}
+          </form.AppField>
+
+          <div className="flex justify-end">
+            <form.AppForm>
+              <form.SubscribeButton label="Submit" />
+            </form.AppForm>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/form/simple',
+  component: SimpleForm,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

package/dist/frameworks/react/add-ons/form/info.json

@@ -0,0 +1,36 @@
+{
+  "name": "Form",
+  "description": "TanStack Form",
+  "phase": "add-on",
+  "type": "add-on",
+  "category": "tanstack",
+  "color": "#EAB308",
+  "priority": 44,
+  "modes": ["file-router", "code-router"],
+  "link": "https://tanstack.com/form/latest",
+  "routes": [
+    {
+      "icon": "ClipboardType",
+      "url": "/demo/form/simple",
+      "name": "Simple Form",
+      "path": "src/routes/demo.form.simple.tsx",
+      "jsName": "FormSimpleDemo"
+    },
+    {
+      "icon": "ClipboardType",
+      "url": "/demo/form/address",
+      "name": "Address Form",
+      "path": "src/routes/demo.form.address.tsx",
+      "jsName": "FormAddressDemo"
+    }
+  ],
+  "shadcnComponents": [
+    "button",
+    "select",
+    "input",
+    "textarea",
+    "slider",
+    "switch",
+    "label"
+  ]
+}

package/dist/frameworks/react/add-ons/form/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@tanstack/react-form": "^1.0.0",
+    "zod": "^4.1.11"
+  }
+}

package/dist/frameworks/react/add-ons/form/small-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 633 633"><defs><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="71.65%"><stop offset="0%" stop-color="#6BDAFF"/><stop offset="31.922%" stop-color="#F9FFB5"/><stop offset="70.627%" stop-color="#FFA770"/><stop offset="100%" stop-color="#FF7373"/></linearGradient><linearGradient id="d" x1="43.996%" x2="53.441%" y1="8.54%" y2="93.872%"><stop offset="0%" stop-color="#673800"/><stop offset="100%" stop-color="#B65E00"/></linearGradient><linearGradient id="e" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="f" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="g" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="h" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="i" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="j" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="k" x1="92.9%" x2="8.641%" y1="45.768%" y2="54.892%"><stop offset="0%" stop-color="#EE2700"/><stop offset="100%" stop-color="#FF008E"/></linearGradient><linearGradient id="l" x1="61.109%" x2="43.717%" y1="3.633%" y2="43.072%"><stop offset="0%" stop-color="#FFF400"/><stop offset="100%" stop-color="#3C8700"/></linearGradient><linearGradient id="m" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFDF00"/><stop offset="100%" stop-color="#FF9D00"/></linearGradient><linearGradient id="n" x1="127.279%" x2="0%" y1="49.778%" y2="50.222%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="o" x1="127.279%" x2="0%" y1="47.531%" y2="52.469%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="p" x1="127.279%" x2="0%" y1="46.195%" y2="53.805%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="q" x1="127.279%" x2="0%" y1="35.33%" y2="64.67%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="r" x1="127.279%" x2="0%" y1="4.875%" y2="95.125%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="s" x1="78.334%" x2="31.668%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="t" x1="57.913%" x2="44.88%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="u" x1="50.495%" x2="49.68%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><circle id="a" cx="308.5" cy="308.5" r="308.5"/><circle id="v" cx="307.5" cy="308.5" r="316.5"/></defs><g fill="none" fill-rule="evenodd" transform="translate(9 8)"><mask id="c" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a" fill="url(#b)"/><ellipse cx="81.5" cy="602.5" fill="#015064" stroke="#00CFE2" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="602.5" fill="#015064" stroke="#00CFE2" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="81.5" cy="640.5" fill="#015064" stroke="#00A8B8" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="640.5" fill="#015064" stroke="#00A8B8" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="81.5" cy="676.5" fill="#015064" stroke="#007782" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="676.5" fill="#015064" stroke="#007782" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><g mask="url(#c)"><path fill="url(#d)" stroke="#6E3A00" stroke-width="6.088" d="M98.318 88.007c7.691 37.104 16.643 72.442 26.856 106.013 10.212 33.571 25.57 68.934 46.07 106.088l-51.903 11.67c-10.057-60.01-17.232-99.172-21.525-117.487-4.293-18.315-10.989-51.434-20.089-99.357l20.591-6.927" transform="scale(-1 1) rotate(25 -300.37 -553.013)"/><g stroke="#2F8A00"><path fill="url(#e)" stroke-width="9.343" d="M108.544 66.538s-13.54-21.305-37.417-27.785c-15.917-4.321-33.933.31-54.048 13.892C33.464 65.975 47.24 73.52 58.405 75.28c16.749 2.64 50.14-8.74 50.14-8.74Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#f)" stroke-width="9.343" d="M108.544 67.138s-47.187-5.997-81.077 19.936C4.873 104.362-3.782 137.794 1.502 187.369c28.42-29.22 48.758-50.836 61.016-64.846 18.387-21.016 46.026-55.385 46.026-55.385Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#g)" stroke-width="9.343" d="M108.544 66.538c-1.96-21.705 3.98-38.018 17.82-48.94C140.203 6.674 154.85.808 170.303 0c-4.865 21.527-12.373 36.314-22.524 44.361-10.151 8.048-23.23 15.44-39.236 22.177Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#h)" stroke-width="9.343" d="M108.544 67.138c29.838-31.486 61.061-42.776 93.669-33.869C234.82 42.176 253.749 60.785 259 89.096c-34.898-3.657-59.974-6.343-75.228-8.058-15.254-1.716-40.33-6.349-75.228-13.9Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#i)" stroke-width="9.343" d="M108.544 67.138c34.868-9.381 64.503-3.658 88.905 17.17 24.402 20.829 39.656 46.686 45.762 77.571-39.626-7.574-68.4-20.115-86.322-37.624a395.051 395.051 0 0 1-48.345-57.117Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#j)" stroke-width="9.343" d="M108.544 67.138C76.206 82.6 57.608 105.366 52.75 135.436c-4.858 30.07-.292 62.89 13.698 98.462 24.873-41.418 38.905-71.368 42.096-89.849 3.191-18.48 3.191-44.118 0-76.91Z" transform="rotate(1 -6061.691 5926.397)"/><path stroke-linecap="round" stroke-width="5.91" d="M211.284 173.477c-13.851 21.992-23.291 42.022-28.32 60.093-5.03 18.071-8.175 33.143-9.436 45.216"/><path stroke-linecap="round" stroke-width="5.91" d="M209.814 176.884c-23.982 2.565-42.792 10.469-56.428 23.714-13.639 13.245-23.483 26.136-29.536 38.674M219.045 167.299c29.028-7.723 50.972-10.173 65.831-7.352 14.859 2.822 26.807 7.659 35.842 14.51M211.31 172.618c20.29 9.106 38.353 19.052 54.186 29.837 15.833 10.786 27.714 20.99 35.643 30.617"/></g><path stroke="#830305" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="6.937" d="m409.379 398.157-23.176 18.556M328.04 375.516l-22.313 28.398M312.904 353.698l53.18 59.816"/><path fill="url(#k)" d="M67.585 27.463H5.68C1.893 28.148 0 30.38 0 34.16c0 3.78 1.893 6.211 5.68 7.293h67.17l41.751-30.356c2.488-2.646 2.794-5.315.92-8.006s-4.6-3.626-8.177-2.803l-39.76 27.174Z" transform="scale(-1 1) rotate(-9 2092.128 2856.854)"/><path fill="#D8D8D8" stroke="#FFF" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="4.414" d="m402.861 391.51.471-4.088M382.21 388.752l.472-4.087M361.546 385.404l.485-3.845M337.59 371.883l2.56-2.498M324.276 359.567l2.56-2.497"/></g><ellipse cx="308.5" cy="720.5" fill="url(#l)" mask="url(#c)" rx="266" ry="316.5"/><ellipse cx="308.5" cy="720.5" stroke="#6DA300" stroke-opacity=".502" stroke-width="26" mask="url(#c)" rx="253" ry="303.5"/><g mask="url(#c)"><g transform="translate(389 -32)"><circle cx="168.5" cy="113.5" r="113.5" fill="url(#m)"/><circle cx="168.5" cy="113.5" r="106" stroke="#FFC900" stroke-opacity=".529" stroke-width="15"/><path stroke="url(#n)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M30 113H0"/><path stroke="url(#o)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M33.5 79.5 7 74"/><path stroke="url(#p)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m34 146-29 8"/><path stroke="url(#q)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m45 177-24 13"/><path stroke="url(#r)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m67 204-20 19"/><path stroke="url(#s)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m94.373 227-13.834 22.847"/><path stroke="url(#t)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M127.5 243.5 120 268"/><path stroke="url(#u)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m167.5 252.5.5 24.5"/></g></g><circle cx="307.5" cy="308.5" r="304" stroke="#000" stroke-width="25"/></g></svg>

package/dist/frameworks/react/add-ons/mcp/assets/_dot_gitignore.append

@@ -0,0 +1 @@
+mcp-todos.json

package/dist/frameworks/react/add-ons/mcp/assets/src/mcp-todos.js

@@ -0,0 +1,40 @@
+import fs from 'node:fs';
+const todosPath = './mcp-todos.json';
+// In-memory todos storage
+const todos = fs.existsSync(todosPath)
+    ? JSON.parse(fs.readFileSync(todosPath, 'utf8'))
+    : [
+        {
+            id: 1,
+            title: 'Buy groceries',
+        },
+    ];
+// Subscription callbacks per userID
+let subscribers = [];
+// Get the todos for a user
+export function getTodos() {
+    return todos;
+}
+// Add an item to the todos
+export function addTodo(title) {
+    todos.push({ id: todos.length + 1, title });
+    fs.writeFileSync(todosPath, JSON.stringify(todos, null, 2));
+    notifySubscribers();
+}
+// Subscribe to cart changes for a user
+export function subscribeToTodos(callback) {
+    subscribers.push(callback);
+    callback(todos);
+    return () => {
+        subscribers = subscribers.filter((cb) => cb !== callback);
+    };
+}
+// Notify all subscribers of a user's cart
+function notifySubscribers() {
+    for (const cb of subscribers) {
+        try {
+            cb(todos);
+        }
+        catch { }
+    }
+}

package/dist/frameworks/react/add-ons/mcp/assets/src/routes/demo/api.mcp-todos.js

@@ -0,0 +1,36 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { addTodo, getTodos, subscribeToTodos } from '@/mcp-todos';
+export const Route = createFileRoute('/api/mcp-todos')({
+    server: {
+        handlers: {
+            GET: () => {
+                const stream = new ReadableStream({
+                    start(controller) {
+                        function ping() {
+                            try {
+                                controller.enqueue(`event: ping\n\n`);
+                                setTimeout(ping, 1000);
+                            }
+                            catch { }
+                        }
+                        ping();
+                        const unsubscribe = subscribeToTodos((todos) => {
+                            controller.enqueue(`data: ${JSON.stringify(todos)}\n\n`);
+                        });
+                        const todos = getTodos();
+                        controller.enqueue(`data: ${JSON.stringify(todos)}\n\n`);
+                        return () => unsubscribe();
+                    },
+                });
+                return new Response(stream, {
+                    headers: { 'Content-Type': 'text/event-stream' },
+                });
+            },
+            POST: async ({ request }) => {
+                const { title } = await request.json();
+                addTodo(title);
+                return Response.json(getTodos());
+            },
+        },
+    },
+});

package/dist/frameworks/react/add-ons/mcp/assets/src/routes/demo/mcp-todos.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useState, useEffect } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+
+type Todo = {
+  id: number
+  title: string
+}
+
+export const Route = createFileRoute('/demo/mcp-todos')({
+  component: ORPCTodos,
+})
+
+function ORPCTodos() {
+  const [todos, setTodos] = useState<Todo[]>([])
+
+  useEffect(() => {
+    const eventSource = new EventSource('/demo/api/mcp-todos')
+    eventSource.onmessage = (event) => {
+      setTodos(JSON.parse(event.data))
+    }
+    return () => eventSource.close()
+  }, [])
+
+  const [todo, setTodo] = useState('')
+
+  const submitTodo = useCallback(async () => {
+    await fetch('/demo/api/mcp-todos', {
+      method: 'POST',
+      body: JSON.stringify({ title: todo }),
+    })
+    setTodo('')
+  }, [todo])
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-teal-200 to-emerald-900 p-4 text-white"
+      style={{
+        backgroundImage:
+          'radial-gradient(70% 70% at 20% 20%, #07A798 0%, #045C4B 60%, #01251F 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <h1 className="text-2xl mb-4">MCP Todos list</h1>
+        <ul className="mb-4 space-y-2">
+          {todos?.map((t) => (
+            <li
+              key={t.id}
+              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
+            >
+              <span className="text-lg text-white">{t.title}</span>
+            </li>
+          ))}
+        </ul>
+        <div className="flex flex-col gap-2">
+          <input
+            type="text"
+            value={todo}
+            onChange={(e) => setTodo(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                submitTodo()
+              }
+            }}
+            placeholder="Enter a new todo..."
+            className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
+          />
+          <button
+            disabled={todo.trim().length === 0}
+            onClick={submitTodo}
+            className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
+          >
+            Add todo
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/frameworks/react/add-ons/mcp/assets/src/routes/mcp.js

@@ -0,0 +1,43 @@
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { createFileRoute } from '@tanstack/react-router';
+import z from 'zod';
+import { handleMcpRequest } from '@/utils/mcp-handler';
+import { addTodo } from '@/mcp-todos';
+const server = new McpServer({
+    name: 'start-server',
+    version: '1.0.0',
+});
+server.registerTool('addTodo', {
+    title: 'Tool to add a todo to a list of todos',
+    description: 'Add a todo to a list of todos',
+    inputSchema: {
+        title: z.string().describe('The title of the todo'),
+    },
+}, ({ title }) => ({
+    content: [{ type: 'text', text: String(addTodo(title)) }],
+}));
+// server.registerResource(
+//   "counter-value",
+//   "count://",
+//   {
+//     title: "Counter Resource",
+//     description: "Returns the current value of the counter",
+//   },
+//   async (uri) => {
+//     return {
+//       contents: [
+//         {
+//           uri: uri.href,
+//           text: `The counter is at 20!`,
+//         },
+//       ],
+//     };
+//   }
+// );
+export const Route = createFileRoute('/mcp')({
+    server: {
+        handlers: {
+            POST: async ({ request }) => handleMcpRequest(request, server),
+        },
+    },
+});

package/dist/frameworks/react/add-ons/mcp/assets/src/utils/mcp-handler.js

@@ -0,0 +1,41 @@
+import { InMemoryTransport } from '@modelcontextprotocol/sdk/inMemory.js';
+export async function handleMcpRequest(request, server) {
+    try {
+        const jsonRpcRequest = (await request.json());
+        const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair();
+        let responseData = null;
+        clientTransport.onmessage = (message) => {
+            responseData = message;
+        };
+        await server.connect(serverTransport);
+        await clientTransport.start();
+        await serverTransport.start();
+        await clientTransport.send(jsonRpcRequest);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        await clientTransport.close();
+        await serverTransport.close();
+        return Response.json(responseData, {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+    }
+    catch (error) {
+        console.error('MCP handler error:', error);
+        // Return a JSON-RPC error response
+        return Response.json({
+            jsonrpc: '2.0',
+            error: {
+                code: -32603,
+                message: 'Internal server error',
+                data: error instanceof Error ? error.message : String(error),
+            },
+            id: null,
+        }, {
+            status: 500,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+    }
+}

package/dist/frameworks/react/add-ons/mcp/info.json

@@ -0,0 +1,22 @@
+{
+  "name": "MCP",
+  "phase": "setup",
+  "description": "Add Model Context Protocol (MCP) support.",
+  "link": "https://mcp.dev",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "category": "api",
+  "color": "#10B981",
+  "priority": 42,
+  "warning": "MCP is still in development and may change significantly or not be compatible with other add-ons.\nThe MCP implementation does not support authentication.",
+  "routes": [
+    {
+      "icon": "Webhook",
+      "url": "/demo/mcp-todos",
+      "name": "MCP",
+      "path": "src/routes/demo.mcp-todos.tsx",
+      "jsName": "MCPTodosDemo"
+    }
+  ],
+  "dependsOn": ["start"]
+}

package/dist/frameworks/react/add-ons/mcp/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.17.0",
+    "zod": "4.2.1"
+  }
+}

package/dist/frameworks/react/add-ons/mcp/small-logo.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ModelContextProtocol</title><path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path><path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path></svg>

package/dist/frameworks/react/add-ons/module-federation/assets/module-federation.config.js.ejs

@@ -0,0 +1,31 @@
+import packageJSON from './package.json'
+
+function remoteConfig(name, url) {
+  return {
+    type: 'module',
+    name,
+    entry: url,
+    entryGlobalName: 'remote',
+    shareScope: 'default',
+  }
+}
+
+export default {
+  filename: 'remoteEntry.js',
+  name: '<%= projectName %>',
+  exposes: {
+    './DemoMfComponent': './src/demo-mf-component.tsx',
+    './DemoMfSelfContained': './src/demo-mf-self-contained.tsx',
+  },
+  remotes: {},
+  shared: {
+    react: {
+      singleton: true,
+      requiredVersion: packageJSON.dependencies.react,
+    },
+    'react-dom': {
+      singleton: true,
+      requiredVersion: packageJSON.dependencies['react-dom'],
+    },
+  },
+}