Browser Use
Browser agents and stealth cloud browsers for AI: run web tasks, fill forms, extract data.
作者による説明(英語の原文)
Push HTML prototypes to DesignPin for team review and pull reviewer feedback into your AI.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
DESIGNPIN_API_KEY, DESIGNPIN_PROJECT_ID, DESIGNPIN_BASE_URL「秘密」と表示された値は、あなたのアカウントの鍵です。絶対に人に教えたり、チャットに貼り付けたりしないでください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"designpin": {
"command": "npx",
"args": [
"-y",
"@designpin/mcp-server"
],
"env": {
"DESIGNPIN_API_KEY": "your-value",
"DESIGNPIN_PROJECT_ID": "your-value",
"DESIGNPIN_BASE_URL": "your-value"
}
}
}
}ターミナルでこれを実行します
claude mcp add designpin --env DESIGNPIN_API_KEY=your-value --env DESIGNPIN_PROJECT_ID=your-value --env DESIGNPIN_BASE_URL=your-value -- npx -y @designpin/mcp-server動かす前に、空欄の値を入力してください。
プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"designpin": {
"command": "npx",
"args": [
"-y",
"@designpin/mcp-server"
],
"env": {
"DESIGNPIN_API_KEY": "your-value",
"DESIGNPIN_PROJECT_ID": "your-value",
"DESIGNPIN_BASE_URL": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"designpin": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@designpin/mcp-server"
],
"env": {
"DESIGNPIN_API_KEY": "your-value",
"DESIGNPIN_PROJECT_ID": "your-value",
"DESIGNPIN_BASE_URL": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
DESIGNPIN_PROJECT_ID envDESIGNPIN_BASE_URL envこの設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月7日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント opjhabuilds で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
入力が必要なもの:DESIGNPIN_API_KEY
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(0.1.2)がレジストリに届いたのは6 か月前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
同じカテゴリには:Browser Use, Chrome DevTools MCP, MCP Server Browser
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
Browser agents and stealth cloud browsers for AI: run web tasks, fill forms, extract data.
MCP server for Chrome DevTools
MCP server for browser use access
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
An MCP server that lets any AI assistant push HTML prototypes to [DesignPin](https://designpin.pro) for team review and read back reviewer feedback.
DesignPin is a tool for reviewing HTML prototypes with DOM-anchored comments. This package wraps the DesignPin REST API as a Model Context Protocol server, exposing three tools — createShareLink, uploadVersion, listComments — to any MCP-compatible AI client.
Once configured, your AI assistant — Claude Desktop, Cursor, VS Code (Copilot), Gemini CLI, or any other MCP-compatible client — can ship a generated HTML prototype to a shareable review link, pull back reviewer comments to incorporate, and push iterations as new versions, all from inside the same conversation that produced the design.
For ChatGPT users: ChatGPT does not currently support MCP servers. Use the direct REST API via Custom GPT Actions instead — no MCP server needed.
The server is invoked by your MCP client; you don't run it directly during normal use. The simplest path is npx invocation, which fetches and runs without a global install:
npx -y @designpin/mcp-server --api-key dp_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx --project-id proj_example_abc123
For most workflows you'll set this in your MCP client's config file rather than running it manually — see Client config examples below.
To verify the install works:
npx -y @designpin/mcp-server --version
npx -y @designpin/mcp-server --help
Each key is scoped to a single project. Generate separate keys per client / use case so you can revoke them individually.
Both CLI flags and environment variables are supported. Flags win when both are present.
| CLI flag | Env var | Required | Default | Description |
|---|---|---|---|---|
--api-key | DESIGNPIN_API_KEY | for uploadVersion, listComments | — | Your dp_live_... API key |
--project-id | DESIGNPIN_PROJECT_ID | for uploadVersion | — | Project ID the key is scoped to |
--base-url | DESIGNPIN_BASE_URL | no | https://designpin.pro | API base URL (override for testing) |
--help | — | no | — | Show usage and exit |
--version | — | no | — | Print version and exit |
Security note: CLI flags are visible in
psoutput on multi-user systems. Prefer environment variables on shared machines.
createShareLinkCreate a public review link for an HTML prototype. No project setup required — creates a brand-new throwaway project. Rate-limited to 10 requests/hour per IP.
| Input | Type | Required | Description |
|---|---|---|---|
html | string | yes | Complete HTML document to share |
title | string | yes | Display name for the share, max 80 chars |
authorName | string | no | Author name shown on review page |
Returns: JSON with url, reviewToken, projectId, moduleId, versionId.
Example prompt to your AI assistant:
"Take this HTML and create a DesignPin share link titled 'Landing page hero V3'."
uploadVersionUpload a new HTML version to an existing DesignPin module. Auto-increments versionNumber. Requires the API key + projectId from configuration plus a moduleId from the user.
| Input | Type | Required | Description |
|---|---|---|---|
html | string | yes | Complete HTML for the new version |
moduleId | string | yes | Target module within the configured project |
description | string | no | Version description shown in the sidebar |
Returns: JSON with url, versionId, versionNumber.
Example prompt:
"Push this revised HTML as a new version to module
mod_example_def456with the description 'Address pin #3 contrast feedback'."
listCommentsFetch comments visible on a specific version of a DesignPin module. Uses chronological cutoff semantics matching the web UI: a comment is visible on version V if its origin version is V or any earlier version.
| Input | Type | Required | Description |
|---|---|---|---|
moduleId | string | yes | Module ID |
versionId | string | yes | Specific version to view comments on |
Returns: JSON with a comments array and a summary string like "3 open, 1 resolved".
Example prompt:
"Get the comments on module
mod_example_def456at versionver_example_ghi789and tell me what's blocking approval."
Claude Desktop
Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):
{
"mcpServers": { "designpin": { "command": "npx", "args": ["-y", "@designpin/mcp-server"], "env": { "DESIGNPIN_API_KEY": "dp_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "DESIGNPIN_PROJECT_ID": "proj_example_abc123" } } } }
Restart Claude Desktop after saving.
Cursor
Edit ~/.cursor/mcp.json:
{
"mcpServers": { "designpin": { "command": "npx", "args": ["-y", "@designpin/mcp-server"], "env": { "DESIGNPIN_API_KEY": "dp_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "DESIGNPIN_PROJECT_ID": "proj_example_abc123" } } } }
Reload Cursor after saving.
VS Code (Copilot with MCP)
Add to your VS Code user settings JSON or a workspace .vscode/mcp.json:
{
"servers": { "designpin": { "command": "npx", "args": ["-y", "@designpin/mcp-server"], "env": { "DESIGNPIN_API_KEY": "dp_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "DESIGNPIN_PROJECT_ID": "proj_example_abc123" } } } }
</details>
Gemini CLI extension
Edit your Gemini CLI config (path varies by version). Both the env-style and the flag-style work; flag-style is shown here:
{
"mcpServers": { "designpin": { "command": "npx", "args": [ "-y", "@designpin/mcp-server", "--api-key", "dp_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "--project-id", "proj_example_abc123" ] } } }
</details>
You: Generate a pricing page with three tiers (Free, Pro $12, Team $29).
Push it to DesignPin so my team can review.
AI: [generates HTML, calls createShareLink] Share link created. Send this to your team: https://designpin.pro/review/EXAMPLE_TOKEN_xyz
Project: proj_example_abc123 Module: mod_example_def456 Version: ver_example_ghi789
[team reviews and leaves 4 comments]
You: Pull the feedback from module mod_example_def456 at version ver_example_ghi789 and address the must-fix comments.
AI: [calls listComments] Open comments (4):
I'll regenerate the HTML with the two P0/P1 issues addressed.
You: Push the revision.
AI: [generates updated HTML, calls uploadVersion] v2 uploaded. Same review URL — your team can compare versions.
If you want to call the DesignPin API without an MCP server, the OpenAPI 3.1 spec is published at:
https://designpin.pro/openapi.json
Import it into Postman, generate a client SDK, or use it directly with ChatGPT Custom GPT Actions.
MIT © 2026 Omprakash Jha