# General

SleekByte is a WordPress code snippets plugin that stores code as files on your filesystem instead of in the database. This approach makes your snippets portable, version-control friendly, and easier to organize as complete features.

## Core concepts

### File-based storage

Snippets are stored as actual files in your WordPress installation, not database entries. PHP, CSS, and JavaScript files are automatically enqueued from any folder structure you create.

### Feature organization

Instead of managing CSS, JavaScript, and PHP separately, organize complete features with all their assets in one location. Each snippet can contain multiple file types working together.

### Declarative configuration

Every snippet includes a `snippet.json` file that defines hooks, loading conditions, dependencies, and file organization. Edit this file directly or use the visual interface.

### AI integration

Built-in AI assistant can generate snippets, fix errors, and help navigate your code. Works with your own API key from OpenAI, Anthropic, Google, or OpenRouter.

## Key features

- File-based snippet storage with automatic enqueueing - Built-in CodeMirror editor with PHP error checking - Live preview functionality with shareable URLs
- AI-powered code generation and error fixing - Visual and code-based configuration editing - Complete file organization flexibility

---

# Activating

SleekByte can be activated on a site by navigating to the `SleekByte` menu item in the WordPress admin dashboard.

Alternatively, it is also possible to activate SleekByte using PHP. This is done by adding the following code constant to your `functions.php` file:

```php
const SLEEKBYTE_LICENSE = "YOUR LICENSE KEY";
```

---

# Snippets - Sources

SleekByte allows you to organize snippets across multiple directories and see them all in one unified interface. This flexible source system lets you store snippets in theme directories, plugin folders, or any custom location while maintaining a single management interface.

## Default snippet location

When no custom sources are configured, SleekByte uses a default directory inside your WordPress uploads folder:

```
/wp-content/uploads/sleek-byte/
```
This location ensures snippets remain accessible and writable by WordPress while being isolated from core WordPress files.

## Understanding snippet sources

A snippet source is a named directory location where SleekByte looks for snippet folders. Each source appears as a top-level section in the file browser, making it easy to organize snippets by project, functionality, or origin.

### Source properties

Each snippet source has three key properties:

**name** (string) Display name shown in the SleekByte file browser. Must be unique across all sources since it appears as a top-level folder in the interface.

**path** (string) Absolute filesystem path to the directory containing snippet folders.

**sort** (int) Display order in the file browser. Lower numbers appear first. Default sources use 100.

## Adding custom sources

Use the `sleekByte/snippets/paths` filter to add custom snippet directories. This allows you to organize snippets across multiple locations while managing them from a single interface.

```php
add_filter('sleekByte/snippets/paths', function ($sources) {
  // Add custom snippets directory
  $sources[] = [
    'name' => 'Custom Snippets',
    'path' => get_template_directory() . '/snippets',
    'sort' => 50,
  ];

  // Add another directory for client-specific snippets
  $sources[] = [
    'name' => 'Client Snippets',
    'path' => WP_CONTENT_DIR . '/client-snippets',
    'sort' => 75,
  ];

  return $sources;
});
```
This example adds two new sources:

- **Custom Snippets** - Located in your active theme's snippets directory
- **Client Snippets** - Located in a dedicated directory within wp-content

## Practical source examples

### Theme-based organization

Store snippets alongside your theme files for easy deployment and version control:

```php
add_filter('sleekByte/snippets/paths', function ($sources) {
  $sources[] = [
    'name' => 'Theme Snippets',
    'path' => get_template_directory() . '/snippets',
    'sort' => 10,
  ];

  // Child theme snippets (if using child theme)
  if (get_template_directory() !== get_stylesheet_directory()) {
    $sources[] = [
      'name' => 'Child Theme Snippets',
      'path' => get_stylesheet_directory() . '/snippets',
      'sort' => 5,
    ];
  }

  return $sources;
});
```
### Plugin-based organization

Include snippets with your custom plugins:

```php
add_filter('sleekByte/snippets/paths', function ($sources) {
  $sources[] = [
    'name' => 'Site Plugin Snippets',
    'path' => WP_PLUGIN_DIR . '/my-site-plugin/snippets',
    'sort' => 20,
  ];

  $sources[] = [
    'name' => 'Must-Use Snippets',
    'path' => WPMU_PLUGIN_DIR . '/snippets',
    'sort' => 1,
  ];

  return $sources;
});
```
### Environment-based organization

Organize snippets by development environment:

```php
add_filter('sleekByte/snippets/paths', function ($sources) {
  $environment = wp_get_environment_type();
  $upload_dir = wp_upload_dir();

  // Development-only snippets
  if ($environment === 'development') {
    $sources[] = [
      'name' => 'Development Tools',
      'path' => $upload_dir['basedir'] . '/sleek-byte-dev',
      'sort' => 5,
    ];
  }

  // Staging-specific snippets
  if ($environment === 'staging') {
    $sources[] = [
      'name' => 'Staging Features',
      'path' => $upload_dir['basedir'] . '/sleek-byte-staging',
      'sort' => 10,
    ];
  }

  // Production-only snippets
  if ($environment === 'production') {
    $sources[] = [
      'name' => 'Production Enhancements',
      'path' => $upload_dir['basedir'] . '/sleek-byte-prod',
      'sort' => 15,
    ];
  }

  return $sources;
});
```
### Project-based organization

Organize snippets by client or project:

