install_react_project

Instructions

Implementation Reference

• src/index.ts:117-143 (registration)

  Registration of the 'install_react_project' tool, including its name, description, and input schema in the ListTools response.

  {
    name: "install_react_project",
    description: "Create a new React project using Vite and open it in VSCode",
    inputSchema: {
      type: "object",
      properties: {
        projectName: {
          type: "string",
          description: "Name of the React project",
        },
        destination: {
          type: "string",
          description: "Directory where to create the project (e.g., ~/Desktop)",
        },
        template: {
          type: "string",
          description: "Vite template to use",
          enum: ["react", "react-ts", "react-swc", "react-swc-ts"],
        },
        installDependencies: {
          type: "boolean",
          description: "Install dependencies after creating project (default: true)",
        },
      },
      required: ["projectName", "destination"],
    },
  },

• src/index.ts:281-333 (handler)

  The handler implementation for 'install_react_project' within the CallToolRequestSchema switch statement. Creates a Vite React project using npm, optionally installs dependencies, and opens it in VSCode.

  case "install_react_project": {
    const { 
      projectName, 
      destination, 
      template = "react-ts",
      installDependencies = true 
    } = args as {
      projectName: string;
      destination: string;
      template?: string;
      installDependencies?: boolean;
    };
    
    const destPath = resolvePath(destination);
    await ensureDirectory(destPath);
    
    // Create Vite React project
    const createCommand = `npm create vite@latest ${projectName} -- --template ${template}`;
    
    const { stdout: createOutput } = await execa(createCommand, {
      shell: true,
      cwd: destPath,
    });
    
    const projectPath = path.join(destPath, projectName);
    
    // Install dependencies if requested
    if (installDependencies) {
      const installCommand = "npm install";
      const { stdout: installOutput } = await execa(installCommand, {
        shell: true,
        cwd: projectPath,
      });
    }
    
    // Open in VSCode
    await openInVSCode(projectPath);
    
    return {
      content: [
        {
          type: "text",
          text: `React project "${projectName}" created successfully with Vite at ${projectPath}\n\n` +
                `Template: ${template}\n` +
                `Dependencies: ${installDependencies ? "Installed" : "Not installed (run npm install manually)"}\n` +
                `VSCode: Opened\n\n` +
                `To start development:\n` +
                `  cd ${projectPath}\n` +
                `  ${installDependencies ? "" : "npm install\n  "}npm run dev`,
        },
      ],
    };
  }

• src/index.ts:34-57 (helper)

  Helper function 'openInVSCode' used by the install_react_project handler to open the created project in VSCode, with fallback paths.

  async function openInVSCode(projectPath: string): Promise<void> {
    try {
      await execa("code", [projectPath]);
    } catch (error) {
      // If 'code' command fails, try common VSCode executable paths
      const vscodePaths = [
        "code",
        "/usr/local/bin/code",
        "/usr/bin/code",
        "C:\\Program Files\\Microsoft VS Code\\Code.exe",
        "C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe",
      ];
  
      for (const codePath of vscodePaths) {
        try {
          await execa(codePath, [projectPath]);
          return;
        } catch {
          // Continue to next path
        }
      }
      
      throw new Error("VSCode not found. Please ensure VSCode is installed and 'code' command is available in PATH");
    }

• src/index.ts:26-30 (helper)

  Helper function 'resolvePath' used to resolve user-provided paths, handling '~' for home directory.

  function resolvePath(inputPath: string): string {
    if (inputPath.startsWith("~")) {
      return path.join(os.homedir(), inputPath.slice(1));
    }
    return path.resolve(inputPath);

• src/index.ts:17-22 (helper)

  Helper function 'ensureDirectory' used to create the destination directory if it doesn't exist.

  async function ensureDirectory(dirPath: string): Promise<void> {
    try {
      await fs.mkdir(dirPath, { recursive: true });
    } catch (error) {
      console.error(`Error creating directory ${dirPath}:`, error);
    }