Consolidates all mcp tools to take frameworks as arguments (#116)

This PR makes the MCP tools work across frameworks, reducing the number
of tools an agent needs to create Tanstack applications. This is
important because Agents work better with 5-6 tools. (Two for every JS
framework isn't ideal!)

![image](https://github.com/user-attachments/assets/9950a47c-d388-4c16-8524-3573488f4f17)

Closes #101

Author: nearestnabors

frameworks/react-cra/src/index.ts

@@ -24,7 +24,7 @@ export function createFrameworkDefinition(): FrameworkDefinition {
 
   return {
     id: 'react-cra',
-    name: 'react',
+    name: 'React',
     description: 'Templates for React CRA',
     version: '0.1.0',
     base: files,

frameworks/solid/src/index.ts

@@ -24,7 +24,7 @@ export function createFrameworkDefinition(): FrameworkDefinition {
 
   return {
     id: 'solid',
-    name: 'solid',
+    name: 'Solid',
     description: 'Solid templates for Tanstack Router Applications',
     version: '0.1.0',
     base: files,

packages/cta-cli/src/mcp.ts

@@ -1,3 +1,6 @@
+// do same for listTanStackReactAddOns and listTanStackSolidAddOns
+// remove the react and solid variants
+
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
 import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js'
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
@@ -9,6 +12,8 @@ import {
   createDefaultEnvironment,
   finalizeAddOns,
   getFrameworkById,
+  getFrameworkByName,
+  getFrameworks,
 } from '@tanstack/cta-engine'
 
 function createServer({
@@ -24,101 +29,17 @@ function createServer({
     version: '1.0.0',
   })
 
-  server.tool(
-    'listTanStackReactAddOns',
-    'List the available add-ons for creating TanStack React applications',
-    {},
-    () => {
-      const framework = getFrameworkById('react-cra')!
-      return {
-        content: [
-          {
-            type: 'text',
-            text: JSON.stringify(
-              framework
-                .getAddOns()
-                .filter((addOn) => addOn.modes.includes('file-router'))
-                .map((addOn) => ({
-                  id: addOn.id,
-                  description: addOn.description,
-                })),
-            ),
-          },
-        ],
-      }
-    },
-  )
+  const frameworks = getFrameworks();
+  const frameworkNames = frameworks.map((framework) => framework.name);
 
   server.tool(
-    'createTanStackReactApplication',
-    'Create a new TanStack React application',
+    'listTanStackAddOns',
+    'List the available add-ons for creating TanStack applications',
     {
-      projectName: z
-        .string()
-        .describe(
-          'The package.json module name of the application (will also be the directory name)',
-        ),
-      cwd: z.string().describe('The directory to create the application in'),
-      addOns: z.array(z.string()).describe('The IDs of the add-ons to install'),
-      targetDir: z
-        .string()
-        .describe(
-          'The directory to create the application in. Use the absolute path of the directory you want the application to be created in',
-        ),
+      framework: z.string().describe(`The framework to use. Available frameworks: ${frameworkNames.join(', ')}`),
     },
-    async ({ projectName, addOns, cwd, targetDir }) => {
-      const framework = getFrameworkById('react-cra')!
-      try {
-        process.chdir(cwd)
-        try {
-          const chosenAddOns = await finalizeAddOns(
-            framework,
-            'file-router',
-            Array.from(
-              new Set([
-                ...(addOns as unknown as Array<string>),
-                ...forcedAddOns,
-              ]),
-            ),
-          )
-          await createApp(createDefaultEnvironment(), {
-            projectName: projectName.replace(/^\//, './'),
-            targetDir,
-            framework,
-            typescript: true,
-            tailwind: true,
-            packageManager: 'pnpm',
-            mode: 'file-router',
-            chosenAddOns,
-            git: true,
-          })
-        } catch (error) {
-          console.error(error)
-          return {
-            content: [
-              { type: 'text', text: `Error creating application: ${error}` },
-            ],
-          }
-        }
-        return {
-          content: [{ type: 'text', text: 'Application created successfully' }],
-        }
-      } catch (error) {
-        return {
-          content: [
-            { type: 'text', text: `Error creating application: ${error}` },
-          ],
-        }
-      }
-    },
-  )
-
-  server.tool(
-    'listTanStackSolidAddOns',
-    'List the available add-ons for creating TanStack Solid applications',
-    {},
-    () => {
-      const framework = getFrameworkById('solid')!
+    ({ framework: frameworkName }) => {
+      const framework = getFrameworkByName(frameworkName)!
       return {
         content: [
           {
@@ -139,9 +60,10 @@ function createServer({
   )
 
   server.tool(
-    'createTanStackSolidApplication',
-    'Create a new TanStack Solid application',
+    'createTanStackApplication',
+    'Create a new TanStack application',
     {
+      framework: z.string().describe(`The framework to use. Available frameworks: ${frameworkNames.join(', ')}`),
       projectName: z
         .string()
         .describe(
@@ -155,8 +77,8 @@ function createServer({
           'The directory to create the application in. Use the absolute path of the directory you want the application to be created in',
         ),
     },
-    async ({ projectName, addOns, cwd, targetDir }) => {
-      const framework = getFrameworkById('solid')!
+    async ({ framework:frameworkName, projectName, addOns, cwd, targetDir }) => {
+      const framework = getFrameworkByName(frameworkName)!
       try {
         process.chdir(cwd)
         try {
@@ -182,6 +104,7 @@ function createServer({
             git: true,
           })
         } catch (error) {
+          console.error(error)
           return {
             content: [
               { type: 'text', text: `Error creating application: ${error}` },