npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

design-all-api-mcp

v0.3.0

Published

Designer-friendly AI API discovery & integration MCP Server — find the right API by intent, get setup guides, generate code, and test connections

Downloads

220

Readme

design-all-api-mcp

디자이너를 위한 AI API 탐색 & 통합 MCP 서버

"이미지로 영상 만들고 싶어" → 적합한 API 찾기 → 키 발급 → 코드 생성 → 테스트

어떤 문제를 해결하나요?

디자이너가 AI API를 프로젝트에 연동할 때 겪는 핵심 문제들:

  1. API/API Key/Access Token이 뭔지 모름 → 쉬운 한국어로 안내
  2. 키 발급 프로세스를 모름 → 단계별 가이드 제공
  3. Google Cloud Console 설정이 어려움 → AI Studio 키 방식 권장
  4. 어떤 모델이 무엇을 하는지 모름 → 의도 기반 API 검색

설치

npm install -g design-all-api-mcp

Claude Code에 등록

claude mcp add design-all-api-mcp -- npx design-all-api-mcp

사용 예시

"이미지로 영상을 만들고 싶어"

사용자: 이미지로 영상을 만들고 싶어

→ search_api(query: "이미지로 영상 만들기")
→ 2개 API 발견:
  1. Google Veo 이미지→영상 (beginner, ~$0.35/8s)
  2. OpenAI Sora 이미지→영상 (intermediate, ~$2/20s)

→ get_api_details(apiId: "google-veo-image-to-video")
→ 상세 정보 확인

→ check_api_key(apiId: "google-veo-image-to-video")
→ "키가 설정되지 않았습니다" + 발급 가이드

→ (사용자가 키 발급 후)
→ check_api_key(apiId: "google-veo-image-to-video", validate: true)
→ "키가 유효합니다!"

→ generate_api_code(apiId: "google-veo-image-to-video", style: "sdk")
→ TypeScript 코드 + 패키지 설치 명령어

→ test_api_connection(apiId: "google-veo-image-to-video")
→ "연결 테스트 성공!"

"텍스트가 들어간 이미지를 만들고 싶어"

사용자: 텍스트가 들어간 이미지를 만들고 싶어

→ search_api(query: "텍스트가 포함된 이미지")
→ OpenAI GPT Image 1 추천 (텍스트 렌더링 우수)

지원 API (22개)

영상 생성 (8개)

| API | 모델 | 해상도 | 최대 길이 | FPS | 비율 | 참조 이미지 | 오디오 | 가격 | |-----|------|--------|----------|-----|------|-------------|--------|------| | Google Veo (text→video) | Veo 3.1 | 720p, 1080p, 4K | 8s | 24 | 16:9, 9:16 | 3장 | ✅ | ~$0.35/8s | | Google Veo (image→video) | Veo 3.1 | 720p, 1080p, 4K | 8s | 24 | 16:9, 9:16 | 3장 | ✅ | ~$0.35/8s | | Google Veo (video extend) | Veo 3.1 | 720p, 1080p, 4K | 8s (연장당) | 24 | 16:9, 9:16 | 3장 | ✅ | 초당 과금 | | OpenAI Sora (text→video) | Sora 2 | 480p~1080p | 20s | 24 | 16:9, 9:16, 1:1 | 1장 | — | ~$1.50/12s | | OpenAI Sora (image→video) | Sora 2 | 480p~1080p | 20s | 24 | 16:9, 9:16, 1:1 | 1장 | — | ~$1.50/12s | | Kling (text→video) | Kling 2.6 | 720p, 1080p | 10s | 30 | 8가지 비율 | — | ✅ | ~$0.14~0.56 | | Kling (image→video) | Kling 2.6 | 720p, 1080p | 10s | 30 | 8가지 비율 | — | ✅ | ~$0.14~0.56 | | Kling (video extend) | Kling 2.6 | 720p, 1080p | 10s | 30 | 8가지 비율 | — | — | 크레딧 기반 |

  • 해상도: 720p, 1080p, 4K
  • 비율: 16:9, 9:16
  • 길이: 4s, 6s, 8s (video extend로 최대 ~148초)
  • FPS: 24
  • 동시 생성: 1~4개 (sampleCount)
  • 네이티브 오디오: ✅ (generateAudio)
  • 네거티브 프롬프트: ✅
  • 인물 생성 옵션: allow_adult, dont_allow, allow_all
  • 참조 이미지: 최대 3장 (스타일/캐릭터 일관성)
  • 특수 기능: first/last frame 지정, seed 값 고정
  • 모델 변형: sora-2 (기본), sora-2-pro (고품질)
  • 해상도: 480p, 720p, 1080p
  • 비율: 16:9, 9:16, 1:1
  • 길이: 4s, 8s, 12s, 20s
  • FPS: 24
  • 참조 이미지: 1장 (first frame으로 사용)
  • 모델 변형: kling-v2-6 (기본), kling-v2.6-pro (고품질)
  • 모드: Standard (720p, 5초) / Professional (1080p, 10초)
  • 해상도: 720p, 1080p
  • 비율: 16:9, 9:16, 1:1, 4:3, 3:4, 3:2, 2:3, 21:9
  • 길이: 5s, 10s
  • FPS: 30
  • 네거티브 프롬프트: ✅
  • 카메라 제어: 줌, 팬, 틸트 등
  • cfg_scale: 0.0~1.0 (프롬프트 충실도 조절)
  • 립싱크: ✅
  • Webhook 콜백: ✅ (callback_url)

