Copy your
MCP server URL
Open Integrations in your PicoPixel account, then copy your personal MCP server URL.
https://app.picopixel.io/mcp/stream?userToken=<YOUR_PRIVATE_TOKEN>将 AI 助手连接到 PicoPixel LVGL MCP 服务器,即可在当前项目中创建和编辑嵌入式界面、控件、主题、字体和图标。
Open 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.
Open 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.
Open 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>"Open 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-httpOpen 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>"Open 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.
创建一个健康仪表盘,展示我 Apple Watch 上的全部健康数据,包括活动、心率、睡眠和每日目标。
我会先检查项目和可用工具,再按你的要求修改。
检查连接状态及当前项目的访问权限。
查看 PicoPixel LVGL 编辑器的使用说明。
查找本次请求需要的工具和操作。
检查现有屏幕、控件和可用资源。
项目已准备好。我会先放好布局和内容,再调整样式。
创建并排列控件。
设置字体、颜色和间距。
修改已完成,接下来检查更新后的界面。
重新读取修改后的控件,核对结果。
修改已完成。你可以在 PicoPixel 画布上查看结果并继续编辑。
已在 PicoPixel 中完成
给这个赛车仪表盘换上暖色调的浅色主题,用橙色作点缀。保留现有布局,让仪表读数清晰易读。
我会先查看仪表盘样式,再创建以橙色点缀的暖色浅色主题。
检查连接状态及当前项目的访问权限。
查找主题资源及样式操作。
检查仪表盘颜色、仪表和进度条。
我会使用暖白色背景、深色文字和橙色强调色。
创建可复用的背景色、文字色和强调色。
将配色应用到仪表、标签和进度条。
配色已应用,接下来检查整个仪表盘的对比度和一致性。
检查更新后的样式,确认布局未改变。
浅色主题已完成。仪表和进度条统一使用橙色点缀,原有布局保持不变。
已在 PicoPixel 中完成
生成 Doto、Playfair 和 JetBrains Mono 字体,各提供 12、18 和 24 px 三种字号。再添加一些彩色和线框图标,把所有资源放到同一个屏幕上展示。
我会先生成各个字号,再从几个图标包中添加图标。
生成 12、18 和 24 px 的 Doto 字体,并添加示例文字。
生成相同三种字号的 Playfair 字体。
添加 JetBrains Mono,补齐字体示例。
字体示例已完成,接下来添加彩色和线框图标。
添加 Fluent UI 的地球、相机和礼物图标。
添加 Flat Color 的风景、音乐和灯泡图标。
从其他图标包中添加火箭、书本和行星图标。
检查生成的字体、图标资源和预览界面。
字体和图标已准备好,可以在 PicoPixel 中使用。
已在 PicoPixel 中完成
PicoPixel 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.