# General
Welcome to SleekAI, the ultimate AI plugin for WordPress. SleekAI integrates powerful AI capabilities into your WordPress site, offering versatile features for both administrators and visitors.
## Key Features
### Flexible AI Integration
SleekAI works with multiple AI providers:
- OpenAI
- Anthropic
- Google
- OpenRouter
You can use your own API keys, ensuring you only pay for what you use and maintain full control over your AI interactions.
### Powerful Chat Interfaces
SleekAI offers two main ways to interact with AI:
1. **Direct Chats**: Have conversations with AI directly in your WordPress admin area
2. **Customizable Chatbots**: Create public-facing chatbots that can be embedded anywhere on your site
### Context-Aware AI
Our chatbots can access and utilize dynamic WordPress data, including:
- Page content
- User information
- Custom fields
- WooCommerce product details
- Post categories and tags
- Custom post type data
### AI Everywhere
Access AI assistance in any text field across your WordPress site with a simple command. Perfect for quick content generation, editing, or getting AI help wherever you need it.
### Security and Performance
- Rate limiting to prevent abuse
- Prompt injection protection
- Streaming responses for real-time interaction
- Session management for persistent conversations
- Optional conversation logging
### Customization Options
- Adjustable AI models and temperature settings
- Custom system instructions
- Themed chat interfaces
- Brandable chatbot widgets
- Preset prompts for common tasks
## Getting Started
Want to see SleekAI in action? Check out our [demo](https://app.instawp.io/launch?t=sleekai-demo&d=v2).
For support or questions, reach out to us at [hi@sleekwp.com](mailto:hi@sleekwp.com).
---
# Settings - Model
The Model Settings section allows you to configure how your AI assistant behaves across all chats. These settings serve as defaults for new conversations but can be adjusted per chat as needed.
## Model Selection
The available models in the dropdown menu depend on which API keys you have configured in your settings. SleekAI supports multiple providers: OpenAI, Anthropic, Google, and OpenRouter. Adding API keys for any of these providers will automatically display their available models in the dropdown.
OpenRouter is particularly interesting as it provides access to various AI models through a single API key. This can be a convenient option if you want to experiment with different providers without managing multiple API keys.
Each provider offers models with different capabilities and price points. More powerful models excel at complex tasks but come at a higher cost, while lighter models are perfect for general conversations and simpler tasks. Consider your specific needs and budget when selecting a model.
## Temperature Control
Temperature is a powerful setting that determines how creative or focused your AI's responses will be. Think of it as a spectrum: at 0.0, the AI provides consistent, deterministic responses ideal for documentation, coding, and fact-based tasks. At 1.0, it generates more creative and varied outputs, perfect for brainstorming and creative writing.
For most general conversations and content writing, a middle ground of 0.3-0.7 works well. This provides a good balance between creativity and reliability. Experiment with different values to find what works best for your specific use case.
## Streaming Responses
The streaming toggle controls how responses appear in your chat interface. When enabled, you'll see the AI's response appear word by word in real-time, creating a more engaging and interactive experience. This is particularly valuable for longer conversations where you want to see the thought process unfold.
While streaming might use slightly more resources, it provides immediate feedback and allows you to start processing the response before it's complete. When disabled, responses appear all at once after completion, which might be preferable for shorter, quick exchanges.
For more information on streaming, check out the [Chat Interface Guide](https://fabrikat.local/sleek/ai/documentation/streaming).
## System Instructions
System Instructions are powerful directives that shape how your AI assistant behaves. This field accepts natural language instructions that define the AI's role, tone, and capabilities. You might instruct it to act as a technical writer, maintain a specific tone of voice, or follow particular response formats.
For example, you could write: "You are a helpful customer service representative for our software company. Maintain a professional but friendly tone, and always provide step-by-step solutions when troubleshooting." The AI will then consistently follow these guidelines in all conversations.
---
# Settings - Prompts
The Prompts section allows you to manage conversation starters for your AI chats. These prompts define specific roles and behaviors for the AI, helping you get the most relevant and focused responses for your needs.
## Pre-made Prompts
SleekAI comes with a collection of carefully crafted prompts, particularly focused on WordPress development and management. These prompts are categorized and tagged for easy filtering, covering roles such as:
- WordPress Security Expert
- WordPress Troubleshooter
- WordPress Theme Designer
- WordPress Plugin Creator
- WordPress Developer
Each prompt contains detailed instructions that guide the AI in assuming the specified role and providing expert-level assistance in that domain.
## Managing Prompts
The prompts interface provides several ways to organize and find the right prompt:
- Filter by tag: Quickly find prompts by their category (wordpress, programming, technical, etc.)
- Search: Use the search bar to find prompts by keyword
- System/User toggle: Switch between system-provided prompts and your custom ones
## Creating Custom Prompts
The "New" button allows you to create your own custom prompts. When creating a prompt, consider including:
- A clear, descriptive title
- Detailed instructions for the AI's role
- Specific areas of expertise or focus
- Any constraints or guidelines
- Relevant tags for organization
Custom prompts are saved in the "User" section and can be reused across different conversations.
### Placeholders
Placeholders enable the inclusion of dynamic content in your prompts. They serve to populate your prompts with user-specific input.
To integrate a placeholder into a prompt, enclose the placeholder name within percent signs (`%`). For instance, a sample prompt using a placeholder would be:
```html
*I want you to emulate %character% from %movie/book/anything%. Respond and
converse as %character% would, using their tone, mannerisms, and vocabulary.
Provide responses only as %character% without any explanations. Assume you
possess all the knowledge of %character%. Start with the sentence '%sentence%'.*
```
## Best Practices
When using or creating prompts:
- Start with pre-made prompts to understand effective prompt structure
- Be specific about the expertise level and knowledge domain required
- Include relevant context or background information
- Use tags effectively to organize your custom prompts
- Test prompts with various queries to ensure they produce desired results
---
# Settings - Everywhere
Everywhere mode allows you to send prompts to the AI from any input field on the page.
## Setup
To enable Everywhere mode, navigate to the Sleek AI settings page and enable it in the "Everywhere" tab.
## Usage
To invoke the AI, simply type `/ai` followed by your query. After pressing `shift`, the request will be sent for completion, and the result will be directly inserted as the value of the input field.
This feature is available across all inputs fields in the admin area including Bricks, Elementor and Oxygen.
## Customizing
### Command
To customize the command with which Everywhere is triggered, simply set a custom value on the Everywhere settings page.
For example, setting the command to `@ai` would trigger the AI whenever the user types `@ai` instead of the default `/ai` command.
### Presets
Additionally, you can define completely custom presets for toggling Everywhere with a custom prompt. Simply click the "Add preset" button and enter a command with the according prompt you want to use.
For example, setting a custom preset command to `@shorten` and a prompt of `Shorten this text: {content}` would trigger Everywhere whenever the user types `@shorten` and would use the prompt `Shorten this text: {content}` instead of the default prompt.
The `{content}` placeholder will be replaced with the content of everything that comes after the custom preset command.
---
# Settings - Plugins
The Plugins settings section allows you to configure which AI model will be used specifically for plugin-related features. This works similarly to the main Model settings, but is dedicated to plugin generation tasks.
## Model Selection
Just like in the main Model settings, the available models depend on your configured API keys. You can choose from OpenAI, Anthropic, Google, or OpenRouter models, with the same considerations about capabilities and pricing.
## Streaming
The streaming option functions identically to the main Model settings - when enabled, you'll see the plugin-related responses appear in real-time. As with other features, streaming availability depends on your host support.
---
# Settings - API Keys
After installing SleekAI, you will need to obtain an API key from OpenAI, Anthropic, Google Gemini, or OpenRouter to use the plugin on your site. This key is used to authenticate requests to the respective API provider.
## OpenAI
1. Go to the [OpenAI API](https://platform.openai.com/api-keys) page.
2. Click the "Create new secret key" button.
3. Give your key a name and click "Create".
4. Copy the key and paste it into the "API Key" field on the SleekAI settings page:
1. Click "Set".
## Anthropic
1. Go to the [Anthropic API](https://console.anthropic.com/account/keys) page.
2. Click the "Create Key" button.
3. Give your key a name and click "Create".
4. Copy the key and paste it into the "API Key" field on the SleekAI settings page:
1. Click "Set".
## Google Gemini
1. Go to the [Google AI Studio](https://aistudio.google.com/apikey) page.
2. Sign in with your Google account or create one if needed.
3. Click the "Create API key" button.
4. Copy the key and paste it into the "API Key" field on the SleekAI settings page:
1. Click "Set".
## OpenRouter
1. Go to the [OpenRouter](https://openrouter.ai/keys) page.
2. Sign in with your preferred authentication method.
3. Click the "Create Key" button.
4. Copy the key and paste it into the "API Key" field on the SleekAI settings page:
1. Click "Set".
---
# Settings - License
The License section is where you activate your plugin by entering your license key. A valid license ensures you receive automatic updates and have access to all premium features.
## Adding Your License Key
1. Enter your license key in the provided field
1. Click the "Set Key" button to validate and activate your license
Once activated, your license key will be securely stored and automatically validate your installation for updates.
## License Status
After entering your key, the system will automatically verify its validity.
---
# Chat
Chats are the cornerstone of SleekAI. Essentially, they act as a mini ChatGPT within your WordPress admin area.
 After [configuring your API key](https://fabrikat.local/sleek/ai/documentation/settings/api-keys), no further setup is required to start utilizing Chats.
## Tags
Tags help categorize your Chats, making it easier to organize and filter them in the Chats list. Multiple tags can be assigned to a single Chat.
To modify a Chat's tags, click the three-dot button in the top-right corner of the Chat and use the select control to add or create new tags.
---
# Chatbots - General
Chatbots in SleekAI allow you to create intelligent, context-aware conversational interfaces that can be embedded anywhere on your WordPress site. Unlike standard AI chats, chatbots are designed to be public-facing and can dynamically adapt their responses based on the context of where they're displayed.
## Understanding SleekAI Chatbots
What makes SleekAI chatbots powerful is their ability to access and utilize dynamic data from your WordPress site. They can:
- Access current page content
- Use user information when available
- Read custom fields and meta data
- Incorporate product details on WooCommerce pages
- Reference post categories and tags
- Utilize custom post type data
This context-awareness means your chatbot can provide highly relevant responses based on where it appears on your site.
## Creating a Chatbot
To create a new chatbot, navigate to:
Enter a name for your chatbot, and you'll be redirected to the configuration page where you can customize its behavior, appearance, and deployment settings.
## Integration Options
Chatbots can be integrated into your site in multiple ways:
- As a floating widget on specific pages or site-wide
- Embedded directly within content using shortcodes
- Programmatically using PHP functions
- In the WordPress admin area for internal use
Each chatbot can be configured independently, allowing you to create different chatbots for different purposes or sections of your site.
---
# Chatbots - Data
The data for the initial system message is crucial as it serves as instructions for the chatbot's operation.
### Sources
Dynamic data can be incorporated into the system message. We currently support the following data sources:
- **Text**: A simple text field.
- **Query**: A query to the WordPress database. This source is special as it allows you to loop through the results in your system message.
- **Post title**: The title of a post.
- **Post content**: The content of a post.
- **Bricks content**: The content of a Bricks page. (if Bricks is installed)
- **Elementor content**: The content of an Elementor page. (if Elementor is installed)
- **Oxygen content**: The content of an Oxygen page. (if Oxygen is installed)
- **Postmeta**: Metadata associated with a post.
- **Taxonomy**: A post's taxonomy.
- **Term**: A term within a taxonomy.
- **User**: User data.
- **Usermeta**: Metadata associated with a user.
To use custom data sources, use the `sleekAi/chatbot/source` filter.
```php
add_filter('sleekAi/chatbot/sources', function ($data) {
$data[] = [
'id' => 'customSource',
'label' => 'Custom Source',
'value' => functionToGetCustomData(),
];
return $data;
});
```
### Variables
Data query results are stored in variables. For instance, you could save the title of a post as `postTitle`. In the system message, you can reference the variable using curly braces: `{postTitle}`. This will dynamically replace `{postTitle}` with the actual title of the specified post when the system message is sent.
You can define multiple data sources, and each will be available as a variable. For example, if you add a "Post title" source and name the variable `myPostTitle`, and a "User" data source named `currentUserInfo` with the meta key `data.user_email`, your system message can use both:
```html
The title of the current post is {myPostTitle}.
The current user's email is {currentUserInfo}.
```
### Meta Keys
For data types like postmeta and usermeta that return an object, you must define a meta-key. This key specifies which object value to retrieve.
For instance, to fetch the current user's email, select the `user` data source and set the meta-key to `data.user_email`. You can then assign a variable name like `userEmail` to this source.
### System Message
The system message, which is the first message received by the chatbot, should be a clear instruction to guide its behavior. All previously defined data variables can be included in this message. The more specific and context-rich your system message, the better the chatbot will be able to assist your users according to your defined role and knowledge.
Consider the following example where we want the chatbot to be aware of the current post title and the current user's display name:
1. Add a "Post title" data source, variable name: `currentPostTitle`.
2. Add a "User" data source, variable name: `currentUserDisplayName`, meta key: `data.display_name`.
#### Example System Instruction:
```html
You are an assistant helping users with the content on this page.
The current page title is: {currentPostTitle}.
The user you are chatting with is: {currentUserDisplayName}.
Be polite and refer to them by their name if possible.
When discussing the page content, try to relate it back to "{currentPostTitle}".
```
#### Rendered System Instruction Example
(assuming post title is "My Awesome Product" and user is "John Doe")
```html
You are an assistant helping users with the content on this page. The current page title is: My
Awesome Product. The user you are chatting with is: John Doe. Be polite and
refer to them by their name if possible. When discussing the page content, try
to relate it back to "My Awesome Product".
```
### The Query Source
The "Query" source type is particularly powerful. It allows you to fetch multiple posts based on your criteria (post types, terms, search value) and then loop through these posts in your system message.
When configuring a Query source, you define a template for each post found by the query. Since SleekAI returns the full post object for each item, you will access its properties using nested syntax like `{post.post_title}`, `{post.post_content}`, `{post.ID}`, `{post.permalink}`, etc. The "Show available values" link in the interface helps discover all possible dynamic tags for the post object.
If the query returns multiple posts, each rendered template output will be separated by three dashes (---). This allows you to supply a cleanly structured list of items to the language model.
Let's look at a more thorough example. Suppose you want to provide the chatbot with a list of recent projects, including their titles, a short description (excerpt), and a direct link.
1. Create a new Data Source of type "Query".
2. Name the variable `recentProjects`.
3. Configure the query to fetch posts of type 'project', ordered by date descending, limiting to 3 results.
4. In the "Template" field, enter:
```html
Project Title: {post.post_title}
Description: {post.post_excerpt}
Link: {post.permalink}
```
(Note: Ensure each dynamic tag like `{post.post_title}` is one of the "available values" for your post type by inspecting the post object.)
Now, in your chatbot's main system instruction, you can use the `{recentProjects}` variable:
```html
You are a portfolio assistant. You have been provided with a list of recent projects below. When a user asks about recent work, use this information to answer.
Recent Projects:
{recentProjects}
Remember to be helpful and informative.
```
**Rendered System Instruction Example:**
If the query finds three projects:
- Project Alpha (post_title: "Project Alpha", post_excerpt: "A groundbreaking finance app.", permalink: "/projects/alpha")
- Project Beta (post_title: "Project Beta", post_excerpt: "An e-commerce platform for artisans.", permalink: "/projects/beta")
- Project Gamma (post_title: "Project Gamma", post_excerpt: "A community portal for local artists.", permalink: "/projects/gamma")
The rendered `{recentProjects}` block in the system instruction would look like this:
```html
Project Title: Project Alpha
Description: A groundbreaking finance app.
Link: /projects/alpha
---
Project Title: Project Beta
Description: An e-commerce platform for artisans.
Link: /projects/beta
---
Project Title: Project Gamma
Description: A community portal for local artists.
Link: /projects/gamma
```
This demonstrates how the template is applied to each post and how the "---" separator joins them, creating a structured block of information for the LLM. This allows for highly dynamic and context-aware system messages, tailoring the chatbot's initial instructions based on real-time data from your WordPress site.
---
# Chatbots - Conditions
By default, the chatbot will not appear anywhere. Set conditions to specify where the chatbot should be visible:
- **Is Admin**: Displays the chatbot in the admin area.
- **Post Type**: Displays the chatbot on pages of a specific post type.
- **Post**: Shows the chatbot on specific posts.
- **Post Status**: Activates the chatbot on posts with specific statuses.
- **Post Template**: Displays the chatbot on pages using a specific template.
- **Taxonomy**: Shows the chatbot on pages related to a specific taxonomy.
- **Term**: Displays the chatbot for specific terms.
- **User Logged In**: Shows the chatbot when a user is logged in.
- **User Role**: Restricts the chatbot display to users with specific roles.
- **Is Home**: Displays the chatbot on the homepage.
- **Is Front Page**: Shows the chatbot on the front page.
- **Is Page**: Displays the chatbot on static pages.
- **Is Single**: Shows the chatbot on single posts for any post type.
- **Is Singular**: Activates the chatbot on any single post, page, or attachment.
- **Is Search**: Displays the chatbot on search results pages.
- **Is Archive**: Shows the chatbot on archive pages (e.g., author or date archives).
- **Is Post Type Archive**: Activates the chatbot on archive pages for specific post types.
- **Is Category**: Displays the chatbot on category pages.
- **Is Tag**: Activates the chatbot on tag pages.
- **Is Taxonomy**: Shows the chatbot on custom taxonomy archive pages.
- **Is Author**: Displays the chatbot on author archive pages.
- **Is Date**: Activates the chatbot on date-based archives.
- **Is Year**: Shows the chatbot on year-based archives.
- **Is Month**: Displays the chatbot on month-based archives.
- **Is Day**: Displays the chatbot on day-based archives.
- **Is Time**: Activates the chatbot on time-specific query pages.
- **Is Attachment**: Displays the chatbot on attachment (media) pages.
- **Is 404**: Activates the chatbot on 404 error pages.
To use custom conditions, use the `sleekAi/chatbot/condition` filter.
```php
add_filter('sleekAi/chatbot/conditions', function ($data) {
$data[] = [
'id' => 'isCustomUrl',
'label' => 'Custom URL Check',
'value' => str_contains($_SERVER['REQUEST_URI'], '?customParam'),
];
return $data;
});
```
When using boolean conditions, the id has to be prefixed with `is`.
Alternatively, you can use the shortcode displayed in the conditions section to render the chatbot anywhere you want.
## Embedding
Any chatbot can be embedded as a full size chat widget in on any page using the shortcode in combination with the `type` attribute.
```php
[sleek-ai-chatbot id="1" type="chat"];
```
This will render the chatbot in a full size chat widget on the page.
---
# Chatbots - Security
The Security section provides essential settings to protect your chatbot from misuse and ensure it maintains its intended behavior.
## Closing Guideline
The Closing Guideline feature adds an extra layer of security against prompt injection attempts. When enabled, SleekAI automatically appends a closing instruction to the end of the system message, helping ensure the chatbot:
- Maintains its designated role throughout the conversation
- Resists attempts to override its core instructions
- Stays within its intended behavioral boundaries
This is particularly important for public-facing chatbots where users might attempt to manipulate the AI's behavior.
## Rate Limit
The Rate Limit feature helps protect your chatbot from abuse and manages resource usage. When enabled, it implements the following restrictions:
- Limits each IP address to 20 requests per minute
- Prevents overloading through excessive requests
- Ensures fair usage across all users
- Protects against potential denial-of-service attempts
This is crucial for public chatbots to maintain stable performance and prevent abuse of your API resources.
---
# Chatbots - Model
The Model section allows you to configure which AI model powers this specific chatbot. These settings work similarly to the main Model settings but are specific to this chatbot instance.
## Model Selection
Just like in the main Model settings, the available models depend on your configured API keys. You can choose from OpenAI, Anthropic, Google, or OpenRouter models, with the same considerations about capabilities and pricing.
## Temperature
The temperature setting controls how creative or focused your chatbot's responses will be, working exactly like the main temperature control. Lower values (closer to 0) provide more consistent responses, while higher values (closer to 1) allow for more creative variations.
## Streaming
The streaming option functions identically to the main Model settings - when enabled, you'll see the chatbot's responses appear in real-time. As with other features, streaming availability depends on your host support.
## Assistants
Assistants leverage OpenAI's [Assistants API](https://platform.openai.com/docs/assistants/overview?context=with-streaming) to generate responses.
Key features of Assistants include:
- **Stateful Conversations**: Assistants remember past interactions, allowing SleekAI to avoid resending the entire conversation context with each request.
- **Files**: Assistants can manage up to 10,000 files, ideal for handling large datasets.
- **Static Instruction**: As entities on OpenAI's servers, Assistants cannot use dynamic data variables in their initial instructions.
### Getting Started
To begin using Assistants, activate the Assistant feature in the `Provider` tab of your chatbot's settings. Once activated, save your chatbot to create an Assistant associated with it. You will see the Assistant ID upon successful creation.
### Files
A new tab labeled `Files` will now appear in your chatbot's settings, displaying all files associated with your OpenAI account.
#### Uploading Files
To upload a file, click the `Upload a file` button. Refer to the [supported file formats](https://platform.openai.com/docs/assistants/tools/file-search/supported-files) for more details.
#### Creating Files
Alternatively, you can also create a `.txt` file using a `WP_Query` and automatically upload it to the Assistant. This is useful for utilizing large datasets. Start by clicking the `Add dataset` button and naming your dataset. This name will also serve as the filename.
Upon selecting the posts you want to include in the dataset, you have to define a template for the dataset. The template is a string that will be used to format the data from the posts. The template can include any of the post's fields using curly braces.
Let's take the following template as an example:
```html
Title: {post_title}
Content: {post_content}
```
This would loop through the selected posts and generates the following content:
`Title: Post Title #1` `Content: Post Content #1` `Title: Post Title #2` `Content: Post Content #2` `...`
After reviewing your selections, click the `Review and create file` button to preview the complete content in a modal. If satisfied, click `Create` to finalize the file, which will then appear in the file list at the top of the page.
Finally, select the file by clicking on it (a checkmark will appear) and save your chatbot.
---
# Chatbots - Widget
The Widget section allows you to customize how your chatbot appears and behaves on your website. You can adjust both the visual appearance and interaction settings to match your site's design and user experience requirements.
## Chat Interface
### Welcome Message
Set the initial message users see when they first open the chatbot. This helps establish the chatbot's purpose and tone from the start.
### Theme
Choose between different visual themes for your chatbot interface. The "Light" theme offers a clean, bright appearance suitable for most websites.
### Name AI
Customize the name displayed for your AI chatbot. This helps personalize the experience and align with your brand identity.
### Input Text
Customize the placeholder text shown in the message input field. This can help guide users on how to interact with the chatbot.
## Session Settings
### Chat History
Enable "Save chat history in session storage" to maintain conversation context during page navigation. The chat history will persist until the browser tab is closed, providing a seamless experience for users exploring your site.
## Visual Customization
### Logo
Add your brand identity to the chatbot by configuring the logo URL.
### Presets
Configure pre-established prompts that users can quickly access to start specific types of conversations. These serve as conversation starters and help guide users toward common queries or topics.
## Widget Behavior
### Keep Widget Open
Toggle this option to keep the chatbot permanently visible at the bottom of the page. This is useful during configuration or when you want the chat interface to be consistently available.
A "Reset to default" option is available to quickly restore the original widget settings if needed.
---
# Chatbots - Logs
The Logs section allows you to track and review conversations that users have with your chatbot. This feature is particularly useful for monitoring chatbot performance, understanding user needs, and improving your chatbot's effectiveness.
## Enabling Logs
The logging feature can be activated using the Enable toggle. When enabled, SleekAI will record all conversations that users have with your chatbot. This includes:
- User messages
- Chatbot responses
## Viewing Logs
When logging is enabled, conversations are displayed in a table format below the settings. The log table provides a chronological view of all chatbot interactions, making it easy to:
- Review conversation history
- Monitor chatbot usage
- Identify common user queries
## Privacy Considerations
When enabling logs, consider:
- Informing users that their conversations are being recorded
- Reviewing and following applicable privacy regulations
- Regularly reviewing and cleaning up old logs
---
# Chatbots - Styling
Since the chatbot widget needs to behave and look the same on all possible WordPress configurations, it is built in a special way:
- A chatbot button loads all necessary assets lazily on click
- After loading, the actual widget loads inside an iframe, making sure that outer styles are not leaking into the chatbot styles
- The original chatbot button is hidden and replaced with the iframe button
To make sure that the button will always look the same, before and after the iframe is loaded, SleekAI provides a `sleekAi/chatbot/markup` filter and a variety of CSS variables to customize the button.
```php
add_filter('sleekAi/chatbot/markup', function ($markup) {
$markup .= '';
return $markup;
});
```
All of those options can also be configured in the widget panel of each chatbot.
---
# Chatbots - API
Completely new to Chatbots? Checkout the [Chatbot marketing page](https://fabrikat.local/sleek/ai/features/chatbots/) to learn more. SleekAI allows you to create chatbots programmatically using a simple API.
## Rendering
Chatbots can be rendered using the `sleekAi_render_chatbot` function.
```php
sleekAi_render_chatbot([
'data' => [
'variables' => [
'name' => wp_get_current_user()->display_name,
'content' => get_the_content(),
'brand' => get_field('brand')
],
'instruction' => 'You are a chatbot on my site,
the content of the current page is {content}.
The brand of the current product is {brand}.
Currently, you are chatting with a customer called {name},
help him to solve his problem.',
]);
```
As you see above, the `instruction` key supports the same `{variables}` syntax like in the UI. Dot notation is also supported, e.g. `{user.first_name}`.
All possible options are listed below:
```php
sleekAi_render_chatbot([
'key' => 'my-chatbot', // required if you want to hook into a chatbot
'data' => [
'variables' => [],
'instruction' => ''
],
'security' => [
'guideline' => false
],
'provider' => [
'openai' => [
'model' => 'gpt-4',
'temperature' => 0.2,
'stream' => false
]
],
'widget' => [
'general' => [
'fullscreen' => true
],
'position' => [
'alignment' => 'right',
'distance' => '16px'
],
'button' => [
'type' => 'button', // 'button' or 'logo'
'text' => 'Chat with AI',
'textColor' => '#000000'
'backgroundColor' => '#ffffff',
'borderColor' => '#000000',
'borderRadius' => '8px',
'fontSize' => '14px'
'logo' => [
'url' => '',
]
],
'chat' => [
'initialMessage' => 'Hi, I am a chatbot',
'theme' => 'light',
'nameAi' => 'SleekAI',
'inputText' => 'Send a message',
'presets' => [
'label' => 'Quickstart',
'items' => [
'How can I use SleekAI?',
'What is SleekAI?',
"What's the difference between SleekAI and OpenAI?",
]
]
],
'logo' => [
'url' => '',
]
]);
```
## Filters
It is possible to adjust the chatbot data before it is being rendered. This can be done using the `sleekAi/chatbot` filter.
```php
add_filter('sleekAi/chatbot', function ($chatbot) {
$chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';
return $render;
});
```
### By ID
If you want to hook into a specific chatbot created in the admin dashboard, you can use the `sleekAi/chatbot/id={id}` filter.
```php
add_filter('sleekAi/chatbot/id=1', function ($chatbot) {
$chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';
return $render;
});
```
### By Key
Hooking into a programmatic chatbot can be done using the `sleekAi/chatbot/key={key}` filter. The key is defined inside the arguments array when using the `sleekAi_render_chatbot` function.
```javascript
add_filter('sleekAi/chatbot/key=my-chatbot', function ($chatbot) {
$chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';
return $render;
});
```
## JavaScript API
The chatbot can be controlled using the `window.SleekAI.chatbot` object. The following methods are available:
- `window.SleekAI.chatbot.open()` Opens the chatbot
- `window.SleekAI.chatbot.open({ fullscreen: true })` Opens the chatbot in fullscreen mode
- `window.SleekAI.chatbot.close()` Closes the chatbot
- `window.SleekAI.chatbot.hide()` Hides the chatbot
- `window.SleekAI.chatbot.show()` Shows the chatbot
All methods optionally accept an `index` parameter when working with multiple chatbots: `window.SleekAI.chatbot.open({ index: 2 })`
```javascript
// Open chatbot after 5 seconds
setTimeout(() => {
SleekAI.chatbot.open();
}, 5000);
// Custom close button
document.querySelector('.sleek-ai-chatbot__close').addEventListener('click', () => {
SleekAI.chatbot.close();
});
// Hide chatbot, for example when opening another modal
SleekAI.chatbot.hide();
// Show chatbot again
SleekAI.chatbot.show();
// When working with multiple chatbots
SleekAI.chatbot.open({ index: 2 }); // Opens second chatbot
SleekAI.chatbot.close({ index: 2 }); // Closes second chatbot
```
---
# Plugins
SleekAI's Plugin Generator allows you to create WordPress plugins using natural language prompts. Simply describe what you want your plugin to do, and SleekAI will generate a fully functional plugin for you.
## Getting Started
To create a new plugin, navigate to the Plugins section.
Enter a natural language description of your desired plugin functionality. For example:
"Create a plugin that adds a customizable notification bar at the top of the website. It should have options for background color, text color, and the ability to set different messages for different pages."
## Preview Environment
Before deploying to your site, you can preview and test your generated plugin in a safe sandbox environment powered by [WordPress Playground](https://wordpress.org/playground/). This allows you to:
- Test the plugin functionality
- Review the generated code
- Verify settings and options
- Ensure compatibility
- Make adjustments if needed
The sandbox environment is completely isolated from your live site, making it safe to experiment with different plugin configurations.
## Deployment
Once you're satisfied with your generated plugin:
1. Click the `Deploy` button
2. SleekAI will create the plugin files on your WordPress installation
3. The plugin will be linked to your SleekAI project for future updates
4. Navigate to your WordPress plugins page to activate it
Note: The plugin will be installed but not automatically activated. This gives you control over when to enable the new functionality on your site.
## Supported Models
To ensure optimal code generation, the Plugin Generator feature supports these AI models:
- **OpenAI** - o3-mini
- gpt-4o type models
- **Anthropic** - Claude 3.5 Sonnet
While more models will be supported in the future, we currently recommend using Claude 3.5 Sonnet for the best and most reliable results when generating plugins.
You can configure your preferred model in the Plugin Generator settings tab:
---
# Alt Text
The Alt Text feature in SleekAI leverages AI to automatically generate descriptive alternative text, captions, and descriptions for images in your WordPress Media Library. This enhances accessibility and SEO for your website content.
## Navigating the Alt Text Section
You can access the Alt Text settings and tools here:
The Alt Text section is organized into three tabs: Model, Generation, and Table.
## Model Configuration
This tab allows you to select the specific AI model used for generating image descriptions.
Similar to other features in SleekAI, the available models depend on the API keys configured in your main settings. Different models offer varying levels of detail and nuance in their descriptions. Consider experimenting to find the model that best suits the style and complexity of your images.
## Generation Settings
Configure how and when alt text is automatically generated.
- **Automatic Generation:** Enable the switch to automatically generate descriptions for any new images uploaded to the Media Library.
- **Target Fields:** Choose where the generated text should be saved using the checkboxes: - `Alt Text`: Populates the standard `alt` attribute field.
- `Caption`: Adds the description as an image caption.
- `Description`: Saves the text to the image's description field. You can select one, two, or all three options depending on your needs.
## Image Table & Bulk Generation
This tab provides a table view of your existing Media Library attachments, focusing on the Alt Text, Caption, and Description fields.
From this table, you can:
- View the current Alt Text, Caption, and Description for each image.
- Select multiple images using the checkboxes.
- Click the `Generate` button (located at the top right) to initiate bulk generation for all selected images based on your current Model and Generation settings.
This is particularly useful for processing existing images in your library that lack proper descriptions or for updating descriptions with a different AI model or settings.
---
# Streaming
When using SleekAI, it is important to understand how the plugin handles API requests: streaming or non-streaming. These approaches affect how data is exchanged between SleekAI and the API server, influencing both the performance and user experience.
## Streaming
Streaming requests facilitate a continuous flow of data similar to ChatGPT:
- **Continuous Data Flow**: This method allows data to be transmitted back to SleekAI as soon as the API begins processing the request. SleekAI handles the stream management automatically, presenting data to users as it becomes available.
- **Limitations**: Although SleekAI simplifies the complexities of streaming, the implementer of the plugin may need to ensure their hosting environment supports persistent connections to fully utilize this feature.
## Non-Streaming
Non-streaming requests are processed in a straightforward, single-exchange fashion:
- **Request and Response Cycle**: SleekAI sends a complete request and waits for a full response from the API.
- **Limitations**: For large datasets or scenarios that require immediate updates, non-streaming may introduce delays, as the response only begins after the entire request has been processed. This could be a concern for requests that involve extensive processing time.
## Hosts
Hosts need to support Server-Sent Events (SSE) to enable streaming requests. Below is a list of popular hosting platforms and their support for SSE.
### Kinsta
### Local (WPEngine)
---
# API
## Generating Responses
SleekAI provides the `sleekAi_generate_response` function to directly interact with LLM providers and generate responses programmatically.
This function requires an array with the `model` and `messages` keys.
```php
$response = sleekAi_generate_response([
'model' => 'openai_gpt-4.1-nano', // Provider prefix required
'messages' => [
[
'role' => 'system',
'content' => 'You are a helpful assistant.',
],
[
'role' => 'user',
'content' => 'What is 1 + 1?',
]
]
]);
// Check if the request was successful and get the message
if (isset($response['response']['message'])) {
$messageContent = $response['response']['message'];
// $messageContent now holds: "1 + 1 equals 2."
error_log(print_r($messageContent, true));
} else {
// Handle potential errors, e.g., log the full response
error_log('SleekAI API Error: ' . print_r($response, true));
}
```
### Model Parameter
The `model` parameter requires a specific format: `{provider}_{model_id}`. For example, to use OpenAI's GPT-4.1 Nano model, you would use `openai_gpt-4.1-nano`. You can find the available models and their IDs within the SleekAI admin interface or the respective provider's documentation.
### Messages Parameter
The `messages` parameter accepts an array of message objects, each containing a `role` (`system`, `user`, or `assistant`) and `content`.
### Response Structure
The function returns an array containing the full request and response details from the provider. The core generated message content can typically be accessed via `$response['response']['message']`.
```json
{
"response": {
"message": "1 + 1 equals 2."
},
"request": {
"headers": {},
"body": "{\n \"id\": \"chatcmpl-BPuif2aMOq2593NA4rWbaruUZillP\",\n \"object\": \"chat.completion\",\n ...", // Truncated for brevity
"response": {
"code": 200,
"message": "OK"
}
// ... other details like cookies, filename, http_response
}
}
```
It's recommended to check for the existence of `$response['response']['message']` before attempting to use it, as errors during the API call might result in a different structure.
### Provider Abstraction
A key advantage of using `sleekAi_generate_response` is abstraction. While different LLM providers (like OpenAI, Anthropic, etc.) have distinct API requirements and message formats, SleekAI handles these differences internally. You can use the same standardized `messages` structure regardless of the chosen `model`. This allows you to easily switch between providers or models without needing to rewrite your message handling logic. Just update the `model` string, and SleekAI takes care of adapting the request to the specific provider's API.
---
# Hooks - PHP
Below you'll find a list of all available PHP hooks that can be used to extend or adjust the functionality of the plugin.
## settings
This filter allows adjusting the global settings before they are being applied.
```php
add_filter('sleekAi/settings', function ($settings) {
$settings['altText']['autoGenerate'] = true;
$settings['altText']['fields'] = ['alt', 'caption', 'description'];
return $$settings;
});
```
## settings/user
This filter allows adjusting the user settings before they are being applied.
```php
add_filter('sleekAi/settings/user', function ($settings, $userId) {
if ($userId === 1) {
$settings['model'] = [
'model' => 'openai_gpt-4.1',
'temperature' => 0.5,
'stream' => true,
'instruction' => 'Write a short story about a cat.',
];
$settings['everywhere'] = [
'enabled' => true,
'command' => '@ai',
'presets' => [
'command' => '@concise',
'prompt' => 'Rewrite the following text to be more concise:',
]
];
$settings['plugins'] = [
'model' => [
'model' => 'openai_gpt-4.1',
'stream' => true,
'instruction' => 'Write a short story about a cat.',
];
];
}
return $$settings;
}, 10, 2);
```
## chatbot
This filter allows adjusting the chatbot data before it is being rendered.
```php
add_filter('sleekAi/chatbot', function ($chatbot) {
$chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';
return $render;
});
```
## chatbot/conditions
This filter allows adding custom conditions to show or hide a chatbot.
```php
add_filter('sleekAi/chatbot/conditions', function ($data) {
$data[] = [
'id' => 'isCustomUrl',
'label' => 'Custom URL Check',
'value' => str_contains($_SERVER['REQUEST_URI'], '?customParam'),
];
return $data;
});
```
## chatbot/id
This filter allows adjusting the chatbot data by ID before it is being rendered.
```php
add_filter('sleekAi/chatbot/id=1', function ($chatbot) {
$chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';
return $render;
});
```
## chatbot/key
This filter allows adjusting the chatbot data by key before it is being rendered.
```javascript
add_filter('sleekAi/chatbot/key=my-chatbot', function ($chatbot) {
$chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';
return $render;
});
```
## chatbot/markup
This filter allows adjusting the markup that is being rendered for the chatbot.
```php
add_filter('sleekAi/chatbot/markup', function ($markup) {
$markup .= '';
return $markup;
});
```
For more information on how to use the markup filter, please refer to the [documentation](https://fabrikat.local/sleek/ai/documentation/chatbots/styling/).
## chatbot/sources
This filter allows adding custom sources to the chatbot.
```php
add_filter('sleekAi/chatbot/sources', function ($data) {
$data[] = [
'id' => 'customSource',
'label' => 'Custom Source',
'value' => functionToGetCustomData(),
];
return $data;
});
```
---