추천 가이드:

  • 🟢 입문자: Google Veo — 간편한 설정, 저렴한 가격, 4K 지원
  • 🎥 카메라 제어: Kling — 줌, 팬, 틸트 등 카메라 움직임
  • ⏱️ 최대 길이: Sora (20s) 또는 Veo 연장 (~148s)
  • 🔊 네이티브 오디오: Veo 또는 Kling
  • 💰 가장 저렴: Kling Standard (~$0.14/5s)

이미지 생성 (5개)

| API | 모델 | 최대 해상도 | 비율 | 최대 장수 | 참조 이미지 | 인페인팅 | 투명 배경 | 가격 | |-----|------|-----------|------|----------|-------------|---------|----------|------| | Gemini 이미지 생성 | Gemini 2.0 Flash | 2048x2048 | 10가지 | 4장 | — | — | — | 토큰 기반 | | Gemini 3 Pro (4K) | Gemini 3 Pro | 4096x4096 | 10가지 | 4장 | 14장 | — | — | 토큰 기반 | | Gemini 2.5 Flash | Gemini 2.5 Flash | 1024x1024 | 10가지 | 10장 | — | ✅ | — | ~$0.039/장 | | GPT Image 1 | GPT Image 1 | 1536px | 3가지 | 10장 | — | ✅ | ✅ | ~$0.04~0.17/장 | | DALL-E 3 | DALL-E 3 | 1792px | 3가지 | 1장 | — | — | — | ~$0.04~0.08/장 |

  • 포맷: PNG
  • 해상도: 1024x1024, 2048x2048
  • 비율: 1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9
  • 최대 장수: 4장/요청
  • 특수 기능: 네이티브 텍스트+이미지 동시 출력 (멀티모달 응답)
  • 포맷: PNG, JPEG
  • 해상도: 1024x1024, 2048x2048, 4096x4096
  • 비율: 1:1, 3:2, 2:3, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9
  • 최대 장수: 4장/요청
  • 참조 이미지: 최대 14장 (객체 6장 + 인물 5명)
  • identity preservation: 최대 5명
  • thinking: LOW / HIGH
  • 특수 기능: Google Search grounding, 텍스트 렌더링 우수
  • 포맷: PNG
  • 해상도: 1024x1024
  • 비율: 1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9
  • 최대 장수: 10장/요청
  • 인페인팅: ✅
  • 가격: ~$0.039/장 (매우 저렴)
  • 포맷: PNG, JPEG, WebP
  • 크기: 1024x1024, 1024x1536, 1536x1024
  • 품질 옵션: low, medium, high
  • 최대 장수: 10장/요청
  • 투명 배경: ✅ (background: transparent/opaque/auto)
  • 인페인팅: ✅
  • 텍스트 렌더링: 우수
  • 포맷: PNG
  • 크기: 1024x1024, 1024x1792, 1792x1024
  • 품질 옵션: standard, hd
  • 스타일: vivid, natural
  • 최대 장수: 1장/요청
  • response_format: url 또는 b64_json

