Forem: Aribu js

AI WordPress Hosting Management via Linux CLI

Aribu js — Sat, 02 May 2026 07:25:46 +0000

Hello DEV community! 👋 I'll start with the most important thing (and mandatory for transparency): this article contains affiliate links. If you decide to buy hosting through my link, I'll receive a small commission that will help support this blog, and you'll get an incredibly powerful platform. Win-win!

If you're a professional developer, a WordPress agency owner, or just a geek who loves maximum automation, you definitely know this pain: endless tab switching. You write code in the terminal, then jump into the browser, log in to the hosting control panel, find the necessary site, check the PHP version, look at the logs... It's horribly disrupting your flow.

But what if your terminal became smart? What if you could just ask the AI to make infrastructure changes? The Pressable company has just rolled out a real technological bomb - AI-powered hosting management from Pressable through the innovative Model Context Protocol (MCP).

Today, I'll share my real, "battle-tested" experience of setting up this feature. This will be a deep, practical guide: from deploying a test site to connecting Gemini CLI in the Fedora Linux console, with a detailed analysis of typical errors and their elegant workarounds. Let's go! 🚀

What is Pressable and what's Automattic got to do with it?

Before diving into the terminal, it's worth understanding what we're working with. If you've been in web development for a long time, you know the company Automattic. They're the giants behind WordPress.com, WooCommerce, Tumblr, and Jetpack.

Pressable is their premium platform for Managed WordPress Hosting. It's not just another "piece of server", it's an elite infrastructure created by the same people who write the WordPress core. There's no traditional cPanel; instead, the platform offers a custom, ultra-fast architecture, Edge Caching, and unprecedented stability, making it an ideal choice for large WooCommerce stores and high-load agencies.

And now, this infrastructure has received native AI support.

What is MCP and why is it a game-changer?

Model Context Protocol (MCP) is an open standard with open-source code. It allows AI to securely and standardizedly connect to external databases, APIs, and tools.

Pressable has integrated this protocol directly into their server architecture. Now, you can manage your WordPress sites through Claude Desktop, ChatGPT, or local AI terminals (like Gemini CLI), using ordinary human language.

That's why this is critically important for modern workflow:

No context-switching: Ask for logs, create backups, change PHP versions, and manage plugins without leaving your favorite AI tool.
Open standard: This is not a closed "proprietary" magic that binds you to one service. You choose which AI to use.
Free for all: This powerful AI integration is available on all Pressable plans without any additional fees.

We also recommend reading: Review of the Svelte 5 ecosystem: What's new and why you should switch

Step 1: Preparing the platform and creating an API

Any experiment starts with a testing ground. After logging in to the Pressable panel, I created a new site - shchoiyak-sandbox - in a matter of seconds. This is an ideal environment for testing scripts without risking the main project.

Next, we need a key for access. We go to the API Applications section in the profile settings. There, I generated a Client ID and Client Secret. These keys will become our digital bridge between the local terminal and Automattic's servers.

Step 2: Setting up the Linux environment and Google keys

For this case, I'm using the Fedora distribution with the KDE Plasma shell. To avoid cluttering the system with global packages, I follow the isolation rule: we create a separate workspace on the DATA disk specifically for our AI assistant.

mkdir -p /mnt/DATA/pressable-mcp-project
cd /mnt/DATA/pressable-mcp-project

Here, I encountered the first interesting nuance, which is worth warning about. To run Gemini CLI, you need an API key from Google. I had an old key generated in Google Cloud (with a Free trial status). And it gave me an API Error: Content generator not initialized error.

Why? Because when the 90-day trial in Cloud ends, Google "freezes" access. The secret lies in generating a key directly in the Google AI Studio (with a Free tier status), which is completely free and doesn't require a bank card.

After obtaining the correct key, I saved it in the system so it wouldn't get lost during sessions:

gemini config set api_key "AIzaSy...working_key"

Step 3: Pitfall 1 - 404 Error and npm

Next, we initialize the bridge. The idea was simple: add the MCP server via the npx package manager, as described in the platform's early documentation.

I entered the command:
gemini mcp add pressable npx -y @pressable/mcp-server

And immediately got a red text in the terminal: npm error 404 Not Found. The package simply disappeared from the official registry! As it turned out, Pressable's developers are rapidly evolving; they've updated the security architecture, and this old method of package distribution is no longer supported.

We also recommend reading: How to integrate AI into your web application using the Groq API

