WP AI Builder Via Nebius AI Studio

Complete Documentation & Testing Tools

🚀 Overview

WP AI Builder Via Nebius AI Studio is a powerful WordPress plugin that allows you to create beautiful, interactive AI chatbots powered by Nebius AI Studio. Build text generation, image generation, vision analysis, and multimodal AI applications with ease.

✨ Key Features

🤖 Multiple AI Types

Support for text generation, image analysis, multimodal processing, and image generation endpoints.

🎨 Beautiful UI

Modern chat interface with dark/light themes, copy functionality, and mobile-responsive design.

⚙️ Easy Setup

Simple configuration with API keys, custom system prompts, and flexible endpoint management.

🔧 Developer Friendly

REST API endpoints for external integration and comprehensive shortcode system.

🎯 Supported Models

Text Generation: openai/gpt-oss-120b, meta-llama/Llama-3.3-70B-Instruct, deepseek-ai/DeepSeek-V3
Vision & Multimodal: google/gemma-3-27b-it, Qwen/Qwen2.5-VL-72B-Instruct
Image Generation: black-forest-labs/flux-schnell, black-forest-labs/flux-dev

📦 Installation

Download & Upload

Download the plugin zip file and upload it through WordPress Admin → Plugins → Add New → Upload Plugin.

Activate Plugin

After upload, click "Activate Plugin" to enable WP AI Builder Via Nebius AI Studio.

Get Nebius API Key

Visit Nebius AI Studio and create your API key.

Create Configuration

Go to WP Admin → WP AI Builder → Add Configuration and enter your API key.

Create Endpoints

Create endpoints for different AI capabilities (text, image, vision, multimodal).

🎉 Success! Your AI Builder is now ready to use. Generate shortcodes and embed AI chatbots anywhere on your website.

⚙️ Configuration

🔑 API Configuration

First, you need to create a Nebius configuration with your API credentials:

API Base URL

https://api.studio.nebius.com

The base URL for Nebius AI Studio API

API Key

Your unique API key from Nebius AI Studio

🎯 Endpoint Types

Text Completion

For general text generation and conversations

Default Model: openai/gpt-oss-120b

Image Analysis

For analyzing and describing images

Default Model: google/gemma-3-27b-it

Multimodal

For processing both text and images

Default Model: google/gemma-3-27b-it

Image Generation

For creating images from text descriptions

Default Model: black-forest-labs/flux-schnell

📝 System Prompts

System prompts guide your AI's behavior. Here are some examples:

Text Completion:
You are a helpful assistant powered by WP AI Builder Via Nebius AI Studio. 
Provide clear, accurate, and helpful responses.

Image Analysis:
You are an expert image analyst powered by WP AI Builder Via Nebius AI Studio. 
Describe images in detail with accuracy and insight.

Image Generation:
Create high-quality, detailed digital artwork in a photorealistic style.

🤖 AI App Prompt Generator

Generate comprehensive prompts to create fully functional AI applications using your Nebius endpoints. The generated prompt will help you build complete HTML, CSS, and JavaScript applications in a single file.

💡 How it works: Enter your endpoint URL and optional custom instructions. We'll generate a detailed prompt that you can use with any AI assistant to create a complete web application.

🔗 API Endpoint URL * Enter the full REST API endpoint URL from your WordPress site

🎯 Endpoint Type *

🎨 Application Type

📝 Custom Instructions (Optional) Describe any specific features, design requirements, or functionality you want in your app

🎨 Design Style

📋 Generated Prompt

🎯 Next Steps: Copy this prompt and use it with Claude, ChatGPT, or any AI assistant to generate your complete web application!

🧪 Endpoint Testing

Test your Nebius AI endpoints to ensure they're working correctly. This tool helps you verify your configuration and troubleshoot any issues.

⚠️ Important: Add your testing website URL to the "Allowed Domains" in your WordPress plugin settings to avoid CORS errors.

🔧 Setup Instructions

Add Domain to Allowed List

Go to your WordPress Admin → WP AI Builder → Settings → Allowed Domains and add:

Get Your Endpoint URL

Copy the endpoint URL from your WordPress Admin → WP AI Builder → Endpoints

Test Below

Use the testing form below to verify your endpoint is working

🔗 Endpoint URL *

