Skip to content
Fractal frac

Quickstart

The easiest way to bootstrap a project is using the starter template. It comes pre-configured with an MCP server, a basic UI view, and a development server with HMR.

Scaffold your project

Section titled “Scaffold your project”

Set up your app with a single command:

Terminal window
npm create @usefractal/frac@latest my-app
Terminal window
pnpm create @usefractal/frac my-app
Terminal window
yarn create @usefractal/frac my-app
Terminal window
bun create @usefractal/frac my-app
Terminal window
deno run -A npm:@usefractal/create-frac@latest my-app

Start the development server

Section titled “Start the development server”

Run the development server from the root directory:

Terminal window
npm run dev
Terminal window
pnpm dev
Terminal window
yarn dev
Terminal window
bun dev
Terminal window
deno task dev

This runs frac dev, which starts a development server with the following features:

What it does

Section titled “What it does”

The frac command:

  • Starts an Express server on port 3000 that packages:
    • An MCP endpoint on /mcp - the App Backend
    • A React application on Vite HMR dev server - the App Frontend
  • Watches for file changes using nodemon, automatically restarting the server when you modify server-side code

Development workflow

Section titled “Development workflow”

When you run frac:

  1. The server starts and displays the welcome screen in your terminal
  2. The MCP server is available at http://localhost:3000/mcp
  3. File watching is enabled - changes to server code will automatically restart the server
  4. Hot Module Reload (HMR) is active for View components - changes appear instantly in the host without reconnecting

Use a local MCP testing tool such as Sunpeak or MCPJam to exercise tools and inspect responses while developing.

Next steps

Section titled “Next steps”
Test Your App

Learn how to test your app locally, in ChatGPT and compatible MCP Clients.