Skip to main content
Glama
DEvauthentic

mcp-carousel-engine

MCP Carousel Engine v4.0

Carousel Engine Pro Banner

npm version License: Proprietary MCP Specification Renderer Export Gumroad Lifetime Agensi Store

The Sovereign Multi-Archetype Model Context Protocol (MCP) Server for High-End 4:5 Vertical Social Carousels.
Designed and engineered by Said KOMI (Ingénieur Réseaux et Système).

Aperçu Visuel • Nouveautés v4.0 • Les 4 Archétypes • Presets Métiers • Micro-Charts SVG • Patterns de Slides • Outils MCP • Intégration Agensi.io


[▸] Quoi de neuf dans la Version 4.0 ?

  1. Sécurité Entreprise & Neutralisation Anti-XSS :

    • Sanitisation systématique et whitelisting strict de toutes les interpolations HTML utilisateur et LLM.

    • Éradication des risques d'injection DOM dans Chromium (--no-sandbox) : les balises malveillantes (<script>, <iframe>, onload=, etc.) sont neutralisées en entités HTML.

    • Préservation ciblée des balises sémantiques et de style autorisées (<span class="accent">, <code>, <mark>, <strong>, <em>, <br>).

  2. Validation d'Entrée Stricte par Schéma Zod :

    • Validation typée Zod (CarouselProjectSchema, SlideInputSchema) en amont de toute exécution.

    • Contraintes strictes sur la pagination : 2 à 10 slides par carrousel (optimisé pour LinkedIn 5 à 7 slides).

    • Sanitisation des répertoires d'export (outputDirectory) contre les attaques par traversée de chemin (Path Traversal).

  3. Portabilité Multi-OS & Détection Dynamique des Navigateurs :

    • Détection intelligente de Google Chrome, Microsoft Edge et Brave sur Windows, macOS et Linux.

    • Fallback automatique transparent sur le Chromium géré par Puppeteer.

  4. Avatar Vectoriel Procédural SVG Dynamique :

    • Découplage complet des chemins de fichiers locaux en dur.

    • Si aucun avatar photo n'est spécifié, le moteur synthétise automatiquement un avatar SVG vectoriel haute définition avec monogramme d'autorité et halo néon calibré selon la palette active.

  5. Déblocage Intégral des 4 Archétypes de Design :

    • Tous les archétypes sont désormais pleinement opérationnels et testés à 100% :

      • swiss-editorial-clean (Minimalisme suisse, Klein Blue, typographie 900 asymétrique).

      • cyber-glass-bento (Glassmorphism cyber-sécurité, bordures laser cyan, compartiments floutés).

      • paper-light-editorial (Presse économique, papier ivoire chaud, liseré bordeaux).

      • neo-geometric-dark (La Formule Souveraine originale, fond noir absolu, orbes 3D et carte blanche).

    • Tag Matcher sémantique corrigé avec détection par mot entier (word boundary) gérant les accents français.

  6. Architecture Allégée & Zéro Code Mort :

    • Purge complète de react, react-dom et remotion superflus.

    • Restauration des sources documentaires TypeScript (src/documents/) pour une compilation TypeScript 100% autonome et déterministe.

  7. Packaging Commercial Agensi.io & Claude Code :

    • Module agentique prêt à l'emploi dans skills/linkedin-carousel-pro/ avec fichier de compétence SKILL.md, prompts orchestrateurs et exemples JSON réels.


Related MCP server: MotionDesign MCP

[▸] Les 4 Archétypes de Design

Archétype

ADN Visuel

Cas d'Usage Idéaux

neo-geometric-dark

Fond noir absolu #000000, sphères volumétriques 3D, carte centrale blanche à fort contraste, capsules dégradées.

Architecture Cloud, Systèmes Distribués, Santé Digitale.

paper-light-editorial

Fond papier ivoire chaud #F7F5F0, typographie encre de presse, filet bordeaux #C8102E, texture procédurale sans 3D.

Rapports Annuels, Conjoncture, Intelligence Économique, Mémos.

swiss-editorial-clean

Fond papier ivoire chaud #F6F5F0, typographie asymétrique monumentale (poids 900), accents Bleu Klein #002FA7.

Fintech, Core Banking, Mémos Stratégiques, Leadership.

cyber-glass-bento

Fond nuit cyber #060911, compartiments Bento translucides (backdrop-filter: blur), bordures laser cyan #00F0FF.

