Allows generating card news content by leveraging OpenAI's language models (e.g., GPT) via their API.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@cardnews-mcp-server Create an infographic card from this article summary: AI advances in 2025 focus on multimodal models and agentic workflows."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
자막/텍스트를 1080×1620 인포그래픽 카드뉴스(HTML + PNG) 한 장으로 만들어 주는 MCP 서버입니다. 강의 자막(.vtt/.srt) 또는 임의 텍스트를 입력하면, LLM 이 카드 콘텐츠(JSON)를 만들고 HTML 템플릿에 채운 뒤 Puppeteer 로 PNG 를 캡처합니다.
localnotebooklm의 카드뉴스 파이프라인을 독립 Node.js MCP 서버로 포팅한 것입니다. 콘텐츠 규칙: 섹션 48개(내용에 맞춰 가변) · 요약바 pill 46개. 주제 내용 중심(시험 메타 섹션 배제).
💰 모델별 생성 비용 비교는 PRICING.md 참고. (자동·대량 생성 기본값:
gpt-5.4-nano)
강의 자막(.vtt/.srt) 또는 텍스트 → 회차 1장 카드뉴스 PNG. 디자인 톤은 표지(헤드라인 + 이모지) · 6개 섹션 2열 그리드 · 하단 요약 띠(5 pill) 구조입니다. (데이터 파일은 동봉하지 않습니다 — 자신의 자막 파일을 사용하거나, 아래 E2E 테스트의 내장 샘플로 확인하세요.)
Related MCP server: slideshot-mcp
Node.js 18 이상
LLM API 키 (Anthropic 또는 OpenAI)
Puppeteer 용 Chrome (설치 명령 아래)
(선택) Pretendard 폰트 설치 시 한글 렌더 품질 향상. 미설치 시 Windows 기본 Malgun Gothic 으로 렌더됩니다.
npm install
npx puppeteer browsers install chrome
cp .env.example .env # 그리고 API 키 입력.env 예시:
LLM_PROVIDER=anthropic
ANTHROPIC_API_KEY=sk-ant-...
# MODEL=claude-sonnet-4-6 # 비우면 공급자 기본값
OUTPUT_DIR=./outputOpenAI 를 쓰려면:
LLM_PROVIDER=openai
OPENAI_API_KEY=sk-...
# MODEL=gpt-4onode test/e2e.mjs코드에 내장된 데모용 합성 자막(복리 개념)으로 카드 JSON + PNG 를 output/ 에 생성하고, 섹션 6개 / pill 5개 / PNG 용량을 점검합니다.
claude_desktop_config.json 에 추가:
{
"mcpServers": {
"cardnews": {
"command": "node",
"args": ["D:/00work/260604-toMCP/cardnews-mcp-server/src/index.js"],
"env": {
"LLM_PROVIDER": "anthropic",
"ANTHROPIC_API_KEY": "sk-ant-...",
"OUTPUT_DIR": "D:/00work/260604-toMCP/cardnews-mcp-server/output"
}
}
}
}
args의 경로는 이 리포의 실제 위치로 바꾸세요.
node src/index.js # stdio (Claude Desktop / MCP 클라이언트 기본)
node src/index.js --http # Streamable HTTP (포트 PORT 또는 3500)도구 | 설명 | 주요 인자 |
| 텍스트/자막 문자열 → 카드 1장 |
|
| .vtt/.srt/.txt 파일 → 카드 1장 |
|
| 여러 파일 → 회차별 N장 + 종합 1장 |
|
모든 도구는 { ok, card, htmlPath, pngPath }(배치는 { ok, count, cards, files }) 형태의 JSON 을 반환합니다.
오류 시 throw 하지 않고 { ok: false, error } 를 반환합니다.
src/
├── index.js 진입점 (stdio / --http)
├── server.js MCP 서버 + 도구 등록
├── prompt.js 카드뉴스 프롬프트
├── tools/cardnews.js 도구 핸들러 (단일/파일/배치)
└── pipeline/
├── subtitle.js 자막 파싱 (타임코드 제거 + 중복 제거)
├── llm.js LLM 호출 → 카드 JSON
├── template.js HTML 템플릿
└── render.js Puppeteer HTML→PNG 캡처여러 자막 파일을 회차별 카드 1장씩 + (combine 시) 전체 병합 '종합' 1장으로 생성한다.
Inputs: filePaths, folder, combine, outputDir, +1 more.
.vtt/.srt/.txt 자막 파일을 읽어 단일 카드뉴스(HTML + PNG)를 생성한다.
Inputs: filePath (required), metadata, outputDir, model.
자막/텍스트 문자열로부터 1080x1620 인포그래픽 카드뉴스(HTML + PNG) 1장을 생성한다. 섹션 6개·요약바 pill 5개.
Inputs: text (required), format, metadata, outputDir, +2 more.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 3 tools
Each tool targets a distinct input source: batch from multiple subtitle files, single file, or text string. No overlap in functionality.
All tools follow a consistent 'create_cardnews_' prefix with a clear source descriptor: batch, from_file, from_text.
Three tools cover the core creation scenarios (batch, file, text) without unnecessary duplication.
The set covers the primary creation use cases well, but lacks tools for management (list, delete, update) which may be needed if cards are stored.
Turn any idea, URL, doc, or PDF into on-brand visuals: 100+ formats, native in 150+ languages
Turn a URL, YouTube video or text into a branded LinkedIn/Instagram carousel PDF. No key needed.
Generate images, GIFs, videos, and PDFs from HTML, URLs, or templates — from your AI agent.
Render AI-written HTML animations to MP4/GIF with music, voiceover and captions.
