Penpot MCP Server Easy Setup OpenCode + OpenRouter

Penpot MCP Server: Easy Setup | OpenCode + OpenRouter ![rw-book-cover](https://img.youtube.com/vi/hBn1iutWSq4/maxresdefault.jpg) 🔗 **Source:** [Penpot MCP Server: Easy Setup | OpenCode + OpenRouter](https://www.youtube.com/watch?v=hBn1iutWSq4) > [!note]+ Document Notes > tags: #penpot #mcp-server #open-source #ai-integration #design-tools > author: [MISSING] > source: YouTube > reference: https://www.youtube.com/watch?v=hBn1iutWSq4 > date created: 2024-12-19 14:30 > > # 🏷️ Title: Penpot MCP Server: Easy Setup | OpenCode + OpenRouter >  ## 🧰 Action Inbox - [H1] Generate MCP key from Penpot account integrations — 00:30 #penpot - [H2] Create OpenRouter API key and add credits — 01:15 #openrouter - [H3] Configure opencode.jsonc file with proper JSON formatting — 03:45 #configuration ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Penpot Design Platform](https://design.penpot.app) - [OpenRouter API](https://openrouter.ai) - [OpenCode Client](https://opencode.ai) ## 📝 Summary - Complete walkthrough of setting up Penpot's MCP (Model Context Protocol) server integration - Uses open-source tools: Penpot for design, OpenCode as client, OpenRouter for LLM access - Demonstrates real-time AI integration with design files through simple configuration - Key components: MCP key from Penpot, OpenRouter API key, OpenCode desktop client - End result: AI can query and interact with open Penpot design files ## 📖 Main Content This tutorial demonstrates how to connect Penpot (open-source design tool) with AI models using the Model Context Protocol (MCP). The setup uses three main components: Penpot's remote instance for design work, OpenCode as a local AI client, and OpenRouter to provide access to various LLMs like Claude. The integration allows AI models to directly access and query information about open Penpot design files, enabling design-focused AI assistance. The setup prioritizes open-source and free tools where possible, making it accessible to designers without extensive technical backgrounds. The configuration involves creating API keys, setting up a JSON configuration file, and connecting the services through OpenCode's MCP integration. Once configured, users can ask AI models questions about their current design files and receive contextual responses. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/hBn1iutWSq4?t=0) — [H1] Introduction and overview - Key idea: Complete start-to-finish setup using remote Penpot, local AI client, and external LLM - Evidence: "I'm going to show you exactly start to finish how I set it up on my machine using remote penpot" #### ⏱️ [00:30](https://youtu.be/hBn1iutWSq4?t=30) — [H2] Generate MCP key from Penpot - Key idea: Access Penpot account integrations to enable and generate MCP server key - Evidence: "Go to my account and I'm going to go to integrations and I'm going to turn on the MCP server" #### ⏱️ [01:15](https://youtu.be/hBn1iutWSq4?t=75) — [H2] Set up OpenRouter API access - Key idea: Create free OpenRouter account and generate API key for LLM access - Evidence: "Very easy to sign up with open router. you get a free account with them and you get your API key" #### ⏱️ [01:45](https://youtu.be/hBn1iutWSq4?t=105) — [H3] Add credits to OpenRouter account - Key idea: Purchase credits for API usage through OpenRouter's billing system - Evidence: "What you will probably want to do is go and get some credits. So there's the option here and you can add credits" #### ⏱️ [02:00](https://youtu.be/hBn1iutWSq4?t=120) — [H1] Download and configure OpenCode client - Key idea: OpenCode serves as the MCP client connecting Penpot and LLMs, requires minimal coding - Evidence: "Even though it's called code, you don't need to be intimidated if you're not feeling very technically minded" #### ⏱️ [02:30](https://youtu.be/hBn1iutWSq4?t=150) — [H2] Connect OpenRouter to OpenCode - Key idea: Configure OpenCode with OpenRouter API key through settings menu - Evidence: "Go into settings and providers. I'm going to scroll down and find that open router provider and connect" #### ⏱️ [03:00](https://youtu.be/hBn1iutWSq4?t=180) — [H2] Create empty project in OpenCode - Key idea: Set up workspace folder for MCP configuration files - Evidence: "I'm going to open an empty project in open code. And so that's just an empty folder called MCP demo" #### ⏱️ [03:15](https://youtu.be/hBn1iutWSq4?t=195) — [H1] Create MCP configuration file - Key idea: Build opencode.jsonc file with Penpot MCP server configuration - Evidence: "I create a file called opencode.j JSON C that is a config file in a format that open code likes" #### ⏱️ [03:45](https://youtu.be/hBn1iutWSq4?t=225) — [H2] Add required JSON configuration fields - Key idea: Include schema, type remote, and enabled true properties for proper MCP setup - Evidence: "Add in a schema. Uh we add in type remote and enabled true inside the penot section" #### ⏱️ [04:15](https://youtu.be/hBn1iutWSq4?t=255) — [H3] Format JSON file properly - Key idea: Ensure correct indentation and JSON syntax for configuration parsing - Evidence: "Making sure all the indentation is okay for a JSON file. Uh because it will make a fuss if that isn't right" #### ⏱️ [04:30](https://youtu.be/hBn1iutWSq4?t=270) — [H2] Verify MCP connection status - Key idea: Restart OpenCode and check status indicators for successful Penpot MCP connection - Evidence: "If I go to the little status, I can see the penot mcp is connected. And that's a little green status icon" #### ⏱️ [05:00](https://youtu.be/hBn1iutWSq4?t=300) — [H1] Test AI integration with design file - Key idea: Use planning mode to query current Penpot file name and verify working integration - Evidence: "What is the name of my current open penot file? Your current open penot file name is design mock" #### ⏱️ [05:30](https://youtu.be/hBn1iutWSq4?t=330) — [H2] Real-time demonstration results - Key idea: Live demonstration shows immediate AI response without video editing or speedup - Evidence: "This is actually as it happened in real time. I didn't speed it up or anything" ## 📚 References - [Penpot Design Platform](https://design.penpot.app) - [OpenRouter API Documentation](https://openrouter.ai/docs) - [OpenCode Desktop Client](https://opencode.ai) ## 🗣️ Paraphrase - The setup connects three services: Penpot for design work, OpenRouter for AI model access, and OpenCode as the integration client that bridges them through MCP - Configuration involves generating API keys from each service and creating a properly formatted JSON file that tells OpenCode how to connect to Penpot's MCP server - The end result allows AI models to directly query information about open design files in Penpot, enabling contextual design assistance and automation ## 📰 Newsletter **New Integration: Connect AI to Your Design Workflow with Penpot MCP** Designers can now integrate AI directly into their design process using Penpot's new MCP (Model Context Protocol) server. This open-source setup connects your design files to AI models, letting you ask questions about your current designs and get contextual assistance. The integration uses free and open-source tools: Penpot for design, OpenCode as the client, and OpenRouter for AI model access. Setup involves generating API keys and creating a simple configuration file - no complex coding required. This represents a significant step toward AI-assisted design workflows that respect user privacy and leverage open-source tools. Resources: [Penpot](https://penpot.app), [OpenCode](https://opencode.ai), [OpenRouter](https://openrouter.ai) ## ✅ Action Items #### DevRel - Developer advocacy: Create technical blog post covering MCP integration patterns for design tools - Education: Develop workshop curriculum for AI-assisted design workflows using open-source tools - Developer experience: Document common configuration issues and troubleshooting for MCP setups - Community management: Gather feedback from designers using AI integrations, identify pain points #### OSPO - Policy & Governance: Review MCP server licensing and contribution guidelines for Penpot integration - Security Management: Assess API key management practices and data flow security in MCP implementations - Community Engagement: Support Penpot's open-source development and MCP protocol adoption #### Community - Contributors: Create beginner-friendly issues for improving MCP documentation and setup guides - Ecosystem: Coordinate with other design tools exploring AI integrations and protocol standardization #### WordPress - Design: Evaluate MCP protocol adoption for WordPress design tools and block editor AI features - Documentation: Document AI integration patterns that could apply to WordPress design workflows ## 🧪 Hypotheses - MCP protocol adoption will increase among design tools as AI integration becomes standard workflow requirement - Open-source AI toolchains will gain adoption over proprietary solutions when configuration complexity remains low - Design-focused AI assistants will improve creative output when they have direct access to design file context rather than relying on screenshots or descriptions - JSON configuration barriers will limit adoption among non-technical designers despite otherwise accessible setup process ### 📊 Methodology - Study design to test hypothesis 1: Survey design tool maintainers about MCP adoption timeline and implementation plans - Data sources and analysis for hypothesis 2: Compare adoption metrics between open-source vs proprietary AI design integrations over 6-month period - Experiments to validate hypothesis 3: A/B test design task completion and quality with context-aware vs context-blind AI assistance ### ❓ Questions - How will MCP protocol evolve to support more complex design workflows beyond simple file queries? - What privacy and security considerations emerge when AI models have direct access to design files? - Can this integration pattern scale to collaborative design environments with multiple users and permissions? ### 🔮 Future Research - Cross-platform MCP implementation study covering multiple design tools and AI providers - User experience research on AI-assisted design workflows and adoption barriers among creative professionals - Technical analysis of MCP protocol performance and scalability for real-time design collaboration ### 💡 Implications - Practice: Designers can integrate AI assistance directly into design tools without switching contexts or uploading files - Policy: Organizations need guidelines for AI tool integration and data handling in creative workflows - Security: API key management and secure configuration become critical for design team workflows - Education: Design curricula should include AI integration literacy and open-source toolchain management - Funding: Investment in open-source design tool AI capabilities could accelerate adoption over proprietary alternatives ### 🧠 Learning Styles Assessment Reading level estimate: 8th grade #### 👀 Visual learners - Present: Screen recording showing each configuration step and interface interactions - Improve: Architectural diagram showing data flow between Penpot, OpenCode, and OpenRouter #### 🔊 Aural learners - Present: Narrated walkthrough with clear step-by-step verbal instructions - Improve: Audio-only summary highlighting key configuration requirements and troubleshooting tips #### 🗣️ Verbal learners - Present: Technical terms explained in context (MCP, API keys, JSON configuration) - Improve: Analogy comparing MCP to translation service connecting design tools and AI models #### 🧩 Kinesthetic learners - Present: Complete hands-on demonstration from start to finish with real tools - Improve: Downloadable configuration template and setup checklist for practice #### 🧠 Logical learners - Present: Clear sequence of dependencies and prerequisite steps before configuration - Improve: Troubleshooting decision tree for common setup failures and error states #### 🧑‍🤝‍🧑 Social learners - Present: Implicit community aspect through open-source tool selection and sharing - Improve: Links to community forums and collaboration spaces for MCP users #### 🧘‍♀️ Solitary learners - Present: Self-contained tutorial requiring no external collaboration or assistance - Improve: Reflection prompts about potential use cases and workflow integration #### 🌿 Naturalistic learners - Present: Integration shown as part of natural design workflow and tool ecosystem - Improve: Discussion of how this fits into broader trends toward AI-assisted creative work ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear narration describes visual interface elements and actions - Improve: Provide text-based configuration guide alongside video demonstration #### Keyboard navigation - Present: Mouse-driven demonstration may not show keyboard alternatives - Improve: Document keyboard shortcuts and navigation paths for each configuration step #### Contrast and readability - Present: Screen recording shows actual interface contrast and text sizing - Improve: Verify that configuration file text maintains sufficient contrast in code editors #### Text resizing and reflow - Present: Video format adapts to different screen sizes - Improve: Ensure JSON configuration examples remain readable at 200% zoom #### Media and captions - Present: Clear audio narration throughout video - Improve: Add closed captions and provide written transcript for deaf/hard-of-hearing users #### Forms and interactions - Present: Shows form filling for API keys and account creation - Improve: Document accessibility features of each service's registration process #### Standards reference - Video content should meet WCAG 2.2 AA requirements for time-based media including captions and audio descriptions ### 🌍 DEIB Assessment #### Cultural breadth - Present: Uses globally accessible web services and open-source tools - Improve: Acknowledge potential geographic restrictions for some AI services and suggest alternatives #### Inclusive language - Present: Avoids jargon and explains technical terms in accessible language - Improve: Replace "intimidated" language with more encouraging framing about technical skills #### Neurodiversity support - Present: Clear step-by-step structure with logical progression - Improve: Add estimated time requirements and complexity warnings for each step #### Representation - Present: Focuses on tools and process rather than individual identity - Improve: Acknowledge different learning preferences and technical comfort levels #### Psychological safety - Present: Encouraging tone about technical accessibility and open-source tool benefits - Improve: Explicitly welcome beginners and provide clear support resource links ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear cause-and-effect relationship between configuration steps and working integration - Inductive strength: Demonstrates general MCP setup pattern through specific Penpot example - Causal reasoning: Shows direct connection between proper JSON formatting and successful service connection - Analogical strength: Implicitly compares MCP to other API integration patterns designers may know #### Fallacies - Appeal to novelty: Assumes new AI integration is inherently better without comparing to existing workflows - Hasty generalization: Demonstrates one successful setup but may not represent typical user experience #### Tone of voice - Overall tone: Encouraging and accessible, emphasizing simplicity while acknowledging technical steps ### 🛡️ DARVO Analysis - Deny: No defensive patterns observed - Attack: No attacks on alternatives or critics - Reverse victim/offender: No victim/offender dynamics present - Emotional cues and rhetoric: Straightforward instructional content without manipulation ## 🎯 Conclusion This tutorial successfully demonstrates that AI integration with design tools can be accessible to non-technical users through open-source toolchains. The key insight is that MCP protocol enables --- ## Full Transcript [00:00] I'm going to show you exactly start to [00:02] finish how I set it up on my machine [00:05] using remote penot which you can use [00:08] today from design.penmpot.app [00:11] and I'm using an AI client running [00:13] locally on my machine and the LLM is [00:16] elsewhere and I will explain that in a [00:17] moment. So, first of all, what you need [00:20] is an MCP key. And then I go to my [00:25] account and I'm going to go to [00:27] integrations and I'm going to turn on [00:29] the MCP server. And this will give me [00:31] the option to generate an MCP key. And [00:35] then you can copy and paste effect. Then [00:37] I'm going to go to open router which [00:38] we're going to use to provide our [00:40] models. And I'm going to create an API [00:42] key with them. Now it's very easy to [00:45] sign up with open router. you get a free [00:47] account with them and you get your API [00:50] key. That's the they give you the option [00:52] to set that up as soon as you start up [00:54] and you can create a key and then what [00:58] you will probably want to do is go and [01:01] get some credits. So there's the option [01:03] here and you can add credits. I'm not [01:06] going to show you how my credit card [01:08] process works. The next thing we want is [01:11] a client. So this is what we're going to [01:14] use to connect uh pimpot and the llms [01:18] through open router. And so for this [01:20] I've picked open code. I've tried to go [01:22] with mostly open source uh free and open [01:26] tools as much as possible. And open code [01:29] is quite straightforward to use and I [01:30] just downloaded the desktop version that [01:32] they've got. And even though it's called [01:35] code, you don't need to be intimidated [01:37] if you're not feeling very technically [01:39] minded. There's not very much code [01:41] involved in this process. And the first [01:43] thing I'm going to do is I'm going to go [01:45] into their menu and I'm going to [01:48] uh not open a project yet. I'm going to [01:50] go into settings and providers. I'm [01:54] going to scroll down and find that [01:59] open router provider and connect. And [02:01] all I need to paste in there is the API [02:03] key that I got from open router. And so [02:05] now that's connected to open code. So [02:09] now I'm going to open an empty project [02:11] in open code. And so that's just an [02:14] empty folder called MCP demo. You see [02:16] it's all eager and ready to go. Next I'm [02:19] going to go back to pimpot and I'm going [02:23] to get that MCP code [02:27] and I'm going to add it to a config [02:30] file. So I'm going to go just into a [02:33] text editor or code editor. I create a [02:36] file called opencode.j [02:38] JSON C that is a config file in a format [02:42] that open code likes and I'm going to [02:45] paste in my MCP code just like that and [02:48] wrap it so that we can all read the key [02:51] that I have already deleted. [02:54] Once we've done that we want to actually [02:56] add a few more specifics to the file. [02:58] This is quite handy information if you [03:00] want to get started with open code and [03:03] that is just that it wants a little bit [03:05] more config information. [03:08] So we going to add in a schema. Uh we [03:11] add in type remote and enabled true [03:15] inside the penot section. And once we [03:17] have got that I'm just going to format [03:20] the file. So that's just making sure all [03:22] the indentation is okay for a JSON file. [03:25] Uh so every nested bracket, every time [03:27] something's nested, it's indented. Uh [03:30] because it will make a fuss if that [03:32] isn't right like that as well. And then [03:36] I'm going to reload open code. It often [03:38] likes a reload or a restart. If I go to [03:41] the little status, I can see the penot [03:43] mcp is connected. And that's a little [03:45] green status icon alongside it. So once [03:48] I have that, I can go back into pimpot, [03:52] close the integration section. I need to [03:54] actually open up a file and I'm going to [03:57] go into the menu and go to mcp server [04:00] and check that penot mcp is connected. [04:02] Then I can go into the open code and I [04:06] can in planning mode. So I don't want it [04:08] to do anything just yet. I want to check [04:10] it's enabled in the file. Choosing I can [04:13] choose uh any model I want as well. Just [04:15] going to go claude cuz it's obvious and [04:17] easy. And then I can type in my prompt [04:20] which I'm just going to ask and I found [04:22] this is quite a good way to get started. [04:23] What is the name of my current open [04:25] penot file? So I'm just checking that [04:27] everything's working as expected. And [04:29] this is actually as it happened in real [04:31] time. I didn't speed it up or anything. [04:33] Your current open penot file name is [04:35] design mock. And so that is how we get [04:37] from starting up with just an MCP key. [04:40] And there is very little code involved. [04:43] It's really just a bit of copy pasting [04:45] and formatting.  📄 **Full text:** ![[Full Document Contents/Articles/Penpot MCP Server Easy Setup OpenCode + OpenRouter.md|Penpot MCP Server: Easy Setup | OpenCode + OpenRouter by YouTube]] ## Highlights - Then I can go into the open code and I can in planning mode. So I don't want it to do anything just yet. I want to check it's enabled in the file. Choosing I can choose any model I want as well. Just going to go Claude because it's obvious and easy. And then I can type in my prompt which I'm just going to ask and I found this is quite a good way to get started. What is the name of my current open Penpot file? So I'm just checking that everything's working as expected. And this is actually as it happened in real time. I didn't speed it up or anything. Your current open Penpot ([View Highlight](https://read.readwise.io/read/01kqzezj5bdahchzfrad7tm2j4)) - Tags: 👻 ai highlighted