Cybersécurité, SOC, Télémétrie, Zero-Trust, Protocoles Réseau.


[▸] Presets de Thèmes Métiers

Preset

Industrie / Spécialité

Couleurs d'accent

Usage recommandé

cloud-devops

Cloud, Infra, SRE

Orange AWS (#FF9900) & Émeraude (#10B981)

AWS, Kubernetes, Terraform, VPC, Scalabilité

cybersecurity

Sécurité, SOC, Pentest

Vert Matrice (#10B981) & Cyan Laser (#00F0FF)

Zero-Trust, mTLS, Audit, SIEM, ISO 27001

fintech-systems

Finance & Micro-latence

Bleu Klein (#0052FF) & Cyan Électrique (#06B6D4)

Passerelles de paiement, P99, Kafka, Consensus

ai-deeptech

IA, LLM & MLOps

Violet Quantique (#8B5CF6) & Cyber Cyan (#06B6D4)

Transformers, GPU H100, Inférence, RAG, Fine-tuning

monochrome-swiss

Pure Architecture & Craft

Encre Noire (#0A0A0A) & Zinc Architectural (#71717A)

Clean Architecture, Refactoring, Manifestes

(Le moteur sélectionne automatiquement le preset le plus adapté par analyse sémantique si le champ est omis).


[▸] Micro-Graphiques Vectoriels SVG Mathématiques

Chaque slide de type metric-chart peut accueillir un visualiseur vectoriel natif calculé géométriquement :

  1. area-sparkline : Courbe de Bézier cubique Catmull-Rom avec ligne de seuil SLA, points d'inflexion et dégradé d'aire remplie.

  2. bento-bars : Barres horizontales de benchmark avec badge d'accentuation, métrique delta et étiquettes comparatives.

  3. radial-gauge : Jauge circulaire à arc paramétrique (260°), score central et sous-titre de certification.

  4. pipeline-flow : Topologie de flux horizontal reliant des nœuds de microservices avec tags de protocole et latences associées.


[▸] Les Patterns de Mise en Page

Pattern

Rôle Visuel

Champs Déclencheurs

stat-highlight

Métrique monumentale au centre avec adaptation typographique anti-débordement.

statValue, statLabel, statSubtext

comparison-versus

Comparaison split 2 colonnes : Mauvaise pratique vs Standard recommandé.

versus: { badTitle, badPoints, goodTitle, goodPoints }

flow-pipeline

Étapes séquentielles numérotées reliées par connecteur vertical.

steps: [{ title, desc }]

code-terminal

Terminal développeur avec en-tête macOS et code pré-formaté.

codeSnippet, codeFilename

manifesto-quote

Citation d'autorité avec grand guillemet esthétique et signature auteur.

quote, quoteAuthor

classic-card

Carte maîtresse avec titre bicolore bold/thin, description et tirets d'accent.

bulletPoints, features


[▸] Les 5 Règles d'Or du Système

N°

Règle

Spécification Technique

Rationale

01

Ratio 4:5 Vertical Strict

Canvas fixé à $1080\text{ px} \times 1350\text{ px}$ avec overflow: hidden.

Format d'engagement maximal sur LinkedIn mobile & desktop.

02

Zéro Émoji (Strict Policy)

Interdiction totale des émojis. Glyphes autorisés : ::, //, [+], [✓], ->.

Esthétique d'ingénierie moderne, sobre et hautement crédible.

03

Éclairage & Contraste Harmonique

Halos diffus, sphères 3D ou bordures de verre selon l'archétype sélectionné.

Profondeur et finitions de niveau agence de design.

04

Avatar Vectoriel ou Cadrage Précis

Avatar vectoriel SVG automatique ou photo utilisateur cadrée sans distorsion.

L'identité de l'auteur n'est jamais déformée ni tronquée.

05

Rendu Headless Chromium Autonome

Capture native via Chromium Headless à échelle 2x Retina + PDF LinkedIn.

Images PNG d'une netteté cristalline et PDF multipages prêts à poster.


[▸] Installation & Configuration

Option A : Exécution Directe (NPX)

{
  "mcpServers": {
    "carousel-engine": {
      "command": "npx",
      "args": ["-y", "mcp-carousel-engine"]
    }
  }
}

Option B : Installation Locale depuis les sources

git clone https://github.com/saidkomi/mcp-carousel-engine.git
cd mcp-carousel-engine
npm install
npm run build

Configuration locale du client MCP :

{
  "mcpServers": {
    "carousel-engine": {
      "command": "node",
      "args": ["c:/VEILLE TECHNOLOGIQUE/laboratoires/agentic-google/mcp-carousel-engine/dist/index.js"]
    }
  }
}

[▸] Outils MCP Exposés

1. render_carousel_project

Compile le projet complet (slides vectorielles, micro-graphiques mathématiques SVG, orbes 3D), pilote Chromium Headless en tâche de fond, génère les PNGs $1080 \times 1350$ Retina 2x, assemble le PDF multipages natif LinkedIn (linkedin_carousel.pdf) et crée la galerie interactive index.html.

2. list_theme_presets

Retourne les 5 presets métiers calibrés (cloud-devops, cybersecurity, fintech-systems, ai-deeptech, monochrome-swiss) et les spécifications des 3 modes visuels (hybrid, dark, light).

3. get_design_rules

Retourne les règles typographiques, la Formule Souveraine Hybride, le ratio strict (1080x1350) et la politique zéro-émoji.

4. list_creative_archetypes

Catalogue des 4 archétypes de mise en page avec recommandations de palettes et structures.

5. match_design_dna

Prend { topic, industry, tone } et déduit automatiquement le profil de Design DNA le plus adapté (palette, grille, tokens, archétype).

6. list_design_primitives

Liste les primitives de mise en page réutilisables HTML/CSS/SVG (grilles 4:5, sphères 3D, pilules néon, conteneurs bento, cartes monumentales).


[▸] Packaging Commercial Agensi.io

Le serveur est livré avec son package de compétence certifié :

  • Répertoire : skills/linkedin-carousel-pro/

  • Spécification : SKILL.md (compatible Agensi.io, Claude Code, Cursor, Copilot)

  • Exemples complets :

    • skills/linkedin-carousel-pro/examples/cloud-architecture.json

    • skills/linkedin-carousel-pro/examples/cybersecurity-audit.json

    • skills/linkedin-carousel-pro/examples/fintech-executive.json

  • Prompt orchestrateur : skills/linkedin-carousel-pro/prompts/orchestrator.md


[▸] Auteur & Licence

  • Concepteur & Architecte : Said KOMI

  • Rôle : Ingénieur Réseaux et Système

  • Licence : Propriétaire — Tous droits réservés (voir LICENSE)

  • Toute reproduction, distribution ou exploitation commerciale non autorisée est strictement interdite.

Available Tools

4 tools
get_design_rulesA

Returns the mandatory design rules, aspect ratios (4:5 vertical 1080x1350), zero-emoji policy, and typography standards for creating world-class carousels.

NameRequiredDescriptionDefault

No parameters

TDQS

A4.1/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations and no output schema, the description carries the full burden, and it does disclose the substance of what is returned (mandatory rules, 4:5 / 1080x1350 aspect ratios, zero-emoji policy, typography standards) plus the fact that these rules are mandatory rather than advisory. It is silent on return format/structure, but for a zero-parameter read-only fetch this is a strong disclosure.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

One sentence, front-loaded with the verb and resource, with the enumerated contents following immediately. The only padding is the mildly promotional 'world-class carousels', which is minor waste but not enough to hurt structure.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a parameterless tool with no output schema, the description needs to convey the returned content to be useful, and it does via the enumerated rule categories. The remaining gap is that it does not describe the shape/format of the returned rules, but nothing an agent needs to invoke it correctly is missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The tool takes zero parameters, which is the baseline-4 case; there is no parameter semantics to document or omit. The description correctly implies a single unfiltered fetch with no arguments.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb ('Returns') and resource ('mandatory design rules') and then enumerates the actual content (aspect ratios, zero-emoji policy, typography standards), so an agent knows exactly what it gets back. It is clearly distinguishable from the list_* and render_* siblings because it describes a fixed standards payload rather than enumerating options or producing output.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The phrase 'for creating world-class carousels' implies the context of use (fetch these rules before building a carousel), but the description never states when to call this versus list_design_primitives or the other siblings, and offers no exclusions or prerequisites. Usage is only implied, which matches a 3.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_creative_archetypesA

Returns a catalogue of creative layout archetypes (Dark Neo-Geometric, Frosted Glass Blueprints, Minimal Luxury Monolith) with color palettes and layout suggestions.

NameRequiredDescriptionDefault

No parameters

TDQS

A3.5/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full disclosure burden. It does describe the return payload (archetype names, color palettes, layout suggestions), which is useful behavioral context, but says nothing about read-only safety, permissions, or cost — acceptable gaps only because this is a zero-parameter catalogue lookup.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single front-loaded sentence that names the resource first and then the contents, with no filler. Every clause earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a zero-param, no-output-schema catalogue tool, stating what the payload contains is sufficient. The only real omission is any routing guidance relative to sibling design tools.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The tool takes zero parameters, so there are no parameter semantics to convey; the baseline for an argument-less tool is 4.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb ('Returns') and resource (a catalogue of creative layout archetypes), and concretizes it with three named examples plus the payload contents. It does not, however, distinguish itself from the sibling list_design_primitives or get_design_rules, which an agent could easily confuse it with.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

There is no when-to-use instruction, no condition, and no mention of alternatives among the sibling tools. The agent must infer usage purely from the fact that it returns a catalogue.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_design_primitivesA

Lists all available React design primitives (SlideCanvas, WireframeGrid, ShadedOrb3D, LayeredCard, PillBadge, GradientMaskText, ProfileMedal, CarouselDots) with their props.

NameRequiredDescriptionDefault

No parameters

TDQS

A3.7/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. 'Lists' correctly implies a safe read-only operation, and 'with their props' hints at return content beyond the names, but there is no mention of output shape, formatting, or any auth/limits context.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single front-loaded sentence that states the action first and the enumerated contents second. The parenthetical name list is long but directly useful for selection; only minor trimming is possible.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a parameterless listing tool with no output schema, the description covers what is listed and mentions that props accompany each item, which is adequate for calling it correctly. It stops short of describing the returned prop structure, but nothing else is missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The tool takes zero parameters, so the baseline of 4 applies. There is nothing about parameters for the description to clarify or obscure.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb ('Lists') and resource ('React design primitives') and enumerates the exact set returned, so an agent knows precisely what comes back. It is clearly distinguishable from the parallel sibling list_creative_archetypes and from get_design_rules.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

There is no statement of when to use this tool versus get_design_rules, list_creative_archetypes, or render_carousel_project, nor any prerequisite or sequencing guidance. Usage is only implied by the name and the enumeration.

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.

  1. 4 tool updatesv1.0.0
    • First observedget_design_rules
    • First observedlist_creative_archetypes
    • First observedlist_design_primitives
    • First observedrender_carousel_project

TDQS

A3.9/5.0

Scored across 4 tools

Disambiguation5/5

Each tool has a clearly distinct role: retrieving design rules, listing archetypes, listing primitives, and rendering the final project. There is no overlap between any of the four purposes, so an agent cannot easily misselect.

Naming Consistency5/5

All names follow a consistent verb_noun snake_case pattern (get_design_rules, list_creative_archetypes, list_design_primitives, render_carousel_project). The convention is predictable throughout.

Tool Count4/5

Four tools is on the lean side but coherent for a focused carousel generator: three are read-only reference lookups and one produces output. It is well-scoped, though slightly thin for a full authoring pipeline.

Completeness4/5

The surface covers the key lifecycle of discovery (rules, archetypes, primitives) plus final rendering, with no obvious dead ends. Minor gaps like validation, single-slide preview, or export-format options exist but are workable.

Maintenance

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    A
    quality
    C
    maintenance
    Enables AI assistants to architect and build Awwwards-level websites with spring physics, design systems, React 19 templates, and HD visual inspection.
    10
    MIT
  • A
    license
    Not graded
    quality
    C
    maintenance
    Enables AI agents to build and edit real HTML/CSS designs on a live canvas through 35 MCP tools, letting them inspect screenshots, computed styles and layout, then export production-ready React or Tailwind code. Humans can refine the same layers visually in a macOS editor.
    6,734 npm
    MIT
  • A
    license
    Not graded
    quality
    A
    maintenance
    Enables AI coding assistants to generate bespoke design systems by synthesizing OKLCH color palettes, chamfer highlights and spring physics, teaching layout composition grammar, and returning micro-interaction primitives and component blueprints. Also audits JSX/TSX/HTML through a senior design director's lens to score and critique UI quality.
    2 npm
    1
    MIT