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