### Install and Run dev3000 CLI

Source: https://github.com/vercel-labs/dev3000/blob/main/README.md

Installs the dev3000 command-line interface globally using pnpm and then runs the tool to start capturing development logs.

```bash
pnpm install -g dev3000
dev3000
```

--------------------------------

### TypeScript CLI Entry Point Structure

Source: https://github.com/vercel-labs/dev3000/blob/main/AGENTS.md

Illustrates the structure of the CLI entry point using Commander.js, detailing the main commands like 'start' for the development environment and 'setup' for project configuration.

```typescript
// src/cli.ts
// Uses Commander.js for CLI interface
// Two main commands: `start` (dev environment) and `setup` (project setup)
// Default command is `start` if no subcommand provided
```

--------------------------------

### TypeScript Project Setup for MCP API Routes

Source: https://github.com/vercel-labs/dev3000/blob/main/AGENTS.md

Details the project setup process, including installing MCP API routes in the Next.js app directory, creating necessary route files, and updating package.json with new scripts and dependencies.

```typescript
// src/setup.ts
// Installs MCP (Model Context Protocol) API routes in Next.js app directory
// Creates `app/api/mcp/[transport]/route.ts` with three tools: `read_consolidated_logs`, `search_logs`, `get_browser_errors`
// Updates package.json with `dev:ai` script and dependencies (`mcp-handler`, `zod`)
// Manages .gitignore entries for `ai-dev-tools/` directory
```

--------------------------------

### Run dev3000 with Custom Port

Source: https://github.com/vercel-labs/dev3000/blob/main/README.md

Starts the dev3000 tool, specifying a custom port (e.g., 5173) for the application it is monitoring.

```bash
dev3000 --port 5173
```

--------------------------------

### TypeScript Development Environment Orchestration

Source: https://github.com/vercel-labs/dev3000/blob/main/AGENTS.md

Describes the development environment setup, which orchestrates the dev server and browser monitoring using Playwright. It handles port availability checks and logging.

```typescript
// src/dev-environment.ts
// Orchestrates any dev server + browser monitoring via Playwright
// Works with any web framework (Next.js, Vite, etc.)
// Checks port availability before starting (defaults: 3000 for app, 3684 for MCP server)
// If ports are in use, displays process IDs and kill command instead of auto-killing
// Uses persistent Chrome profile and captures unified logs
// Monitors console logs, network requests, page errors, navigation events
// Takes automatic screenshots on errors and route changes
```

--------------------------------

### dev3000 CLI Options

Source: https://github.com/vercel-labs/dev3000/blob/main/README.md

Lists the available command-line options for the dev3000 tool, including port configuration, script execution, and Chrome profile directory.

```bash
dev3000 [options]

  -p, --port <port>         Your app's port (default: 3000)
  --mcp-port <port>         MCP server port (default: 3684)
  -s, --script <script>     Package.json script to run (default: dev)
  --profile-dir <dir>       Chrome profile directory (persists cookies/login state)
```

--------------------------------

### Build and Develop Project with pnpm

Source: https://github.com/vercel-labs/dev3000/blob/main/AGENTS.md

Commands to build the project using pnpm. It also highlights the preference for pnpm over npm for all package management tasks within this project.

```bash
pnpm run build
# or with tsx for development
pnpm run dev
```

--------------------------------

### pnpm Commands for Development Workflow

Source: https://github.com/vercel-labs/dev3000/blob/main/AGENTS.md

Essential pnpm commands for managing dependencies, building, and releasing the project. It stresses the importance of using the `pnpm run release` script for publishing and avoiding direct `pnpm publish` or `pnpm version` commands.

```bash
pnpm install
pnpm run build
pnpm run release
```

--------------------------------

### Connect Claude MCP to dev3000 Server

Source: https://github.com/vercel-labs/dev3000/blob/main/README.md

Connects the Claude MCP (Multi-Command Protocol) server to the dev3000 instance running locally, enabling Claude to issue commands to the browser.

```bash
claude mcp add dev3000 http://localhost:3684/api/mcp/mcp
```

--------------------------------

### Dev3000 Word Transition Animation (JavaScript)

Source: https://github.com/vercel-labs/dev3000/blob/main/src/loading.html

Implements a word transition animation for the Dev3000 project. It selects all elements with the class 'word' and cycles through them, applying CSS classes to create a visible and exiting effect for each word. The animation is set to repeat every 2000 milliseconds.

