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 크기로 만들어 줘. 컬러 아이콘과 윤곽선 아이콘도 추가해서 한 화면에 모두 보여 줘.
먼저 폰트를 크기별로 만든 다음 여러 아이콘 팩에서 아이콘을 추가하겠습니다.
Doto를 12, 18, 24 px 크기로 만들고 샘플을 추가합니다.
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.