Step 4: Pitfall 2 - OAuth and stdio issue

Searching for an up-to-date workaround, I found their new utility mcp-remote. This approach uses modern, secure OAuth authorization (like logging in through Google or Facebook).

I ran the command:

npx -y mcp-remote@latest [https://mcp.pressable.com/sse](https://mcp.pressable.com/sse)

The system worked incredibly smartly: it launched a local server on port 25181, automatically opened my browser, asked me to confirm access to my Pressable account (Authorize), successfully saved the access token, and... the MCP server still showed a Disconnected status in Gemini CLI!

Why did this magic end in disappointment? Because terminal agents (like our Gemini CLI) communicate with MCP servers through an extremely strict stdio protocol. They expect an ideally clean data stream in JSON format. And the mcp-remote script during authorization prints human-readable text ("Opening browser...", "Port 25181...") to the terminal, which completely "pollutes" and breaks the communication channel for the AI.

Step 5: The correct solution - Direct connection via SSE

In fact, Pressable's engineers have anticipated this scenario. They've created an ideal option specifically for terminal bots - direct connection via SSE (Server-Sent Events), which doesn't require any crutches like npm packages or browser openings.

Here's my tested step-by-step plan to get it working from the first try:

Log in to the my.pressable.com panel.
Go to the Tools → Pressable MCP section and generate a new, single Access Token (a long string of characters).
In your terminal (while in the isolated project folder), add the server directly:

gemini mcp add pressable [https://mcp.pressable.com](https://mcp.pressable.com) --transport sse

Now, you need to securely "feed" your Access Token to the AI agent. Gemini CLI stores its local settings in a hidden file .gemini/settings.json. Open it with any editor (e.g., nano or kate):

nano .gemini/settings.json

And add your token to the headers block with the mandatory Bearer prefix. The file should look like this:

{
  "mcpServers": {
    "pressable": {
      "url": "[https://mcp.pressable.com](https://mcp.pressable.com)",
      "headers": {
        "Authorization": "Bearer YOUR_LONG_ACCESS_TOKEN_HERE"
      }
    }
  }
}

Save the file, check the status with the command gemini mcp list, and finally see the desired green Connected indicator! Our bridge between AI and hosting is officially built.

Step 6: AI-Sysadmin in action - Site management

Now, the most delicious part. We launch the interactive chat with the command gemini chat and give our agent a task in ordinary, natural English (the API works best with it):

> Please list all the sites on my Pressable account and tell me the PHP version of shchoiyak-sandbox.

Here, another cool feature of the MCP protocol itself is vividly demonstrated. The AI doesn't silently "take control" of your servers. It analyzes the request, understands that it needs the get_account_site_counts tool from Pressable, and asks for your permission to execute it (Action Required). I choose the option "Allow all server tools for this session" to give it a carte blanche for the current session.

The agent receives raw, complex machine JSON from the Pressable API, filters it with its "brains" in milliseconds, and outputs a beautiful, structured response directly to the terminal:

Domain: shchoiyak-sandbox.mystagingwebsite.com
PHP Version: 8.5
State: live
Datacenter: BUR (Burbank, CA)

Without opening a browser, without passwords, and without navigating through the control panel menu, I got all the critical infrastructure information right in my command line!

We also recommend reading: SMM Turbo: How I created my own editor for Instagram carousels

Conclusion

It's essential to understand the realities: Pressable's MCP technology doesn't replace a full-fledged visual hosting control panel for some complex or specific tasks. This is not a "magic button" that will launch your business for you.

But it's a groundbreaking tool for optimizing your workflow as a developer. The ability to delegate routine tasks (log checks, mass PHP version updates, staging environment deployments, backup management) directly from your IDE or terminal, where you write code, is a savings of dozens of hours of focused time per month. This is the end of the context-switching era.

🔥 Want to take your WordPress projects to a radically new level of speed?
Ditch the routine and start managing your servers like a true AI ninja.

💡 A quick tip from the author: If you choose an annual plan, Pressable gives you 2 months absolutely free (you get 12 months of premium hosting for the price of 10). It's by far the smartest way to migrate to elite infrastructure!

👉 Try AI hosting management by Pressable today

And if you need fast, stylish creatives for your website's social media, don't forget to use my free graphic editor SMM Turbo

Svelte 5 Ecosystem: What's New & Why Switch

Aribu js — Mon, 27 Apr 2026 09:38:09 +0000

Hello DEV community! 👋 If you're a frontend developer, you've probably noticed how quickly trends are changing. Just yesterday, we were arguing about what's better - React or Vue, and today more and more developers are choosing alternative paths. In my previous article, I talked about how I created my own graphic editor, and mentioned that "under the hood" it uses the latest Svelte.

Today, I want to take a deep look at the Svelte 5 ecosystem. We'll figure out what's changed, where the old compiler "magic" has gone, what runes (Runes) are, and most importantly, why you should switch to this framework right now. Let's go. 🚀

Why is the Svelte 5 ecosystem the new standard?

For a long time, Svelte 4 was my favorite. It compiled code into vanilla JavaScript, didn't have a virtual DOM, and worked extremely fast. But it had its own "childhood diseases".

Reactivity was based on the let keyword and reactive blocks $:. It looked magical, but as soon as your application became more complex (like my graphic editor), this magic started to confuse. The Svelte 5 ecosystem solved this problem radically.

The main feature of the fifth version is Fine-grained reactivity based on signals. Now the framework updates only the parts of the DOM that have actually changed, without checking the entire component.

We also recommend reading: SMM Turbo: How I created my own editor for Instagram carousels

The Magic of Runes (Runes): Goodbye, old syntax

The biggest shock for framework veterans is the emergence of runes. The creators of Svelte 5 abandoned the old let behavior in favor of explicit state indicators.

What are runes? These are special functions that tell the compiler: "Here we have reactive data".

$state() - replacement for the usual let for reactive variables.
$derived() - replacement for $:, used for computed values.
$effect() - a combination of life cycles (onMount, afterUpdate) that responds to changes in dependencies.
$props() - replacement for export let, now props are received as an object.

Look how elegant the code has become. Now reactivity is not tied to .svelte files. You can extract $state into a regular .svelte.ts file (like I did for managing the history of Undo/Redo in SMM Turbo) and import it anywhere. This is a Game Changer.

What else is new under the hood?

In addition to runes, the developers have significantly reworked other aspects of the framework to make it more predictable for large enterprise projects.

Here are the key changes, why it's worth switching to the new version:

Snippets (Snippets): Instead of old <slot>, snippets {#snippet name()} are now used. This allows you to pass pieces of markup as functions. Much more convenient for creating reusable UI components.
Event Handlers: Goodbye on:click directives. Now we use standard onclick={handler} attributes, like in React. This improves typing and simplifies integration with TypeScript.
Lightning speed: Thanks to signals under the hood, memory usage has decreased, and rendering speed of complex lists has increased many times.

We also recommend reading: Revolution on WordPress.com: 50,000+ plugins now available on all paid plans

How Svelte 5 helped me create SMM Turbo

When I designed the architecture of SMM Turbo, I needed a framework that could handle hundreds of DOM nodes (layers of text, images, backgrounds) on one screen, and at the same time not slow down during Drag & Drop.

Thanks to the Svelte 5 ecosystem, I was able to create a global editorState based on $state and $derived. When you drag a title onto the canvas, only the x and y coordinates of a specific element are updated. The rest of the interface doesn't even suspect changes and doesn't waste resources on redrawing.

And the transition to onclick and normal event handling allowed me to easily attach global keyboard listeners (for shortcuts like Ctrl+C / Ctrl+V), without creating "crutches".

We also recommend reading: How to integrate AI into your web application using Groq API

Conclusion: Is it worth updating?

My verdict is unequivocal - yes. The Svelte 5 ecosystem has become more mature, predictable, and powerful. The transition to runes may seem unusual at first, but as soon as you feel the freedom to extract state beyond components, you'll never want to go back to the old compiler magic.

If you're looking for a lightweight, fast, and modern tool for your next pet project or startup - this is the perfect choice.

And to see what this framework is really capable of in the real world, check out my project, which is completely built on the new architecture.

🚀 Try SMM Turbo - built on Svelte 5

Free AI editor for Instagram carousels, working lightning-fast right in the browser.
👉 Open SMM Turbo Editor (Free)

Building a Free Instagram Editor with Svelte 5, WASM, & Llama 3.1

Aribu js — Sat, 25 Apr 2026 11:53:20 +0000

Hello DEV community! 👋 Building a web-based graphic editor usually means wrestling with HTML5 Canvas or heavy WebGL libraries. But what if you could bypass Canvas entirely, manipulate the DOM directly with pure CSS, wrap it in blazing-fast Svelte 5 runes, and inject local WASM for background removal?

Today, I want to share the technical journey of building SMM Turbo - a completely free, in-browser Instagram carousel editor. We'll look "under the hood" at SvelteKit state management, local AI image processing, Llama 3.1 integration via Groq API, and why I chose the DOM over Canvas for rendering. Let's dive in! 🚀

🏗 Architecture: DOM instead of Canvas

If you've ever been interested in developing graphic editors, you know that the standard approach is to use HTML5 <canvas> or special libraries like Fabric.js or Konva. But I took a different, somewhat rebellious path 🐧.

In SMM Turbo, the working area is ordinary HTML elements (<div>, <span>, <img>) that are positioned absolutely using x and y coordinates.

Why so? Because CSS is a superpower! 🦸‍♂️

Rendering through DOM allowed me to implement incredibly complex typography in just a few lines of code, instead of writing complex math for drawing pixels on Canvas.

Here's what regular CSS gives you:

Gradient text: Using -webkit-background-clip: text.
Stroke (outline): Works through -webkit-text-stroke.
Shadows and glow: Elementary drop-shadow and text-shadow.
Text bending along a circle: Implemented by breaking the text into separate <span> elements using transform: rotate(...) translateY(...).

But how do you save the finished picture then? That's where the html-to-image library comes in.

Here's what my script for exporting to +page.svelte looks like, which takes a "screenshot" of the DOM node, packs the slides into an archive using JSZip, and converts them "on the fly":

const options = { 
    width: editor.canvasWidth, 
    height: editor.canvasHeight, 
    style: { transform: 'scale(1)', transformOrigin: 'top left' }, 
    pixelRatio: 1, 
    cacheBust: true 
};

// Draw Canvas from DOM
const canvas = await toCanvas(node, options);
// Save in the selected format (WebP/JPEG) with the desired quality
const dataUrl = canvas.toDataURL(editor.exportFormat, qualityDecimal);

capturedImages.push(dataUrl);

// Pack all slides into a ZIP archive
const zip = new JSZip();
capturedImages.forEach((img, i) => {
    const base64Data = img.split(',')[1];
    zip.file(`smm-slide-${i + 1}.webp`, base64Data, {base64: true});
});
const content = await zip.generateAsync({type: "blob"});

Thanks to this, we get perfect text quality, flexibility of CSS filters, and fast export of the entire carousel.

🌍 Multilingualism with Runes: On-the-Fly Localization

As the project expanded, there was a need to add an English version of the interface and landing page to attract an international audience. In the React or Vue ecosystem, you'd typically install heavy libraries like i18next for this. But in Svelte 5, we can do it much more elegantly thanks to "runes".

I created a simple localization service based on the reactive $state, which instantly repaints the entire interface when the language changes, without resetting any unsaved changes on the carousel canvas:

// src/lib/i18n/i18n.svelte.ts
class I18nService {
    locale = $state('uk'); // Reactive language state

    t(key: string) {
        return translations[this.locale][key] || key;
    }

    setLocale(newLocale: string) {
        this.locale = newLocale;
        localStorage.setItem('smm_lang', newLocale);
    }
}
export const i18n = new I18nService();

Because locale is a $state, any component using i18n.t('key') will instantly update as soon as the language changes. This also made it painless to set up automatic language detection: if a person enters the editor from an English or German browser, the script immediately reads navigator.language and automatically turns on the English version of the interface.

🪄 AI Magic: In-Browser background removal

A cool graphic editor for creating Instagram carousels in 2026 can't exist without built-in artificial intelligence.

Usually, services ask for money for background removal, because they send your photo to remote powerful servers with GPU. I decided to make this process local and free!

I used the incredible @imgly/background-removal library. This is a real revolution! The neural network is loaded in WebAssembly (WASM) format directly into your browser.

async function handleRemoveBackground() {
    isRemovingBg = true;
    try {
        const imgly = await import('@imgly/background-removal');
        const removeBg = imgly.removeBackground;

        // AI works directly on the user's device
        const imageBlob = await removeBg(selected.content);
        const url = URL.createObjectURL(imageBlob);

        selected.content = url;
        editor.saveState();
    } catch (error) {
        alert("Failed to remove background.");
    } finally {
        isRemovingBg = false;
    }
}

You just select a photo, click the "Remove Background" button, and your computer perfectly cuts out the main object in a couple of seconds. No limits, subscriptions, or transferring confidential photos to third-party servers.

🤖 AI Co-Pilot based on Llama 3.1

In addition to working with images, I added a text AI assistant. A special purple button with a star ✨ at the bottom of the screen invokes the AI Co-Pilot panel. It works through the ultra-fast API from Groq.

To make the AI respond instantly and always in the correct format, I created a separate API route on the server (+server.ts). Here's the real backend code that's responsible for the magic of generating texts:

import { json } from '@sveltejs/kit';
import Groq from 'groq-sdk';
import { GROQ_API_KEY } from '$env/static/private';

const groq = new Groq({ apiKey: GROQ_API_KEY });

export async function POST({ request }) {
    const { prompt, mode } = await request.json();
    let systemMessage = "";

    if (mode === 'canvas') {
        systemMessage = `You are a creative copywriter. 
The user will ask you to come up with text. Provide exactly 3 short and catchy options. 
Format your response so that each option starts with a new line and the symbol 🔹. 
No introductory words! Language: English.`;
    } 
    // ... other modes (Alchemist, Artist)

    const chatCompletion = await groq.chat.completions.create({
        messages: [
            { role: 'system', content: systemMessage },
            { role: 'user', content: prompt }
        ],
        model: 'llama-3.1-8b-instant',
        temperature: 0.7,
        max_tokens: 1024,
    });

    return json({ result: chatCompletion.choices[0]?.message?.content });
}

Here, I implemented 3 modes:

🧙‍♂️ Alchemist: Transforms a short idea into a detailed professional prompt for ChatGPT or Claude.
🎨 Artist: Helps generate detailed English-language requests for Midjourney.
💬 On canvas: The coolest feature! You ask to come up with a clickbait headline, AI gives you 3 options, and you can add the selected text directly to the current slide of the carousel with one click (+ On slide).

🔄 State Management: Svelte 5 Magic

One of the biggest challenges in developing a graphic editor is state management (State Management). We need to store the position of each element, manage the active slide, and implement the undo/redo function.

Thanks to the new runes in Svelte 5 ($state), creating such a global storage has become incredibly elegant. I created a state.svelte.ts file, where I described the editor object:

function createEditorState() {
    let state = $state({
        mode: 'carousel',
        canvasFormat: '1:1',
        currentSlides: [{ id: Date.now().toString(), elements: [], backgroundOverlay: 0 }],
        activeSlideIndex: 0,
        selectedId: null,
        history: [],
        historyIndex: -1,

        get activeSlide() {
            return state.currentSlides[state.activeSlideIndex];
        },

        saveState() {
            // Logic for saving steps for Undo/Redo
            if (state.historyIndex < state.history.length - 1) {
                state.history = state.history.slice(0, state.historyIndex + 1);
            }
            state.history.push(JSON.stringify(state.currentSlides));
            state.historyIndex++;
        },

        undo() {
            if (state.historyIndex > 0) {
                state.historyIndex--;
                state.currentSlides = JSON.parse(state.history[state.historyIndex]);
            }
        }
    });
    return state;
}
export const editor = createEditorState();

Every time an element's coordinates change (Drag & Drop), editor.saveState() is called, which adds a new snapshot of the data to the history array. Now the user can safely press Ctrl+Z, and the system will instantly revert the changes.

📦 Storage and Integration with Stocks

So that users don't lose their masterpieces after closing the tab, I connected a backend based on Supabase (PostgreSQL + Auth + Storage).

Authorization takes a few seconds. After that, all your projects are automatically saved to the cloud database. To upload your own images, I use Supabase Storage, generating unique file names so they don't overwrite each other.

I also integrated the free photo stock Pixabay. The user can directly in the editor enter a search query in English (e.g., dark space, aesthetic coffee), get a grid of results through the Pixabay API, and with one click set the image as the slide background or add it as a separate element.

🏁 Conclusion

Creating your own technical product is always a challenge, but it's an incredible experience. SMM Turbo grew from a simple idea for personal needs into a full-fledged graphic editor for creating Instagram carousels, capable of closing 90% of a marketer's or developer's daily tasks.

A lightning-fast interface on Svelte 5, powerful artificial intelligence "under the hood", seamless background removal, and complete freedom of action (without annoying watermarks or limits) make it a great alternative to paid monopolists.

🔥 Want to try this magic for yourself? My editor is completely free and already available for testing.

🚀 Try SMM Turbo right now

No subscriptions, payments, or hidden fees. Built for creators.
👉 Open SMM Turbo Editor (Free)