CodePen MCP
一 主控程序 为Cursor（和其他MCP客户端）提供工具的服务器 摄取和检查 CodePen笔：元数据、完整源代码（HTML/CSS/JS）和嵌入代码段。
有什么可用的
CodePen具有 没有公共REST/GraphQL API 用于读取笔数据。此服务器使用：
- o嵌入（官方） –
https://codepen.io/api/oembed?format=json&url=...用于标题、作者、缩略图和嵌入iframe。稳定，由CodePen支持。 - 笔页解析（尽最大努力） –获取公共笔页并提取嵌入的
__itemJSON以获取完整源代码（HTML、CSS、JS）、标签、资源和预处理器。如果CodePen更改了前端，这可能会中断。
工具
| 工具 | 说明 |
|---|---|
get_pen_metadata | 通过oEmbed获取元数据：标题、作者、缩略图、嵌入HTML。没有源代码。 |
get_pen | 通过解析笔页获取完整笔（源+元数据）。用于摄取/检查/理解。 |
get_pen_embed_html | 通过oEmbed获取iframe嵌入HTML，高度可选。 |
设置
配置光标
将以下内容添加到您的Cursor MCP配置中（例如。 设置→ MCP 或 ~/.cursor/mcp.json):
{
"mcpServers": {
"codepen": {
"command": "npx",
"args": ["-y", "codepen-mcp"]
}
}
}就是这样-- npx 将自动下载并运行最新版本。无需克隆或构建。
可选：代理技能
该仓库包括Cursor Agent技能 .cursor/技能/代码输入/ 其告诉代理何时以及如何使用CodePen工具（例如，当用户粘贴笔URL时）。它仅限于这个项目；您可以将其复制到 ~/.cursor/skills/ 用于所有项目。
示例笔
用于设计和测试的示例： 响应式侧注V2 (johndjameson/pen/DwxMqa).
局限性
- 完整来源 取决于解析公共笔页；没有官方API。如果CodePen更改了他们的HTML/JS，
get_pen可能需要更新。 - o嵌入和翻页 在某些环境中（例如严格的Cloudflare或自动化网络），可能会返回403或受到速率限制。在正常的浏览器或光标使用中，它们通常可以工作。
许可证
麻省理工学院