Skip to main content
Glama

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
NameRequiredDescriptionDefault
projectNameYesName of the React project
destinationYesDirectory where to create the project (e.g., ~/Desktop)
templateNoVite template to use
installDependenciesNoInstall 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"], }, },
  • 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`, }, ], }; }
  • 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"); }
  • 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);
  • 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); }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/AbdurRaahimm/mcp-git-terminal-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server