Stepwise

Stepwise is a desktop workflow guide recorder that captures user actions and exports them into structured step-by-step guides. The application runs as a local desktop utility, capturing screen evidence, click coordinates, and window context. Captured sessions can be reviewed, renamed, exported to Markdown, or accessed by AI agents through a Model Context Protocol (MCP) server integration.

Key Features

• Desktop Workflow Capture: Record individual steps of a workflow, including click coordinates and active window titles.
• Floating Controls Overlay: A transparent overlay window provides quick access to pause, resume, and stop recording actions while working.
• Session Browser and Preview: A visual library to inspect screenshots, view generated Markdown drafts, and approve sessions for AI access.
• Model Context Protocol Integration: Exposes approved sessions to external AI tools using a local MCP server implementation.
• Modern Design System: Features a high-contrast dark theme, glassmorphic panels, and transitions.

Technology Stack

• Frontend: TypeScript, HTML, CSS, Vite, Lucide Icons
• Backend: Rust, Tauri
• Testing: Vitest for frontend units, native Cargo tests for Rust modules

Project Structure

• src/: Frontend application code, styling, and UI views.
• src-tauri/: Tauri backend application, Rust modules, Storage controllers, and MCP server.
• tests/: Frontend unit test specifications.

Getting Started

Prerequisites

Ensure you have the following installed on your machine:

• Node.js (v18 or newer)
• Rust compiler and Cargo toolchain
• System dependencies required for Tauri development

Installation

Clone the repository and install the Node dependencies:

npm install

Running the Application

Start the application in development mode:

npm run tauri dev

Building the Application

To build the production-ready desktop bundle:

npm run tauri build

Running Tests

Run frontend unit tests using Vitest:

npm run test