🎯 Test Type *

Testing your endpoint...

📊 Test Results

💡 Examples

📄 Basic Shortcode

[nebius_ai endpoint="my-chatbot"]

🎨 Customized Shortcode

[nebius_ai endpoint="my-chatbot" title="AI Assistant" theme_color="#667eea" theme_mode="dark" width="800px" height="600px"]

🔌 API Examples

Complete examples for integrating with your Nebius endpoints:

// Text Completion API
async function sendTextMessage(prompt) {
    try {
        const response = await fetch('https://yoursite.com/wp-json/nebius-api/v1/text-endpoint', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                model: 'openai/gpt-oss-120b',
                messages: [{ role: 'user', content: prompt }],
                max_tokens: 150
            })
        });
        
        const data = await response.json();
        return data.choices[0].message.content;
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

// Image Generation API
async function generateImage(prompt, width = 1024, height = 1024) {
    try {
        const response = await fetch('https://yoursite.com/wp-json/nebius-api/v1/image-endpoint', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                prompt: prompt,
                width: width,
                height: height,
                model: 'black-forest-labs/flux-schnell'
            })
        });
        
        const data = await response.json();
        return 'data:image/png;base64,' + data.data[0].b64_json;
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

// Vision Analysis API
async function analyzeImage(imageFile, prompt = 'Describe this image') {
    try {
        const formData = new FormData();
        formData.append('image', imageFile);
        formData.append('prompt', prompt);
        
        const response = await fetch('https://yoursite.com/wp-json/nebius-api/v1/vision-endpoint', {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        return data.choices[0].message.content;
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

🔗 Complete HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nebius AI Test</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
        .container { max-width: 800px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; }
        input, textarea, button { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; }
        button { background: #667eea; color: white; cursor: pointer; }
        .result { background: #f8f9fa; padding: 15px; border-radius: 5px; margin-top: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Nebius AI Studio Test</h1>
        
        <div>
            <input type="text" id="textInput" placeholder="Ask me anything..." />
            <button onclick="sendMessage()">Send</button>
        </div>
        
        <div>
            <input type="file" id="imageInput" accept="image/*" />
            <button onclick="analyzeImage()">Analyze Image</button>
        </div>
        
        <div id="result" class="result"></div>
    </div>

    <script>
        const API_BASE = 'https://yoursite.com/wp-json/nebius-api/v1';
        
        async function sendMessage() {
            const input = document.getElementById('textInput');
            const result = document.getElementById('result');
            
            try {
                const response = await fetch(`${API_BASE}/text-endpoint`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        model: 'openai/gpt-oss-120b',
                        messages: [{ role: 'user', content: input.value }],
                        max_tokens: 150
                    })
                });
                
                const data = await response.json();
                result.innerHTML = data.choices[0].message.content;
            } catch (error) {
                result.innerHTML = 'Error: ' + error.message;
            }
        }
        
        async function analyzeImage() {
            const fileInput = document.getElementById('imageInput');
            const result = document.getElementById('result');
            
            if (!fileInput.files[0]) {
                result.innerHTML = 'Please select an image';
                return;
            }
            
            const formData = new FormData();
            formData.append('image', fileInput.files[0]);
            formData.append('prompt', 'Describe this image');
            
            try {
                const response = await fetch(`${API_BASE}/vision-endpoint`, {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                result.innerHTML = data.choices[0].message.content;
            } catch (error) {
                result.innerHTML = 'Error: ' + error.message;
            }
        }
    </script>
</body>
</html>

🔧 Troubleshooting

❌ Common Issues

🚫 CORS Errors

Problem: "Access to fetch blocked by CORS policy"

Solution: Add your domain to Allowed Domains in plugin settings.

Go to: WP Admin → WP AI Builder → Settings → Allowed Domains
Add: yourdomain.com (one per line)

🔑 API Key Issues

Problem: "Invalid API key" or authentication errors

Solution: Verify your Nebius API key is correct and active.

Visit Nebius AI Studio to check your API key status.

📡 Endpoint Not Found

Problem: 404 error when calling endpoint

Solution: Check endpoint URL and ensure it's published.

Verify endpoint is published in WordPress
Check URL path is correct
Try flushing permalinks

🆘 Getting Help