salla-custom-code-mcp
Provides tools for managing a Salla store's custom CSS and JavaScript in the theme editor's advanced customization, including reading, replacing, backing up, verifying, and toggling custom code via Salla admin endpoints.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@salla-custom-code-mcpshow me the current custom CSS on my Salla store"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
salla-custom-code-mcp
خادم MCP محلي صغير يضيف أدوات CSS و JavaScript المخصص لمتجر سلة، أي ما تجده في محرر الثيم ← التخصيص المتقدم. هذه الأدوات غير موجودة في MCP سلة الرسمي (mcp.salla.dev).
A tiny local MCP server that adds custom CSS / JS tools for a Salla store (theme editor → Advanced customization), which Salla's hosted MCP does not expose.
الأدوات
الأداة | الوظيفة |
| قراءة الـ CSS المخصص |
| استبدال الـ CSS كاملاً (مع نسخة احتياطية قبل الحفظ، وتحقق بعده) |
| قراءة الـ JavaScript المخصص |
| استبدال الـ JavaScript كاملاً (مع نسخة احتياطية وتحقق) |
| تشغيل الـ JavaScript المخصص أو إيقافه |
Related MCP server: Chrome DevTools MCP Server
طريقة العمل
ليس في API سلة العام endpoint للكود المخصص. لذلك يستدعي الخادم نفس الـ endpoints التي تستخدمها لوحة التاجر:
api.salla.dev/admin/v2/design/custom/cssapi.salla.dev/admin/v2/design/custom/jsapi.salla.dev/admin/v2/design/custom/js/toggle
الطلبات تُرسَل من داخل تبويب
s.salla.saمسجّل الدخول في ملف Chromium مخصص، عن طريق Chrome DevTools Protocol. رمز الدخول لا يخرج من المتصفح ولا يُحفظ في أي ملف.إذا لم يكن المتصفح يعمل، يفتحه الخادم تلقائياً.
حماية من الخطأ: إذا كان الحساب المسجّل لمتجر غير
SALLA_STORE_ID، يرفض الخادم الطلب ولا يغيّر شيئاً.قبل كل حفظ تُنسخ النسخة السابقة إلى
~/.config/salla-custom-code/backups/<profile>/.
⚠️ هذه endpoints داخلية وغير موثّقة، وقد تغيّرها سلة في أي وقت. الحفظ يظهر مباشرة في المتجر إذا كانت النسخة منشورة.
المتطلبات
Node.js 22 أو أحدث (يحتاج
fetchوWebSocketالمدمجين).Chromium أو Chrome. الافتراضي هو Chromium الخاص بـ Playwright في
~/.cache/ms-playwright/chromium-1248/chrome-linux64/chrome، ويمكن تغييره بـSALLA_CHROME.
التثبيت
git clone https://github.com/dfsf2151/salla-custom-code-mcp.git
cd salla-custom-code-mcp
npm installسجّله في Claude Code:
claude mcp add salla-mystore-code -s user \
-e SALLA_STORE_ID=<رقم المتجر> \
-e SALLA_VERSION_ID=<رقم نسخة الثيم> \
-e SALLA_PROFILE=mystore \
-- node /path/to/salla-custom-code-mcp/server.mjsرقم المتجر: تجده في
store_context_getمن MCP سلة الرسمي.رقم نسخة الثيم: تجده في
theme_versions_list، وهو النسخة التي عليهاis_default.
تسجيل الدخول أول مرة
عند أول استدعاء لأي أداة، يفتح الخادم نافذة Chromium (ملفها
~/.config/salla-custom-code/profile-<SALLA_PROFILE>).سجّل الدخول فيها إلى لوحة سلة بحساب المتجر.
اترك النافذة مفتوحة.
جلسة اللوحة تنتهي بعد أسبوعين تقريباً. عندها سجّل الدخول مرة أخرى في نفس النافذة.
متغيرات البيئة
المتغير | الافتراضي | الوصف |
| — | رقم المتجر المسموح به (حماية) |
| — | نسخة الثيم الافتراضية |
|
| اسم ملف المتصفح والنسخ الاحتياطية، مفيد لأكثر من متجر |
|
| منفذ DevTools. استخدم منفذاً مختلفاً لكل متجر |
| Chromium الخاص بـ Playwright | مسار المتصفح |
سكربتات الاختبار
# قراءة فقط
SALLA_STORE_ID=... SALLA_VERSION_ID=... node scripts/smoke.mjs
# اختبار الحفظ بدون تغيير: يقرأ الـ CSS ويحفظه كما هو
SALLA_STORE_ID=... SALLA_VERSION_ID=... node scripts/noop-save.mjsscripts/cdp.mjs أداة تصحيح لمراقبة طلبات اللوحة: navigate URL أو eval JS أو watch SECONDS.
Available Tools
5 toolscustom_css_getC
Read the store's custom CSS (theme editor → Advanced customization → CSS) for store 123456789.
| Name | Required | Description | Default |
|---|---|---|---|
| version_id | No | Theme version ID (from theme_versions_list). Defaults to 987654321. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full disclosure burden. Beyond implying read-only via 'Read', it says nothing about permissions or scope needed, what happens when no custom CSS is configured, or what the response looks like — and it hardcodes a store ID (123456789), which is ambiguous if the agent operates on other stores.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single front-loaded sentence with no filler. The hardcoded store number is the only questionable element, as it may be static context rather than an argument to the tool.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-required-parameter read tool this is close, but with no output schema and no annotations the description should say at least what the return value is (raw CSS text? empty when unset?) and whether version_id selects a historical version. Those gaps matter for correct invocation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% and the single optional version_id parameter is documented there, including its default (987654321) and the sibling tool to source it from. The description adds no parameter meaning beyond that, so baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (Read) and resource (the store's custom CSS) and even names the UI location it corresponds to. It competes clearly with custom_css_update and custom_js_get, though it never explicitly contrasts itself with those siblings.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no explicit when-to-use or when-not guidance, no mention of the read/write pairing with custom_css_update, and no note about which store/version context applies. The intended usage is only inferable from the verb 'Read'.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
custom_css_updateA
Replace the store's entire custom CSS. Changes are live on the published version as soon as they are saved. Always read the current CSS first and pass the full new stylesheet (not a fragment). The previous CSS is backed up locally before saving. Show the merchant the change and get their OK before calling.
| Name | Required | Description | Default |
|---|---|---|---|
| css | Yes | The complete new CSS. | |
| version_id | No | Theme version ID (from theme_versions_list). Defaults to 987654321. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden and delivers: it discloses that changes go live on the published version immediately, that the whole stylesheet is overwritten, and that a local backup is taken beforehand. It omits auth/permission requirements and how/where the backup can be restored, which keeps it just short of a 5.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Five short sentences, each carrying a distinct operational fact, with the core action front-loaded and the safety steps following. No repetition or filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a destructive two-parameter mutation with no output schema, the description covers liveness, full-overwrite semantics, backup, and required merchant confirmation. It leaves version_id semantics and permission requirements implicit, but nothing essential for a correct call is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so baseline is 3, but the description adds real value by stressing that css must be the complete stylesheet and not a fragment. version_id is left entirely to the schema, so it stops short of full coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('Replace the store's entire custom CSS') and makes the replacement semantics explicit versus a fragment edit. The read-before-write instruction implicitly distinguishes it from custom_css_get, so an agent can tell the full-overwrite tool apart from the read tool without opening either schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives explicit procedural preconditions: 'Always read the current CSS first', 'pass the full new stylesheet (not a fragment)', and 'get their OK before calling'. These are concrete when/how conditions that route the agent correctly and name the read sibling implicitly.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
custom_js_getA
Read the store's custom JavaScript for store 123456789. Whether it is enabled is the version's custom_js_enabled flag in the Salla MCP's theme_versions_list.
| Name | Required | Description | Default |
|---|---|---|---|
| version_id | No | Theme version ID (from theme_versions_list). Defaults to 987654321. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must carry behavioral disclosure. It does add one genuinely useful fact beyond the schema: the enabled status is NOT returned here but lives in theme_versions_list. It does not mention permissions, behavior when no custom JS exists, or what the returned content looks like.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two tight sentences, front-loaded with the action and resource, followed by the one genuinely non-obvious fact. The hardcoded store ID is wasted, misleading specificity rather than filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a single-parameter read tool with no output schema, the description covers the essential split: JS content comes from here, enabled state comes from theme_versions_list. Missing only edge-case behavior (no JS configured, invalid version_id) and any hint about return shape.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% and the single version_id parameter is already documented with its source and default, so the schema does the heavy lifting. The description adds nothing about version_id and instead hardcodes store 123456789, which risks confusing the agent about what is actually parameterized.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource: 'Read the store's custom JavaScript'. This clearly separates it from custom_js_update and custom_js_toggle by action type, but it never names those siblings or scopes the read (whole store vs a specific theme version), despite the tool taking a version_id.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is implied rather than stated — a 'read' verb signals inspection, and the second sentence usefully tells the agent to consult theme_versions_list for the enabled state. There is no explicit when-to-use/when-not or routing to custom_js_update/toggle.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
custom_js_toggleA
Turn the store's custom JavaScript on or off without changing the code. Get the merchant's OK first.
| Name | Required | Description | Default |
|---|---|---|---|
| enabled | Yes | ||
| version_id | No | Theme version ID (from theme_versions_list). Defaults to 987654321. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden; it does disclose that this is a state-changing operation that preserves the script content and that merchant consent is required. It says nothing about which theme/version is affected when omitted, whether the change is instantly live, or what the result looks like, so a mutation tool remains under-described.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two short sentences, zero filler, with the action stated before the approval caveat. Every clause earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a two-parameter toggle with no output schema, the description covers action, scope, and consent. It omits what the tool returns and which theme version is targeted by default, but the schema already documents the version default, so little is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 50%: version_id is documented in the schema with its default, while `enabled` relies on its type alone. The description's 'on or off' loosely maps to `enabled` but adds no format, default, or edge-case guidance for either parameter. Baseline 3 for partial coverage is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb ('turn on or off') and resource ('the store's custom JavaScript') with a scope qualifier 'without changing the code' that separates it from custom_js_update. An agent can tell this is an enablement toggle, not a content edit, without opening the schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
'Without changing the code' implicitly routes the agent here rather than to custom_js_update when only the enabled state should change, and 'Get the merchant's OK first' supplies a real prerequisite. No sibling is named explicitly and no when-not-to-use case is given, so it falls short of a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
custom_js_updateA
Replace the store's entire custom JavaScript. Runs on every storefront page once saved (if custom JS is enabled). Always read the current JS first and pass the full new script. The previous JS is backed up locally before saving. Show the merchant the change and get their OK before calling.
| Name | Required | Description | Default |
|---|---|---|---|
| js | Yes | The complete new JavaScript. | |
| version_id | No | Theme version ID (from theme_versions_list). Defaults to 987654321. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden and does real work: it discloses that the script executes on every storefront page once saved, that the previous JS is backed up locally, and that merchant confirmation is required. Remaining gaps are permissions scopes and failure behavior, but this is well above the bar for an unannotated mutation tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Four short sentences, each carrying distinct information (what it does, runtime effect, workflow prerequisite, confirmation gate) with the destructive nature front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Covers the mutation, its blast radius, the backup, and the approval gate, which is what an agent needs before calling a destructive write. It stops short of describing what a failed save leaves behind or the return shape, but no output schema exists and the critical risks are stated.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so baseline is 3; the description adds genuine meaning by clarifying that js must be the complete script, not a fragment or patch. version_id is left entirely to the schema, which is acceptable given its own description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ("Replace the store's entire custom JavaScript") plus the key scope fact that it overwrites everything rather than patching. That framing alone distinguishes it from the read-only custom_js_get sibling and from custom_js_toggle.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
"Always read the current JS first and pass the full new script" and "Show the merchant the change and get their OK before calling" give explicit prerequisites and ordering. It doesn't name custom_js_toggle as a lighter-weight alternative for enable/disable, so the sibling routing is only partly covered.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
5 tool updates
v1.0.0- First observed
custom_css_get - First observed
custom_css_update - First observed
custom_js_get - First observed
custom_js_toggle - First observed
custom_js_update
TDQS
Scored across 5 tools
Each tool targets a clearly distinct resource and action: CSS read/update, JS read/update, and JS enable/disable. There is no meaningful overlap between custom_css_update and custom_js_toggle or any other pair.
All tools follow the same snake_case pattern custom_{css|js}_{get|update|toggle}. The convention is predictable and easy to map to the underlying resources.
Five tools is well-scoped for managing custom CSS and JavaScript. Each tool earns its place by covering a distinct operation without unnecessary surface area.
The surface covers reading and replacing both CSS and JS, plus toggling JS, which is the core workflow. Minor gaps exist around backup/restore visibility or an explicit reset operation, but agents can work around them by passing empty or full content.
Maintenance
Related MCP Connectors
Hosted Shopify MCP server for Claude, ChatGPT and Cursor, with each action switched per account.
Read your Kukie.io sites, make previewed changes to banners and settings, and start scans.
Work on your own computers from Claude or ChatGPT: run commands, edit and search files.
I do everything related to Browser Automation & Management
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables interaction with Chromium browser instances through Puppeteer for inspecting dev builds, capturing screenshots, and automating UI interactions. Features permission-gated tools for secure browser navigation, DOM manipulation, and JavaScript evaluation.11 npm1MIT
- AlicenseNot gradedqualityDmaintenanceProvides comprehensive Chrome browser debugging capabilities including DOM inspection, network monitoring, console logs, JavaScript execution, breakpoint debugging, and screenshot capture for AI-assisted frontend development.5MIT
- FlicenseAqualityDmaintenanceEnables style verification and CSS inspection through Chrome DevTools Protocol, using JSON specs to check computed styles, find elements, and interact with pages.12-
- FlicenseNot gradedqualityBmaintenanceEnables browser automation through a persistent Chrome instance exposed via HTTP, including navigation, screenshots, clicks, typing, multi-tab and multi-profile management, proxy switching, login state export, and AI-driven task execution.-