mcpField
P
popup-mcp

popup-mcp

Local
github.com/richard-kim-79Productivity0Updated 15w ago

About popup-mcp

popup-mcp is an MCP server for creating, editing, and deleting Popup web pages through AI clients such as Claude. It supports block-based editing and templates, and pages can be shared with a link without login.

Key features

  1. 01Create and delete pages
  2. 02Replace or edit page blocks
  3. 03Create pages from templates
  4. 04List pages and templates
  5. 05Upload images and retrieve page details

Use cases

  1. 01Create an event invitation page
  2. 02Build a link-in-bio page from a template
  3. 03Edit headings and buttons on an existing page

MCP support

The server exposes nine tools for creating, viewing, editing, and deleting Popup pages, managing templates, and requesting image upload URLs. It connects to clients such as Claude Desktop using an MCP API key.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
"mcpServers": {
"richard-kim-79-popup": {
"command": "npx",
"args": [
"-y",
"@blueslap/popup-mcp"
],
"env": {
"MCP_API_KEY": "<MCP_API_KEY>"
}
}
}
}
Run commandnpx -y @blueslap/popup-mcp
Environment variables to set
MCP_API_KEYSecretPopup API Key — https://leaf-bluewhale2025.vercel.app/admin 에서 발급 (lf_live_... 형식)

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@blueslap/popup-mcp1.0.0

Tools

9

Saved tool list · updated 2w ago

ParameterTypeRequiredDescription
blocksarrayYesArray of content blocks

Details

From the project README

Popup MCP Server

30초 만에 웹페이지를 만들고 AI로 편집하세요. 로그인 불필요, 링크 하나로 공유.

Popup MCP Server를 Claude에 연결하면 대화만으로 웹페이지를 생성·편집·삭제할 수 있습니다.


설치 방법

Claude Desktop (권장)

~/Library/Application Support/Claude/claude_desktop_config.json 파일에 추가:

{
  "mcpServers": {
    "popup": {
      "command": "npx",
      "args": ["-y", "@popup-ai/mcp-server"],
      "env": {
        "MCP_API_KEY": "your_api_key_here"
      }
    }
  }
}

API 키 발급: https://leaf-bluewhale2025.vercel.app/admin 관리자 대시보드에서 발급


사용 가능한 도구 (9개)

도구설명읽기 전용
create_page블록 배열로 새 페이지 생성❌
get_page페이지 콘텐츠·메타데이터 조회✅
update_page_blocks페이지 전체 블록 교체❌
edit_page_blocks부분 편집 (insert/update/delete/move)❌
delete_page페이지 삭제 (소프트 딜리트)❌ ⚠️
list_my_pages내 페이지 목록 조회✅
list_templates사용 가능한 템플릿 목록✅
create_page_from_template템플릿으로 페이지 생성❌
upload_image이미지 업로드 URL 요청❌

사용 예시

예시 1: 이벤트 초대 페이지 만들기
"다음 내용으로 이벤트 초대 페이지를 만들어줘:
- 제목: 2025 봄 세미나
- 날짜: 4월 20일 오후 2시
- 장소: 제주 ICC
- 참가 신청 버튼 → https://forms.example.com"

Claude가 create_page 도구를 호출해 즉시 공유 링크를 반환합니다.


예시 2: 링크인바이오 페이지를 템플릿으로 생성
"link-in-bio 템플릿으로 페이지를 만들고,
제목을 'Richard의 링크 모음'으로 바꿔줘"

Claude가 create_page_from_template으로 생성 후 edit_page_blocks으로 제목 수정.


예시 3: 기존 페이지 수정
"abc123 페이지의 첫 번째 제목을 '업데이트된 제목'으로 바꾸고,
맨 아래에 '자세히 보기' 버튼을 추가해줘"

Claude가 get_page로 현재 상태 확인 후 edit_page_blocks으로 정확히 수정.


블록 타입

타입설명
h1대제목
h2소제목
text본문 텍스트
image이미지 (URL 또는 업로드)
button링크 버튼
divider구분선
youtube유튜브 영상
link링크 카드 (OG 미리보기)

환경변수

변수필수설명
MCP_API_KEY✅Popup API 키 (lf_live_... 형식)
POPUP_BASE_URL❌커스텀 서버 URL (기본값: https://leaf-bluewhale2025.vercel.app)

개인정보처리방침

https://leaf-bluewhale2025.vercel.app/privacy


지원

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.