Connectez votre assistant IA au serveur PicoPixel LVGL MCP. Créez et modifiez les écrans, widgets, thèmes, polices et icônes de votre projet en cours.
MCP server URLOpen Integrations in your PicoPixel account, then copy your personal MCP server URL.
https://app.picopixel.io/mcp/stream?userToken=<YOUR_PRIVATE_TOKEN>In Claude desktop or claude.ai, go to Customize → Connectors. Name it PicoPixel and paste the URL.
Ask Claude to use the PicoPixel LVGL MCP server to create or edit an LVGL interface.
MCP server URLOpen Integrations in your PicoPixel account, then copy your personal MCP server URL.
https://app.picopixel.io/mcp/stream?userToken=<YOUR_PRIVATE_TOKEN>Open ChatGPT Plugins, click Add (+) → Add Custom MCP Server, then name it PicoPixel and paste your copied URL into Server URL.
Create and install the custom plugin, then ask ChatGPT to use the PicoPixel LVGL MCP server to create or edit an LVGL interface.
MCP server URLOpen Integrations in your PicoPixel account, then copy your personal MCP server URL.
https://app.picopixel.io/mcp/stream?userToken=<YOUR_PRIVATE_TOKEN>Replace <server-url> in the command below with the URL you copied, then paste the completed command into Claude Code and run it. Ask Claude Code to use the PicoPixel LVGL MCP server to create or edit an LVGL interface.
claude mcp add --transport http PicoPixel-LVGL "<server-url>"MCP server URLOpen Integrations in your PicoPixel account, then copy your personal MCP server URL.
https://app.picopixel.io/mcp/stream?userToken=<YOUR_PRIVATE_TOKEN>Replace <server-url> in the command below with the URL you copied, then paste the completed command into OpenClaw and run it. Ask OpenClaw to use the PicoPixel LVGL MCP server to create or edit an LVGL interface.
openclaw mcp add PicoPixel-LVGL --url "<server-url>" --transport streamable-httpMCP server URLOpen Integrations in your PicoPixel account, then copy your personal MCP server URL.
https://app.picopixel.io/mcp/stream?userToken=<YOUR_PRIVATE_TOKEN>Replace <server-url> in the command below with the URL you copied, then paste the completed command into Hermes and run it. Ask Hermes to use the PicoPixel LVGL MCP server to create or edit an LVGL interface.
hermes mcp add PicoPixel-LVGL --url "<server-url>"MCP configOpen Integrations → MCP client JSON configuration → Copy Config.
{"mcpServers":{"picopixel-lvgl":{"url":"https://app.picopixel.io/mcp/stream?userToken=<YOUR_PRIVATE_TOKEN>"}}}{
"mcpServers": {
"picopixel-lvgl": {
"url": "https://app.picopixel.io/mcp/stream?userToken=<YOUR_PRIVATE_TOKEN>"
}
}
}Add the copied config to your client’s MCP settings and save.
Ask your assistant to use the PicoPixel LVGL MCP server to create or edit an LVGL interface.
ChatGPTCréez un tableau de bord de santé avec toutes les données de mon Apple Watch : activité, fréquence cardiaque, sommeil et objectifs quotidiens.
Je vais vérifier le projet et les outils disponibles, puis effectuer les modifications demandées.
PicoPixelCheck StatusVérifier la connexion et l’accès au projet en cours.
PicoPixelHigh Level OverviewConsulter les consignes d’utilisation de l’éditeur LVGL de PicoPixel.
PicoPixelAPI InfoRechercher les outils et les opérations nécessaires à la demande.
PicoPixelReadExaminer les écrans, les widgets et les ressources disponibles.
Le projet est prêt. Je vais mettre en place le contenu et la disposition, puis affiner les styles.
PicoPixelApply ChangesCréer et disposer les widgets.
PicoPixelApply ChangesAppliquer les polices, les couleurs et les espacements.
Les modifications sont en place. Je vais vérifier l’écran avant de terminer.
PicoPixelReadRelire les widgets modifiés pour vérifier le résultat.
Les modifications sont prêtes sur votre canevas PicoPixel. Vous pouvez les vérifier et poursuivre la conception.
Prêt dans PicoPixel
ChatGPTAppliquez à ce tableau de bord de course un thème clair aux tons chauds, avec des touches d’orange. Conservez la disposition et rendez les jauges faciles à lire.
Je vais examiner les styles du tableau de bord, puis créer un thème clair aux tons chauds, avec des touches d’orange.
PicoPixelCheck StatusVérifier la connexion et l’accès au projet en cours.
PicoPixelAPI InfoConsulter les ressources de thème et les opérations sur les styles.
PicoPixelReadExaminer les couleurs, les jauges et les barres de progression du tableau de bord.
Je vais utiliser un fond blanc cassé chaleureux, un texte sombre et des touches d’orange.
PicoPixelApply ChangesCréer des couleurs réutilisables pour le fond, le texte et les accents.
PicoPixelApply ChangesAppliquer la palette aux jauges, aux libellés et aux barres de progression.
La palette est appliquée. Je vais vérifier le contraste et la cohérence de l’ensemble du tableau de bord.
PicoPixelReadVérifier les nouveaux styles et confirmer que la disposition est conservée.
Votre thème clair est prêt. Les jauges et les barres de progression partagent les mêmes accents orange, et la disposition est conservée.
Prêt dans PicoPixel
ChatGPTGénérez les polices Doto, Playfair et JetBrains Mono en 12, 18 et 24 px. Ajoutez des icônes en couleur et en contour, puis affichez le tout sur un écran.
Je vais d’abord générer les différentes tailles de police, puis ajouter des icônes issues de plusieurs collections.
PicoPixelGenerate FontCréer Doto en 12, 18 et 24 px et ajouter les exemples correspondants.
PicoPixelGenerate FontCréer Playfair dans les trois mêmes tailles.
PicoPixelGenerate FontAjouter JetBrains Mono et compléter les exemples de polices.
Les exemples de polices sont prêts. Je vais maintenant ajouter les icônes en couleur et en contour.
PicoPixelAdd IconsAjouter les icônes de globe, d’appareil photo et de cadeau de Fluent UI.
PicoPixelAdd IconsAjouter les icônes de paysage, de musique et d’ampoule de Flat Color.
PicoPixelAdd IconsAjouter une fusée, un livre et une planète issus d’autres collections.
PicoPixelReadVérifier les polices générées, les icônes et l’écran d’aperçu.
Vos polices et vos icônes sont prêtes à l’emploi dans PicoPixel.
Prêt dans PicoPixel
Ouvrez ces trois projets d’interfaces embarquées dans l’éditeur pour les explorer et les adapter à vos besoins.
Voir tous les exemplesPicoPixel LVGL MCP is an MCP server that connects your AI assistant to the PicoPixel LVGL editor through the Model Context Protocol (MCP). It lets your assistant inspect, create, and edit native LVGL screens, widgets, and resources in your active project, so you can describe what you want and see the result on your canvas.
Your assistant can inspect existing screens, create and arrange LVGL widgets, adjust layouts and styles, work with fonts and icons, and create reusable components and color themes. Changes are made directly in your PicoPixel project and remain editable.
Choose your assistant in the setup section above and follow its connection steps. Depending on the client, you can sign in through a connector or use the personal MCP server URL from your PicoPixel account’s Integrations settings. Then open the project you want to work on. Read the PicoPixel LVGL MCP setup and agent settings guide.
The setup guide covers Claude, ChatGPT, Cursor, Claude Code, OpenClaw, Hermes, and Grok Bot. Other MCP-capable clients can use the general setup instructions with the connection details from your PicoPixel account.
Yes. Keep the project you want your assistant to work on open in a signed-in PicoPixel browser tab. MCP works with the active file through that tab, so the editor needs to stay connected while your assistant reads or changes the design.
Yes. Read-only mode lets your assistant inspect the project without changing it. To create or edit a design, enable write access in PicoPixel. Your assistant also needs your account to have edit permission for the active file.
Yes. MCP creates and updates native PicoPixel screens and widgets. You can review the result on the canvas, adjust it manually, undo changes, or ask your assistant to refine it further.
Yes. Different account types have different MCP call limits to help our servers maintain a responsive, reliable experience for all users. View the call limits for each account type on the pricing page.
Start creating
