Penpot MCP setup with OpenCode and OpenRouter

This tutorial connects Penpot's remote MCP server to the OpenCode desktop client, with OpenRouter providing access to the model. OpenCode runs on the speaker's machine, but the LLM runs elsewhere. The demonstrated setup does not run models locally.

The walkthrough starts in Penpot's account integrations, where the speaker enables the MCP server and generates a key. They then create an OpenRouter API key and explain where to add credits. In OpenCode, they open Settings and Providers, select OpenRouter, and paste in that API key before opening an empty project folder.

The next step is a JSONC configuration file containing Penpot's MCP configuration. The speaker adds a schema and sets the Penpot section's type to remote and enabled to true. After formatting the file and reloading OpenCode, they check the green connection status. They also open a design file in Penpot and check its MCP server connection through the file menu.

For the final check, the speaker selects Claude in OpenCode's planning mode and asks for the current Penpot file's name. The response identifies it as "design marks." This demonstrates file access in the speaker's setup; the tutorial does not test design edits. The supplied description also points to a local MCP server option, but the walkthrough covers the remote server.