```php
add_filter('sleekByte/snippets/paths', function ($sources) {
  $upload_dir = wp_upload_dir();

  $sources[] = [
    'name' => 'Core Site Features',
    'path' => $upload_dir['basedir'] . '/sleek-byte-core',
    'sort' => 10,
  ];

  $sources[] = [
    'name' => 'E-commerce Features',
    'path' => $upload_dir['basedir'] . '/sleek-byte-ecommerce',
    'sort' => 20,
  ];

  $sources[] = [
    'name' => 'Marketing Tools',
    'path' => $upload_dir['basedir'] . '/sleek-byte-marketing',
    'sort' => 30,
  ];

  return $sources;
});
```

---

# Snippets - Configuration

Every SleekByte snippet includes a `snippet.json` file that serves as its configuration center. This declarative approach controls when, where, and how your snippet files are loaded, making your code more organized and maintainable.

Schema: [https://app.sleekwp.com/api/sleek-byte/snippets/schema](https://app.sleekwp.com/api/sleek-byte/snippets/schema)

## Core philosophy

The `snippet.json` file follows the same pattern as WordPress block development with `block.json`. Instead of scattered `add_action()` calls throughout your PHP code, you define loading behavior in one central configuration file that applies to all your snippet's assets.

## Minimal setup

The simplest possible snippet only needs an empty `snippet.json` file:

```json
{}
```
SleekByte will automatically:

- Discover and enqueue all `.php`, `.css`, and `.js` files
- Apply default loading behavior

## Full configuration example

```json
{
  "name": "My Custom Feature",
  "description": "Adds custom functionality to WordPress",
  "version": "1.0.0",
  "tags": ["utility", "frontend"],
  "export": {
    "author": "Your Name",
    "uri": "https://yourwebsite.com",
    "textDomain": "my-custom-feature"
  }
}
```
## Configuration properties

The `snippet.json` file can be as simple as an empty object `{}`. SleekByte will automatically detect and enqueue all files in the snippet folder. However, you can add configuration to control loading behavior and provide metadata.

### Metadata properties

**name** (string) Display name for your snippet in the SleekByte interface. Defaults to folder name.

**description** (string) Brief explanation of what the snippet does.

**version** (string) Semantic version number (e.g., "1.0.0"). Defaults to "1.0.0".

**tags** (array) Categories for organizing and searching snippets. Defaults to empty array.

**export** (object) Author and plugin information:

- `author` - Your name or organization
- `uri` - Your website URL
- `textDomain` - Text domain for translations

### File configuration

**files** (object) Maps file paths to their configuration. If omitted, SleekByte automatically discovers and enqueues all files:

- `.php` files are executed during the specified hook
- `.css` files are enqueued as stylesheets
- `.js` files are enqueued as scripts

## Loading control properties

### Context control

**context** (array) Defines where files should load. Default is `["frontend"]`.

```json
{
  "context": ["frontend", "admin", "block-editor"]
}
```
Available contexts:

- `frontend` - Public-facing pages
- `admin` - WordPress admin area
- `block-editor` - Gutenberg editor

### Hook control

**hook** (string) WordPress hook for PHP file execution. Default is `"wp"`.

```json
{
  "hook": "init"
}
```
Common hooks:

- `wp` - Default, after WordPress loads
- `init` - During WordPress initialization
- `wp_head` - In the document head
- `wp_footer` - Before closing body tag
- `admin_init` - Admin area initialization

### Conditional loading

**conditions** (array) Defines when the snippet should load using AND/OR logic.

```json
{
  "conditions": [
    [
      {
        "parameter": "userRole",
        "operator": "equals",
        "value": "administrator"
      },
      {
        "parameter": "isSingle",
        "operator": "equals",
        "value": true
      }
    ]
  ]
}
```
**Structure Logic:**

- **Outer array**: OR groups (any group can match)
- **Inner array**: AND conditions (all must match within a group)
- **Each condition**: Has `parameter`, `operator`, `value`, and optional `negate`

#### Basic condition format

```json
{
  "parameter": "userRole",
  "operator": "equals", 
  "value": "administrator",
  "negate": false
}
```
**Properties:**

- `parameter` - What to check (see available parameters below)
- `operator` - How to compare (see available operators below)
- `value` - Expected value to compare against
- `negate` - Optional: reverse the condition result

### Available condition parameters

#### User parameters

**userId** (number) Current user's ID. Use with specific user IDs.

**userRole** (string) Current user's primary role. Supports arrays for multiple roles.

**isUserLoggedIn** (boolean) Whether user is logged in.

```json
{
  "parameter": "userRole",
  "operator": "equals",
  "value": ["administrator", "editor"]
}
```
#### Post parameters

**postId** (number) Current post ID. Use for specific posts.

**postType** (string) Current post type (post, page, product, etc.).

**postStatus** (string) Current post status (publish, draft, private, etc.).

**postParent** (number) Parent post ID (for hierarchical post types).

**postAuthor** (number) Post author's user ID.

**pageTemplate** (string) Page template slug for pages.

```json
{
  "parameter": "postType",
  "operator": "equals",
  "value": ["post", "page"]
}
```
#### WordPress conditional tags

**isSingle** (boolean) - Single post pages **isPage** (boolean) - WordPress pages **isHome** (boolean) - Blog home page **isFrontPage** (boolean) - Site front page **isCategory** (boolean) - Category archive pages **isTag** (boolean) - Tag archive pages **isArchive** (boolean) - Any archive page **isSearch** (boolean) - Search results pages **is404** (boolean) - 404 error pages **isAttachment** (boolean) - Attachment pages

#### WordPress context

**isAdmin** (boolean) - WordPress admin area **isAjax** (boolean) - AJAX requests **isRest** (boolean) - REST API requests **isFeed** (boolean) - RSS/Atom feeds **isPreview** (boolean) - Post/page previews **isCustomizePreview** (boolean) - Customizer preview **isEmbed** (boolean) - oEmbed requests **currentScreen** (string) - Admin screen ID (admin context only)

```json
{
  "parameter": "currentScreen",
  "operator": "equals",
  "value": "dashboard"
}
```
#### Date and time parameters

**currentTime** (time - HH:MM) - Current time in 24-hour format **currentDate** (date - YYYY-MM-DD) - Current date **dayOfWeek** (number) - Day of week (0=Sunday, 6=Saturday) **timeOfDay** (number) - Hour of day (0-23)

```json
{
  "parameter": "timeOfDay",
  "operator": "greaterThanOrEqual",
  "value": 9
}
```
#### Device and browser parameters

**deviceType** (string) - Device type: `mobile`, `tablet`, `desktop` **browserName** (string) - Browser: `chrome`, `firefox`, `safari`, `edge`,`opera`, `internet-explorer`, `unknown` **browserVersion** (string) - Browserversion number **operatingSystem** (string) - OS: `windows`, `macos`, `ios`, `android`,`linux`, `unknown` **isMobile** (boolean) - Mobile devices **isTablet** (boolean) - Tablet devices **isDesktop** (boolean) - Desktop devices

```json
{
  "parameter": "deviceType",
  "operator": "equals",
  "value": "mobile"
}
```
#### HTTP parameters

**requestUri** (string) - Current request URI **queryString** (string) - URL query string **httpMethod** (string) - HTTP method (GET, POST, etc.) **userAgent** (string) - Full user agent string **referer** (string) - HTTP referer **ipAddress** (string) - User's IP address

#### Multisite parameters

**currentBlogId** (number) - Current blog ID (multisite only) **isMultisite** (boolean) - WordPress multisite installation **isMainSite** (boolean) - Main site in multisite (multisite only) **isNetworkAdmin** (boolean) - Network admin area (multisite only) **currentLanguage** (string) - Current language code

### Available condition operators

#### Equality operators

**equals** - Exact match. Supports arrays for "any of" matching **contains** (string) - String contains substring **startsWith** (string) - String starts with value **endsWith** (string) - String ends with value

#### Numeric operators

**greaterThan** - Numeric greater than **greaterThanOrEqual** - Numeric greater than or equal **lessThan** - Numeric less than **lessThanOrEqual** - Numeric less than or equal

#### String length operators

**lengthEquals** - String length equals value **lengthGreaterThan** - String length greater than value **lengthGreaterThanOrEqual** - String length greater than or equal **lengthLessThan** - String length less than value **lengthLessThanOrEqual** - String length less than or equal

#### Word count operators

**wordCountEquals** - Word count equals value **wordCountGreaterThan** - Word count greater than value **wordCountGreaterThanOrEqual** - Word count greater than or equal **wordCountLessThan** - Word count less than value **wordCountLessThanOrEqual** - Word count less than or equal

## File-specific configuration

Individual files can override global settings:

```json
{
  "context": ["frontend"],
  "files": {
    "index.php": {},
    "assets/admin.css": {
      "context": ["admin"],
    },
    "assets/script.js": {
      "dependencies": ["jquery"],
      "module": true
    }
  }
}
```
### File options

**context** (array) Override global context for this file.

**hook** (string) Override global hook for this file.

**dependencies** (array) Script or style dependencies.

**module** (boolean) Load JavaScript as ES6 module.

**conditions** (array) File-specific loading conditions.

## Advanced examples

### Multi-context feature

```json
{
  "name": "Site Enhancement Suite",
  "description": "Improvements for both frontend and admin",
  "version": "1.0.0",
  "tags": ["enhancement", "admin", "frontend"],
  "context": ["frontend", "admin"],
  "export": {
    "author": "Developer",
    "uri": "https://example.com",
    "textDomain": "site-enhancements"
  },
  "files": {
    "includes/core.php": {},
    "admin/settings.php": {
      "context": ["admin"],
      "hook": "admin_init"
    },
    "assets/frontend.css": {
      "context": ["frontend"]
    },
    "assets/admin.css": {
      "context": ["admin"]
    }
  }
}
```
### Conditional WooCommerce feature

```json
{
  "name": "WooCommerce Checkout Enhancements",
  "description": "Custom checkout modifications",
  "version": "1.0.0",
  "tags": ["woocommerce", "checkout"],
  "export": {
    "author": "Developer",
    "uri": "https://example.com",
    "textDomain": "woo-checkout"
  },
  "conditions": [
    [
      {
        "parameter": "postType",
        "operator": "equals",
        "value": "product"
      }
    ]
  ],
  "files": {
    "checkout/modifications.php": {
      "conditions": [
        [
          {
            "parameter": "requestUri",
            "operator": "contains",
            "value": "checkout"
          }
        ]
      ]
    },
    "assets/checkout.css": {
      "conditions": [
        [
          {
            "parameter": "requestUri",
            "operator": "contains",
            "value": "checkout"
          }
        ]
      ]
    }
  }
}
```
## Configuration vs code

Traditional approach:

```php
// ❌ Old way - scattered throughout files
add_action('wp_head', 'my_function');
if (current_user_can('administrator')) {
    add_action('admin_init', 'admin_function');
}
```
SleekByte approach:

```json
// ✅ New way - centralized configuration
{
  "hook": "wp_head",
  "conditions": [
    [
      {
        "parameter": "userRole",
        "operator": "equals",
        "value": "administrator"
      }
    ]
  ],
  "files": {
    "index.php": {
      "hook": "admin_init"
    }
  }
}
```
## Benefits

**Declarative Configuration** All loading logic is defined in one place, making it easy to understand and modify.

**Version Control Friendly** Configuration is stored as JSON, making changes clear in diffs and easy to track.

**No Code Pollution** Your PHP files contain only the functional code, not loading logic.

**Visual Editing** Switch between JSON and visual interface - both update the same file.

**Reusable Conditions** Define complex loading rules once and apply to multiple files.

**Performance** Files only load when conditions are met, reducing unnecessary overhead.

## Practical condition examples

### Admin-only dashboard widget

```json
{
  "conditions": [
    [
      {
        "parameter": "userRole",
        "operator": "equals",
        "value": "administrator"
      },
      {
        "parameter": "currentScreen",
        "operator": "equals",
        "value": "dashboard"
      }
    ]
  ]
}
```
### Mobile users on product pages

```json
{
  "conditions": [
    [
      {
        "parameter": "isMobile",
        "operator": "equals",
        "value": true
      },
      {
        "parameter": "postType",
        "operator": "equals",
        "value": "product"
      }
    ]
  ]
}
```
### Business hours only

```json
{
  "conditions": [
    [
      {
        "parameter": "timeOfDay",
        "operator": "greaterThanOrEqual",
        "value": 9
      },
      {
        "parameter": "timeOfDay",
        "operator": "lessThan",
        "value": 17
      },
      {
        "parameter": "dayOfWeek",
        "operator": "greaterThan",
        "value": 0
      },
      {
        "parameter": "dayOfWeek",
        "operator": "lessThan",
        "value": 6
      }
    ]
  ]
}
```
### Multiple page types OR admin

```json
{
  "conditions": [
    [
      {
        "parameter": "postType",
        "operator": "equals",
        "value": ["post", "page"]
      }
    ],
    [
      {
        "parameter": "isAdmin",
        "operator": "equals",
        "value": true
      }
    ]
  ]
}
```
### Negated conditions

```json
{
  "conditions": [
    [
      {
        "parameter": "userRole",
        "operator": "equals",
        "value": "subscriber",
        "negate": true
      }
    ]
  ]
}
```

---

# Snippets - Files

SleekByte automatically discovers and enqueues all PHP, CSS, and JavaScript files within your snippet folder. This file-based approach gives you complete flexibility in organizing your code while maintaining automatic loading behavior.

## Automatic file discovery

Once a `snippet.json` file exists in a folder, SleekByte scans the entire directory structure and automatically handles:

- **`.php` files** - Executed during the specified hook (default: `wp`)
- **`.css` files** - Enqueued as stylesheets
- **`.js` files** - Enqueued as scripts

## Flexible organization

You can organize files however makes sense for your project. Here are some common patterns:

### Simple structure

### Feature-based organization

### Asset-based organization

## Default loading behavior

Without any configuration in `snippet.json`, all discovered files load with these defaults:

- **PHP files**: Execute during `wp` hook
- **CSS files**: Enqueue on frontend with no dependencies
- **JS files**: Enqueue on frontend with no dependencies
- **Context**: Frontend only
- **Conditions**: No conditions (always load)

## Customizing file loading

You can override the default behavior for specific files using the `files` object in `snippet.json`:

### Different hooks for PHP files

```json
{
  "name": "Multi-Hook Example",
  "files": {
    "early-setup.php": {
      "hook": "after_setup_theme"
    },
    "post-type.php": {
      "hook": "init"
    },
    "admin/dashboard.php": {
      "hook": "admin_init",
      "context": ["admin"]
    },
    "frontend/widgets.php": {
      "hook": "widgets_init"
    },
    "cleanup.php": {
      "hook": "wp_footer"
    }
  }
}
```
### Context-specific assets

```json
{
  "name": "Context Example",
  "files": {
    "includes/core.php": {},
    "admin/settings.php": {
      "context": ["admin"]
    },
    "assets/css/admin.css": {
      "context": ["admin"],
    },
    "assets/css/frontend.css": {
      "context": ["frontend"]
    },
    "assets/js/editor.js": {
      "context": ["block-editor"]
    }
  }
}
```
### Dependencies and module loading

```json
{
  "name": "Dependencies Example",
  "files": {
    "assets/base.css": {},
    "assets/enhanced.css": {
      "dependencies": ["custom-base-styles"]
    },
    "assets/interactive.js": {
      "dependencies": ["jquery", "wp-api"]
    },
    "assets/modern.js": {
      "module": true,
      "dependencies": []
    }
  }
}
```
## File loading order

SleekByte processes files in this order:

1. **Discovery**: Scans directory for PHP, CSS, and JS files
2. **Configuration**: Applies `snippet.json` settings to each file
3. **Conditions**: Evaluates loading conditions
4. **Context**: Determines appropriate loading context
5. **Enqueuing**: Registers files with WordPress

## Advanced examples

### Complex WooCommerce integration

With corresponding configuration:

```json
{
  "name": "Advanced WooCommerce Integration",
  "conditions": [
    [
      {
        "parameter": "postType",
        "operator": "equals",
        "value": "product"
      }
    ]
  ],
  "files": {
    "blocks/product-showcase.php": {
      "hook": "init"
    },
    "blocks/block-styles.css": {
      "context": ["block-editor"],
      "hook": "enqueue_block_editor_assets"
    },
    "blocks/block-editor.js": {
      "context": ["block-editor"],
      "dependencies": ["wp-blocks", "wp-editor"]
    },
    "checkout/custom-fields.php": {
      "conditions": [
        [
          {
            "parameter": "requestUri",
            "operator": "contains",
            "value": "checkout"
          }
        ]
      ]
    },
    "checkout/checkout-styles.css": {
      "conditions": [
        [
          {
            "parameter": "requestUri",
            "operator": "contains",
            "value": "checkout"
          }
        ]
      ]
    },
    "emails/email-styles.css": {
      "hook": "woocommerce_email_header",
      "context": ["frontend"]
    },
    "vendor/stripe/stripe-elements.js": {
      "dependencies": [],
      "module": true,
      "conditions": [
        [
          {
            "parameter": "postType",
            "operator": "equals",
            "value": "product"
          }
        ]
      ]
    }
  }
}
```
## Non-enqueued files

Files that don't match the supported extensions (`.php`, `.css`, `.js`) are ignored by SleekByte but can still be included in your snippet folder for organization:

In this example:

- ✅ `index.php`, `styles.css` are automatically enqueued
- ✅ `tests/test-functions.php` is automatically enqueued
- ❌ `README.md`, `usage.md`, `screenshot.png` are ignored (not PHP/CSS/JS)

## Best practices

**Organize by feature** Group related PHP, CSS, and JS files together by functionality rather than file type.

**Use descriptive names** File names should clearly indicate their purpose: `checkout-validation.js` vs `script.js`.

**Leverage nested folders** Don't hesitate to create deep folder structures - SleekByte handles any nesting level.

**Configure when needed** Start with automatic discovery, then add `snippet.json` configuration only when you need specific loading behavior.

**Test loading order** Use different hooks for PHP files that need to run at specific times in the WordPress lifecycle.

The file-based approach gives you maximum flexibility while maintaining the simplicity of automatic discovery and enqueueing.

---

# AI - API Keys

To unlock SleekByte's AI capabilities, you'll need to provide your own API keys from one or more AI providers. This approach gives you complete control over your AI usage while ensuring your data remains private. Rather than routing through SleekByte's servers, your WordPress site communicates directly with the AI providers, keeping your code and conversations secure.

The setup process involves obtaining API keys from your chosen providers and configuring them within SleekByte. Each provider offers different models with unique strengths, so you might choose to set up multiple providers to access the best model for each type of task.

## Understanding API key requirements

API keys are essentially passwords that allow SleekByte to authenticate with AI providers on your behalf. When you make a request through SleekByte, it uses your API key to access the AI models directly. This means you're billed directly by the provider based on your actual usage, giving you transparent cost control.

The benefits of this approach include:

- **Complete data ownership** - Your conversations never pass through third-party servers
- **Transparent billing** - You see exactly what you're paying for with each provider
- **Model flexibility** - Access to different models optimized for various tasks
- **Privacy control** - Your code and conversations remain between you and the AI provider

## OpenAI

OpenAI provides some of the most popular models for code generation, including GPT-4 and its variants. These models excel at understanding context and generating high-quality WordPress code.

1. **Create or access your account**

 - Visit the [OpenAI Platform](https://platform.openai.com/)
- Sign up for a new account or log into your existing one
2. **Generate your API key**

 - Navigate to [https://platform.openai.com/account/api-keys](https://platform.openai.com/account/api-keys)
- Click "Create new secret key"
- **Copy the key immediately** - it won't be shown again
- Store it securely for SleekByte configuration
3. **Add account funding**

 - Visit the [Billing Overview](https://platform.openai.com/account/billing/overview)
- Add credit to your account using "Add to credit balance"
- OpenAI operates on pay-per-use, so you only pay for what you use

## Anthropic

Anthropic's Claude models are particularly strong at understanding complex codebases and providing detailed explanations. These models often excel at debugging and code review tasks, making them valuable for maintaining and improving existing code.

1. **Set up your Anthropic account**

 - Go to the [Anthropic Console](https://console.anthropic.com/)
- Create an account or log into your existing one
2. **Create your API key**

 - Navigate to [https://console.anthropic.com/settings/keys](https://console.anthropic.com/settings/keys)
- Click "Create Key" to generate a new API key
- Copy and store the key securely
3. **Fund your account**

 - Visit [Billing Settings](https://console.anthropic.com/settings/billing)
- Add funds to enable API usage
- Review their pricing structure for cost planning

## Google

Google's Gemini models offer competitive performance and often have different pricing structures that might be more cost-effective for certain types of usage. They're particularly strong at understanding and generating code with large context windows.

1. **Access Google AI Studio**

 - Visit [Google AI Studio](https://aistudio.google.com/apikey)
- Sign in with your Google account
2. **Generate your API key**

 - Click "Create API key" to generate a new key
- Copy the key and keep it private and secure
3. **Configure in SleekByte**

 - The setup process is streamlined with Google's integrated approach
- You can quickly get your API key working with SleekByte's latest Gemini model support

## OpenRouter

OpenRouter is unique because it provides access to dozens of different AI models through a single API. This gives you access to specialized coding models, the latest releases from various providers, and often more competitive pricing.

1. **Create your OpenRouter account**

 - Sign up at [OpenRouter](https://openrouter.ai/) using your preferred method
- Choose from various authentication options
2. **Generate your API key**

 - Visit [OpenRouter Settings](https://openrouter.ai/settings/keys)
- Click "Create Key" to generate your API key
- Store the key securely
3. **Add credits to your account**

 - Use OpenRouter's billing system to add credits
- These credits work across all supported models
- Take advantage of competitive pricing across multiple providers

The advantage of OpenRouter is flexibility—you can experiment with different models for different tasks without managing multiple separate accounts and billing relationships.

## Configuring SleekByte

Once you have your API keys, setting them up in SleekByte is straightforward and secure.

1. **Access SleekByte settings**

 - In your WordPress admin, navigate to the SleekByte section
- Look for "Settings" or "AI Configuration"
2. **Enter your API keys**

 - Find the API Keys section with input fields for each provider: - **OpenAI API Key**
- **Anthropic API Key**
- **Google API Key**
- **OpenRouter API Key**
- Paste your keys into the appropriate fields
3. **Save your configuration**

 - Click the "Save" button next to each field after entering the key
- SleekByte automatically validates each key
- Verify that all keys are working correctly

Your API keys are stored encrypted in your WordPress database, providing security while keeping them readily available for AI requests.

## Security and privacy considerations

The security model of SleekByte's AI integration is designed around privacy and control. Understanding how your data flows helps you make informed decisions about using AI assistance.

### Data flow and privacy

**Direct Communication Model**

- Requests go directly from your WordPress server to the AI provider
- SleekByte never sees your conversations, code, or API keys
- You maintain complete control over your data and usage patterns

**Local Storage Security**

- API keys are encrypted when stored in your WordPress database
- SleekByte follows WordPress security best practices
- Keys are only accessible to your WordPress installation

**Cost and Usage Control**

- You can review usage patterns directly with each provider
- Monitor costs in real-time through provider dashboards
- No markup or hidden fees from SleekByte

## Understanding the model selection

SleekByte comes pre-configured with carefully selected models that excel at code generation and WordPress development tasks. Each provider offers different strengths that complement each other.

### OpenAI

Available models: GPT 4.1, o4 Mini, o3

- Excellent for general code generation and problem-solving
- Strong training on WordPress-specific code patterns
- Great at understanding complex requirements and generating comprehensive solutions
- Reliable performance across a wide range of coding tasks

### Anthropic

Available models: Claude 4 Opus, Claude 4 Sonnet, Claude 3.7 Sonnet, Claude 3.5 Sonnet

- Exceptional at code analysis and debugging
- Provides detailed explanations and reasoning about code decisions
- Particularly helpful for learning and understanding complex implementations
- Strong at maintaining context across long conversations

### Google

Available models: Gemini 2.5 Pro

- Competitive performance with generous context windows
- Effective at working with larger codebases
- Good balance of capability and cost-effectiveness
- Strong integration with Google's development ecosystem

### OpenRouter

Available models: Kimi K2, Qwen3 Coder

- Specialized coding models from various providers
- Access to the latest AI releases as they become available
- Flexibility to experiment with different approaches
- Often more competitive pricing for high-volume usage

## Getting started with AI assistance

With your API keys configured, SleekByte's AI features become available throughout the interface. The AI understands SleekByte's file structure conventions and WordPress best practices, so it can provide assistance that fits naturally with your existing code.

### Initial steps

1. **Start with simple requests** to get familiar with how the AI responds
2. **Experiment with different providers** to understand their strengths
3. **Gradually work up to more complex tasks** as you become comfortable
4. **Monitor your usage** through each provider's dashboard

### What you can do

- **Generate new snippets** by describing features in natural language
- **Send error messages** directly to the AI for debugging assistance
- **Get help with WordPress-specific** coding challenges and best practices
- **Upload files** like design mockups or specifications for implementation
- **Modify existing code** while maintaining your style and patterns

The AI is designed to be a collaborative partner in your WordPress development process, helping you write better code more efficiently while learning WordPress best practices along the way.

---

# AI - Chat

SleekByte's AI chat is a fully agentic assistant that understands your snippet structure and can perform complex operations automatically. Unlike simple chatbots that just answer questions, this AI can read your files, create complete snippets, and call tools to help you build and maintain your WordPress code.

## Understanding the agentic approach

The term "agentic" means the AI can take autonomous actions on your behalf. When you ask for something, it doesn't just provide advice—it actually performs the work. This intelligent system can analyze your existing code, understand your project structure, and make informed decisions about how to implement your requests.

### Automatic context discovery

When you start a new conversation without any specific files selected, the AI becomes your project detective. It automatically examines your snippet collection to understand what you're working with, then uses this information to provide contextually relevant assistance.

The AI follows this process:

1. **Scans your snippet directory** to understand your current project structure
2. **Analyzes existing patterns** in your code organization and naming conventions
3. **Determines optimal placement** for new snippets based on your existing setup
4. **Creates coordinated solutions** that fit seamlessly with your current codebase

For example, if you simply ask "Create a login redirect snippet," the AI will first explore your existing snippets to see if you already have authentication-related code, check how you typically organize your files, and then create a new snippet that fits seamlessly with your existing patterns.

### Intelligent operation levels

The AI adapts its approach based on what you're asking for, working at different levels of granularity:

**Complete snippet creation**

- Generates entire feature structures with organized PHP, CSS, and JavaScript files
- Creates proper snippet.json configuration
- Follows your existing organizational patterns
- Implements WordPress coding standards

**Targeted file modifications**

- Makes specific changes while preserving existing code structure
- Maintains your coding style and patterns
- Updates only what's necessary for the requested changes
- Keeps file relationships and dependencies intact

**Smart code organization**

- Understands SleekByte's file conventions
- Follows WordPress best practices
- Organizes code logically within your existing structure

## Working with context

Context is what makes the AI truly powerful. By understanding which files you're working with, it can provide much more targeted and useful assistance.

### Adding individual files

When you right-click a file in the file browser to add it to your chat context, you're telling the AI "focus on this specific piece of code." The AI gains several important capabilities:

- **Understands the file's purpose** and role in your project
- **Sees relationships** to other parts of your codebase
- **Maintains consistency** with your existing code patterns
- **Provides targeted assistance** specific to that file's functionality

This approach is particularly useful when you're debugging a specific issue or want to enhance a particular file without affecting the broader codebase.

### Working with complete snippets

Adding an entire folder to the context gives the AI a comprehensive view of a complete feature. When all files in a snippet folder are included, the AI automatically recognizes:

- **PHP logic and functionality** across all your PHP files
- **CSS styling and design patterns** in your stylesheets
- **JavaScript interactions and behaviors** in your scripts
- **Configuration settings** in your snippet.json file
- **File relationships** and how they work together

With this holistic understanding, the AI can make coordinated changes across multiple files while ensuring everything works together properly.

### Benefits of proper context

With the right context, the AI becomes remarkably effective at:

- **Maintaining consistency** across your entire codebase
- **Learning your coding patterns** and preferred approaches
- **Preserving naming conventions** and organizational structures
- **Making changes that feel natural** rather than foreign to your existing code

## Error resolution made simple

One of the most powerful features is the ability to send errors directly from SleekByte to the AI chat. When you encounter an error, instead of trying to debug it yourself, you can right-click the file in the file browser and select "Fix Error" to send it to the AI along with the relevant file context.

The AI doesn't just look at the error message—it analyzes the error within the full context of your WordPress environment and SleekByte setup. This comprehensive analysis includes:

- **WordPress function availability** at different hooks
- **Common WordPress development pitfalls** and their solutions
- **SleekByte configuration issues** in snippet.json files
- **File relationship problems** that might cause conflicts
- **Performance considerations** for the proposed fixes

## Understanding AI tool calls

Every action the AI takes is completely transparent. When it creates files, modifies code, or performs any operation, you can expand the tool call details to see exactly what happened and why.

### What tool call details show you

**Arguments used**

- Exact parameters passed to each function
- File paths and content being created or modified
- Configuration options selected

**Results returned**

- Success or failure status of each operation
- Files created or modified
- Any warnings or notes about the changes

### Learning from AI decisions

The tool call transparency serves multiple purposes:

- **Educational value** - See WordPress and SleekByte best practices in action
- **Debugging assistance** - Understand what went wrong if something doesn't work
- **Process understanding** - Learn how complex operations are broken down
- **Quality verification** - Review changes before they're applied

## Enhanced communication with file uploads

Modern development often involves translating designs into code, following specifications, or adapting existing solutions. SleekByte's AI can work with various file types to bridge these gaps effectively.

### Supported file types and use cases

**Images**

- Design mockups and UI screenshots for implementation
- Error screenshots for debugging context
- Wireframes and layout guidance
- Style reference materials

**Documents**

- PDF specifications and requirements
- Feature descriptions and project documentation
- Style guides and brand guidelines
- Technical documentation from other projects

**Code Files**

- Reference implementations to adapt
- Configuration examples to replicate
- Code snippets to improve or modernize

### How the AI processes uploads

**Visual design analysis** When you upload design files, the AI can extract valuable information:

- **Color schemes and palettes** for CSS generation
- **Layout structures** for HTML organization
- **Typography choices** for font and spacing decisions
- **UI component identification** for implementation planning

**Document processing** The AI processes text-based documents to understand:

- **Project requirements** and feature specifications
- **Technical constraints** and implementation guidelines
- **Style preferences** and coding standards
- **Integration requirements** with existing systems

### Practical upload examples

**Design-to-code workflow**

*Here's a design mockup (upload image). Create a snippet that implements this login form with the same styling and layout.*

The AI will analyze the design, extract visual elements, and generate a complete snippet with proper HTML structure, matching CSS styles, and any necessary JavaScript interactions.

**Specification implementation**

*Use this requirements document (upload PDF) to create a WooCommerce integration snippet.*

The AI will read the specifications, understand the requirements, and create a structured implementation that follows the documented specifications.

## Best practices for effective AI collaboration

Getting great results from the AI is about communication and context management. The more effectively you can convey your needs and provide relevant information, the better the assistance you'll receive.

**Be specific about your goals**

- Instead of: *Fix the checkout*
- Try: *Add error handling to the WooCommerce checkout process when payment gateways fail*

**Provide implementation context**

- Mention any specific WordPress plugins or themes you're working with
- Describe any custom functionality that might be relevant
- Explain any constraints or requirements for the solution

**Iterate gradually**

- Start with basic functionality and request enhancements
- Build complex features step by step
- Test each iteration before adding more complexity

---

# Hooks - PHP

SleekByte provides several PHP hooks that allow you to customize its behavior and extend its functionality. These hooks give you control over snippet loading, default configurations, and file discovery.

## snippets/paths

This filter allows you to add custom directories where SleekByte will look for snippets. By default, SleekByte uses the uploads directory, but you can add theme directories, plugin directories, or any custom location.

```php
add_filter('sleekByte/snippets/paths', function ($sources) {
  // Add custom snippets directory
  $sources[] = [
    'name' => 'Custom Snippets',
    'path' => get_template_directory() . '/snippets',
    'sort' => 50,
  ];

  // Add another directory for client-specific snippets
  $sources[] = [
    'name' => 'Client Snippets',
    'path' => WP_CONTENT_DIR . '/client-snippets',
    'sort' => 75,
  ];

  return $sources;
});
```
**Parameters:**

- `$sources` (array) - Array of snippet source directories

**Source Array Structure:**

- `name` (string) - Display name for the source in SleekByte interface
- `path` (string) - Absolute path to the directory containing snippets
- `sort` (int) - Sort order (lower numbers appear first, default is 100)

This hook is particularly useful for:

- Adding theme-specific snippet directories
- Creating client-specific snippet collections
- Organizing snippets by functionality or project
- Making snippets portable across WordPress installations

## snippets/defaults/context

This filter allows you to change the default context for snippets that don't specify a context in their `snippet.json` configuration. The default context determines where snippets load (frontend, admin, or block-editor).

```php
add_filter('sleekByte/snippets/defaults/context', function ($defaultContext) {
  // Change default context to load snippets in admin by default
  return 'admin';

  // Or return an array for multiple contexts
  // return ['frontend', 'admin'];
});
```
**Parameters:**

- `$defaultContext` (string) - The default context, initially set to 'frontend'

**Available Contexts:**

- `frontend` - Public-facing pages (default)
- `admin` - WordPress admin area
- `block-editor` - Gutenberg block editor

This hook is useful when:

- Most of your snippets are admin-focused
- You want to change the global default behavior
- You're building a site where snippets primarily serve internal users

## snippets/defaults/hook

This filter allows you to change the default WordPress hook for PHP file execution. This affects all snippets that don't specify a hook in their `snippet.json` configuration.

```php
add_filter('sleekByte/snippets/defaults/hook', function ($defaultHook) {
  // Change default hook to 'init' instead of 'wp'
  return 'init';

  // This affects all snippets that don't specify a hook
  // in their snippet.json configuration
});
```
**Parameters:**

- `$defaultHook` (string) - The default hook, initially set to 'wp'

**Common WordPress Hooks:**

- `wp` - After WordPress loads (default)
- `init` - During WordPress initialization
- `wp_head` - In the document head
- `wp_footer` - Before closing body tag
- `admin_init` - Admin area initialization
- `after_setup_theme` - During theme setup

This hook is beneficial when:

- You need snippets to run earlier in the WordPress loading process
- Most of your snippets require a specific execution timing
- You want to optimize performance by running code at the appropriate time

## Hook usage examples

### Complete custom setup

```php
// Add custom snippet directories
add_filter('sleekByte/snippets/paths', function ($sources) {
  $sources[] = [
    'name' => 'Theme Snippets',
    'path' => get_template_directory() . '/sleek-snippets',
    'sort' => 10,
  ];

  $sources[] = [
    'name' => 'Must-Use Snippets',
    'path' => WPMU_PLUGIN_DIR . '/snippets',
    'sort' => 5,
  ];

  return $sources;
});

// Change default context to admin
add_filter('sleekByte/snippets/defaults/context', function ($defaultContext) {
  return 'admin';
});

// Change default hook to init
add_filter('sleekByte/snippets/defaults/hook', function ($defaultHook) {
  return 'init';
});
```
### Conditional default context

```php
add_filter('sleekByte/snippets/defaults/context', function ($defaultContext) {
  // Use admin context for staging sites, frontend for production
  if (wp_get_environment_type() === 'staging') {
    return 'admin';
  }

  return 'frontend';
});
```
### Environment-based snippet paths

```php
add_filter('sleekByte/snippets/paths', function ($sources) {
  // Add development snippets only in development environment
  if (wp_get_environment_type() === 'development') {
    $sources[] = [
      'name' => 'Development Snippets',
      'path' => WP_CONTENT_DIR . '/dev-snippets',
      'sort' => 1,
    ];
  }

  // Add production-only snippets
  if (wp_get_environment_type() === 'production') {
    $sources[] = [
      'name' => 'Production Snippets',
      'path' => WP_CONTENT_DIR . '/prod-snippets',
      'sort' => 200,
    ];
  }

  return $sources;
});
```
These hooks provide powerful ways to customize SleekByte's behavior to match your specific development workflow and project requirements.

---