```JavaScript
(function() {
  const words = document.querySelectorAll('.word');
  let currentIndex = 0;

  function animateWordTransition() {
    const currentWord = words[currentIndex];
    const nextIndex = (currentIndex + 1) % words.length;
    const nextWord = words[nextIndex];

    // Animate current word out with exit transition
    currentWord.classList.remove('visible');
    currentWord.classList.add('exiting');

    // After exit animation, prepare next word and animate it in
    setTimeout(() => {
      // Reset current word to initial state
      currentWord.classList.remove('exiting');
      // Animate next word in
      nextWord.classList.add('visible');
      currentIndex = nextIndex;
    }, 300); // Match CSS transition duration
  }

  // Initialize - first word starts visible
  words[0].classList.add('visible');

  // Start the interval for word transitions
  setTimeout(() => {
    setInterval(animateWordTransition, 2000);
  }, 300);
})();
```

--------------------------------

### Run dev3000 with Persistent Chrome Profile

Source: https://github.com/vercel-labs/dev3000/blob/main/README.md

Launches dev3000 while specifying a Chrome profile directory. This allows the tool to persist cookies and login states across sessions.

```bash
dev3000 --profile-dir ./chrome-profile
```

--------------------------------

### Dev3000 Loading Screen Styling (CSS)

Source: https://github.com/vercel-labs/dev3000/blob/main/src/loading.html

Provides the CSS styles for the Dev3000 loading screen, including animations for a spinning ring and pulsing triangle, and styling for text elements like headings, taglines, and subtitles. It also includes styles for footer elements.

```CSS
/* Basic reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Body styling */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
  color: #fafafa;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Container for centering content */
.container {
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Logo container styling */
.logo-container {
  margin-bottom: 32px;
  position: relative;
  width: 80px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
}

/* Triangle element styling */
.triangle {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 41px;
  animation: pulse 2s ease-in-out infinite;
  z-index: 2;
}

/* SVG styling within the triangle */
.triangle svg {
  width: 100%;
  height: 100%;
  fill: #fafafa;
}

/* Spinner ring styling */
.spinner-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  border: 2px solid rgba(250, 250, 250, 0.1);
  border-top: 2px solid #fafafa;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
  z-index: 1;
}

/* Spin animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
}

/* Heading styles */
h1 {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Tagline styles */
.tagline {
  margin: 0 0 8px;
  font-size: 16px;
  color: #a1a1aa;
  font-weight: 500;
}

/* Subtitle styles */
.subtitle {
  font-family: monospace;
  display: inline-block;
  margin: 0;
  font-size: 14px;
  color: #71717a;
  font-weight: 400;
}

/* Container for words */
.word-container {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  height: 1.2em;
  position: relative;
  min-width: 2em;
  top: 3px;
  left: 2px;
}

/* Individual word styling */
.word {
  position: absolute;
  top: 0;
  left: 0;
  color: #fbbf24;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.3s ease-out;
  opacity: 0;
  transform: translateY(-20px);
}

/* Visible word state */
.word.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Exiting word state */
.word.exiting {
  opacity: 0;
  transform: translateY(20px);
}

/* Footer styling */
.footer {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: #52525b;
  opacity: 0.8;
}

/* Small triangle icon styling */
.triangle-small {
  display: flex;
  width: 10px;
  height: 10px;
}

/* SVG styling within small triangle */
.triangle-small svg {
  width: 100%;
  height: 100%;
  fill: #52525b;
}
```

--------------------------------

### Read dev3000 Log File

Source: https://github.com/vercel-labs/dev3000/blob/main/README.md

Instructs an AI, like Claude, to read the consolidated log file generated by dev3000, typically located at /tmp/dev3000.log, for debugging purposes.

```bash
Read /tmp/dev3000.log
```

--------------------------------

### CSS for Favicon Preview and Browser Tab Demo

Source: https://github.com/vercel-labs/dev3000/blob/main/www/public/favicon-preview.html

This CSS code styles the favicon preview elements, including the main container, the SVG itself, and the browser tab simulation. It ensures a clean, readable display with appropriate spacing and borders.

```CSS
body { font-family: monospace; background: #f0f0f0; padding: 20px; }
.favicon-preview { display: inline-block; margin: 10px; padding: 10px; background: white; border: 1px solid #ccc; }
svg { border: 1px solid #000; }
.browser-tab-demo { background: #e8e8e8; padding: 10px; border-radius: 8px; margin: 20px 0; }
.tab { display: inline-block; background: #d0d0d0; padding: 4px 8px; border-radius: 4px 4px 0 0; margin-right: 2px; font-size: 12px; }
.tab svg { vertical-align: middle; margin-right: 4px; border: none; }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.