### Installing @page-ai/dom package

Source: https://github.com/salvinoto/pages-ai/blob/main/packages/dom/README.md

Demonstrates how to install the @page-ai/dom package using the bun package manager. This package is typically included with the main SDK but can be installed separately.

```bash
bun install @page-ai/dom
```

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

### Installing @page-ai/core package (Bun)

Source: https://github.com/salvinoto/pages-ai/blob/main/packages/core/README.md

Instructions on how to install the @page-ai/core package using the Bun package manager. This package is typically included with the main SDK but can be installed separately.

```bash
bun install @page-ai/core
```

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

### Install Page-AI Packages with Bun

Source: https://github.com/salvinoto/pages-ai/blob/main/README.md

Installs the core, DOM, and React packages of the Page-AI SDK using the Bun package manager. This command adds the specified packages as dependencies to your project.

```bash
bun add @page-ai/react @page-ai/core @page-ai/dom
```

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

### Tagging a Git Release

Source: https://github.com/salvinoto/pages-ai/blob/main/README.md

Provides example Git commands for creating and pushing tags to mark specific release points in the repository's history. Tagging is optional but recommended for easy reference to released versions.

```bash
# Example: git tag @page-ai/core@0.1.1 # Tag specific package version
# Example: git tag release-2025-05-05
# git push origin <tag_name> # Or git push --tags
```

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

### Initializing and Using DomObserver

Source: https://github.com/salvinoto/pages-ai/blob/main/packages/dom/README.md

Illustrates the basic usage of the DomObserver class to monitor changes within a specified DOM element. It shows how to initialize the observer, start observation, listen for change events, and the importance of stopping the observer.

```typescript
import { DomObserver } from '@page-ai/dom';

// Get the root element of your application
const appRoot = document.getElementById('root');

if (appRoot) {
  // Initialize the observer, potentially passing configuration options
  const observer = new DomObserver(appRoot, { /* options */ });

  // Start observing
  observer.start();

  // Listen for changes
  observer.onChange((diff) => {
    console.log('DOM changed:', diff);
    // Send the diff to the AI agent or core engine
  });

  // Remember to stop observing when the component unmounts
  // observer.stop();
}
```

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

### Install Page-AI React Package (Bash)

Source: https://github.com/salvinoto/pages-ai/blob/main/packages/react/README.md

Installs the @page-ai/react package along with its core and DOM dependencies using the Bun package manager.

```bash
bun install @page-ai/react @page-ai/core @page-ai/dom
```

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

### Building Packages with Bun

Source: https://github.com/salvinoto/pages-ai/blob/main/README.md

Executes the build script defined in package.json using Bun. This step ensures that all packages are compiled or prepared with the latest code and the correct, newly assigned version numbers before they are published.

```bash
bun run build
```

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

### Publishing Packages with Changesets and Bunx

Source: https://github.com/salvinoto/pages-ai/blob/main/README.md

Uses bunx to execute the Changesets publish command. This command identifies packages that have been versioned and publishes them to the configured package registry (e.g., NPM). Requires prior authentication with the registry.

```bash
bunx changeset publish
```

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

### Adding a Changeset with Bun

Source: https://github.com/salvinoto/pages-ai/blob/main/README.md

Runs the Changesets CLI via Bun to interactively create a new changeset file. This file documents a specific change (feature, fix, etc.) and its intended SemVer bump for the release changelog.

```bash
bun run add-changeset
```

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

### Running Linter with Bun

Source: https://github.com/salvinoto/pages-ai/blob/main/README.md

Executes the lint script defined in package.json using Bun. Running the linter helps maintain code style consistency and catch potential errors before release.

```bash
bun run lint
```

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

### Running Tests with Bun

Source: https://github.com/salvinoto/pages-ai/blob/main/README.md

Executes the test script defined in package.json using Bun. This step is recommended to ensure code quality and stability before proceeding with the release process.

```bash
bun run test
```

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

### Versioning Packages with Bun and Changesets

Source: https://github.com/salvinoto/pages-ai/blob/main/README.md

Runs the Changesets version command using Bun. This command reads the committed changesets, updates package.json files with new versions, generates or updates CHANGELOG.md files, and removes the processed changeset files.

```bash
bun run version
```

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

### Wrap React App with PageAIProvider (JSX)

Source: https://github.com/salvinoto/pages-ai/blob/main/packages/react/README.md

Demonstrates how to wrap the root of a React application or a subtree with the PageAIProvider component to establish the Page-AI context. Includes optional inclusion of AIDevTools for development.

```jsx
// In your main App component or layout
import { PageAIProvider } from '@page-ai/react';
import { MyAppComponent } from './MyAppComponent';

function App() {
  return (
    <PageAIProvider config={{ /* configuration options */ }}>
      <MyAppComponent />
      {/* Optionally include DevTools during development */}
      {process.env.NODE_ENV === 'development' && <AIDevTools />}
    </PageAIProvider>
  );
}

export default App;
```

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

### Committing Changeset Files

Source: https://github.com/salvinoto/pages-ai/blob/main/README.md

Stages the newly generated markdown files located in the .changeset directory and commits them to the Git repository. These committed changesets are then processed by the versioning command.

```bash
git add .changeset/
git commit -m "docs: add changesets for upcoming release"
```

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

### Defining a Command Schema with Zod (TypeScript)

Source: https://github.com/salvinoto/pages-ai/blob/main/packages/core/README.md

Illustrates how to define a schema for an AI command, such as a 'click' action, using the Zod library. This schema specifies the expected input structure (e.g., a selector) for the command within the Page-AI engine.

```typescript
import { z } from 'zod';

const clickSchema = z.object({
  selector: z.string().describe("CSS selector for the element to click")
});

// Use this schema within the Page-AI engine to define a 'click' command.
```

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

### Committing Versioning Changes

Source: https://github.com/salvinoto/pages-ai/blob/main/README.md

Stages the modified package.json and CHANGELOG.md files that were updated by the versioning command, along with the .changeset/pre.json file if it exists. These changes are then committed to Git, finalizing the version bumps and changelog entries.

```bash
git add packages/*/package.json packages/*/CHANGELOG.md .changeset/pre.json # Adjust if other files were changed by the version command
git commit -m "chore: bump versions and update changelogs"
```

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

### Access Page-AI Engine with usePageAI Hook (JSX)

Source: https://github.com/salvinoto/pages-ai/blob/main/packages/react/README.md

Shows how to use the usePageAI hook within a React component to access the Page-AI engine and its current state, enabling interaction with Page-AI functionalities.

```jsx
import { usePageAI } from '@page-ai/react';

function MyInteractiveComponent() {
  const { engine, state } = usePageAI();

  // Use the engine to execute commands or get information
  // Access the current state (e.g., serialized DOM, available tools)

  return (
    <div>
      {/* Your component UI */}
    </div>
  );
}
```

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