install_react_project

Create and set up a new React project using Vite, then open it in VSCode for immediate development.

Instructions

Create a new React project using Vite and open it in VSCode

Input Schema

TableJSON Schema

Name	Required	Description
`projectName`	Yes	Name of the React project
`destination`	Yes	Directory where to create the project (e.g., ~/Desktop)
`template`	No	Vite template to use
`installDependencies`	No	Install dependencies after creating project (default: true)

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);
  }

MCP Terminal & Git Server