추천 가이드:

  • 📐 4K 고해상도: Gemini 3 Pro (최대 4096x4096)
  • ✏️ 텍스트 포함 이미지: GPT Image 1 또는 Gemini 3 Pro
  • 📦 대량 생성: Gemini 2.5 Flash (~$0.039/장, 최대 10장)
  • 🔲 투명 배경: GPT Image 1
  • 🎨 인페인팅: Gemini 2.5 Flash 또는 GPT Image 1
  • 🖌️ 창의적 일러스트: DALL-E 3 (vivid/natural 스타일)

텍스트 생성 (4개)

| API | 모델 | 컨텍스트 | 최대 출력 | Temperature | 특수 기능 | 가격 | |-----|------|---------|----------|-------------|----------|------| | Gemini 텍스트 | Gemini 2.0 Flash | 1M 토큰 | 8K 토큰 | 0~2 | — | ~$0.40/1M 출력 | | Gemini 3 Pro 텍스트 | Gemini 3 Pro | 1M 토큰 | 65K 토큰 | 0~2 | thinking (LOW/HIGH) | ~$10/1M 출력 | | Gemini 2.5 Flash 텍스트 | Gemini 2.5 Flash | 1M 토큰 | 65K 토큰 | 0~2 | — | ~$0.60/1M 출력 | | GPT-4o 텍스트 | GPT-4o | 128K 토큰 | 16K 토큰 | 0~2 | — | ~$10/1M 출력 |

추천 가이드:

  • 💰 최고 가성비: Gemini 2.5 Flash (빠르고 저렴, 65K 토큰)
  • 🧮 최저 비용: Gemini 2.0 Flash
  • 🧠 높은 추론력: Gemini 3 Pro (thinking 모드) 또는 GPT-4o
  • 🌐 범용 고품질: GPT-4o

분석 — 이미지/오디오 (5개)

| API | 모델 | 분석 대상 | 컨텍스트 | 이미지/오디오당 토큰 | 특수 기능 | 가격 | |-----|------|----------|---------|-------------------|----------|------| | Gemini Vision | Gemini 2.0 Flash | 이미지 | 1M 토큰 | ~258~1032 | — | 매우 저렴 | | Gemini 3 Pro Vision | Gemini 3 Pro | 이미지 | 1M 토큰 | ~258~1032 | thinking (LOW/HIGH) | 보통 | | Gemini 2.5 Flash Vision | Gemini 2.5 Flash | 이미지 | 1M 토큰 | ~258~1032 | — | 매우 저렴 | | GPT-4o Vision | GPT-4o | 이미지 | 128K 토큰 | low:85 / high:765 | detail 옵션 | 보통 | | Gemini Audio | Gemini 2.0 Flash | 오디오 | 1M 토큰 | 초당 25 토큰 | — | 매우 저렴 |

추천 가이드:

  • 💰 비용 우선: Gemini 2.0 Flash 또는 Gemini 2.5 Flash
  • 🔍 정밀한 분석: Gemini 3 Pro (thinking 모드) 또는 GPT-4o
  • 빠른 대량 분석: Gemini 2.5 Flash
  • 🎵 오디오 분석: Gemini Audio (유일한 오디오 지원 API)

도구

| 도구 | 설명 | |------|------| | search_api | 의도/키워드로 API 검색 | | get_api_details | API 상세 정보 조회 | | check_api_key | API 키 확인 + 유효성 검증 | | generate_api_code | TypeScript 코드 생성 | | test_api_connection | 연결 테스트 |

환경변수

| 변수 | 용도 | |------|------| | GOOGLE_AI_API_KEY | Google AI Studio API 키 (Gemini + Veo) | | OPENAI_API_KEY | OpenAI API 키 (GPT + DALL-E + Sora) | | KLING_ACCESS_KEY | Kling API Access Key | | KLING_SECRET_KEY | Kling API Secret Key |

개발

npm run dev      # watch 모드 빌드
npm test         # 테스트 실행
npm run build    # 프로덕션 빌드