Getting Started with InSite
Set up and start using the browser automation platform.
Quick Setup
Prerequisites
Ensure you have the following installed:
- Node.js (v18 or higher)
- npm or yarn
- Git (for cloning the repository)
Installation
Quick Start with npx (recommended):
npx insite-mcp
This will automatically install and start the MCP server.
Global Installation (alternative):
npm install -g insite-mcp
Development Installation:
# Clone the repository
git clone https://github.com/your-org/insite.git
cd insite
# Install dependencies
npm install
# Install Playwright browsers
npx playwright install
Start Using
With npx (no additional steps needed):
The server starts automatically when using npx insite-mcp
.
With global installation:
insite-mcp
Development build:
# Build the project
npm run build
# Start the MCP server
node dist/server.js
The server will start and listen for MCP protocol connections.
Verify Installation
Test the installation with the test suite:
# One-command setup with full installation and testing
npm run install:full
# Or run specific test suites
npm run test:quick # Quick validation tests
npm run test:advanced # Extended feature validation
npm test # Complete test suite
Test results should show success across unit, integration, and end-to-end test categories.
Configuration
MCP Configuration
Configure InSite as an MCP server in your client application. Here's an example configuration:
{
"mcpServers": {
"insite": {
"command": "npx",
"args": ["insite-mcp"]
}
}
}
Alternative configurations:
Global installation:
{
"mcpServers": {
"insite": {
"command": "insite-mcp"
}
}
}
Development/local build:
{
"mcpServers": {
"insite": {
"command": "node",
"args": ["./dist/server.js"],
"cwd": "/path/to/insite",
"env": {
"NODE_ENV": "production"
}
}
}
}
Environment Variables
Configure InSite behavior with environment variables:
Run browsers in headless mode (default: true)
INSITE_HEADLESS=false
Default browser engine (chromium, firefox, webkit)
INSITE_BROWSER_ENGINE=chromium
Default viewport width (default: 1280)
INSITE_VIEWPORT_WIDTH=1920
Default viewport height (default: 720)
INSITE_VIEWPORT_HEIGHT=1080
Default operation timeout in milliseconds (default: 30000)
INSITE_TIMEOUT=60000
First Steps
Basic Usage Example
Here's a simple example to get you started with basic page automation:
{
"method": "tools/call",
"params": {
"name": "load_page",
"arguments": {
"url": "https://example.com",
"waitUntil": "domcontentloaded"
}
}
}
Multi-Step Workflow
Chain multiple tools together for complex automation workflows:
// 1. Load page
{
"name": "load_page",
"arguments": {
"url": "https://example.com/login",
"waitUntil": "networkidle"
}
}
// 2. Fill login form
{
"name": "type_text",
"arguments": {
"selector": "#username",
"text": "your-username"
}
}
{
"name": "type_text",
"arguments": {
"selector": "#password",
"text": "your-password"
}
}
// 3. Submit form
{
"name": "click_element",
"arguments": {
"selector": "#login-button"
}
}
// 4. Wait for navigation
{
"name": "wait_for_navigation",
"arguments": {
"timeout": 10000
}
}
// 5. Take screenshot
{
"name": "screenshot",
"arguments": {
"fullPage": true
}
}
Additional Features
Use performance monitoring and visual testing features:
// Start performance monitoring
{
"name": "performance_monitoring",
"arguments": {
"action": "start_monitoring",
"metrics": ["pageLoadTime", "firstContentfulPaint", "largestContentfulPaint"]
}
}
// Enable debug mode
{
"name": "debug_mode",
"arguments": {
"action": "enable",
"features": ["console", "network", "performance"]
}
}
// Run visual regression test
{
"name": "visual_regression_testing",
"arguments": {
"action": "run_tests",
"config": {
"threshold": 0.1,
"engines": ["chromium", "firefox"]
}
}
}