MCP TemplateIO - 이미지 생성 도구

Templated.io를 사용하여 이미지 생성 도구를 제공하는 mcp-framework으로 구축된 MCP(Model Context Protocol) 서버입니다.

개요

이 템플릿은 사용자 지정 도구를 사용하여 MCP 서버를 구축하기 위한 시작점을 제공합니다. 여기에는 예제 도구와 도구를 추가하고, 개발하고, npm에 게시하는 방법에 대한 지침이 포함되어 있습니다. 이 README는 MCP 서버를 직접 설정, 개발 및 배포하는 과정을 안내합니다.

Related MCP server: Gemini MCP Image Generation Server

빠른 시작

지엑스피1

프로젝트 구조

mcp-templateio/
├── src/
│   ├── tools/        # MCP Tools
│   │   ├── ExampleTool.ts
│   │   └── TemplatedImageTool.ts # Image generation tool
│   └── index.ts      # Server entry point
├── package.json
└── tsconfig.json

사용 가능한 도구

템플릿 이미지 생성기

이 도구는 Templated.io API를 사용하여 텍스트와 이미지 URL이 주어진 템플릿을 기반으로 이미지를 생성합니다.

입력 매개변수:

• templateId : 사용할 Templated.io 템플릿의 ID

• photoBgImageUrl : "photo-bg" 레이어에 배치할 이미지의 URL입니다.

• bgYellowImageUrl : "bg-yellow" 레이어에 배치할 이미지의 URL입니다.

• buildText : "build" 텍스트 레이어의 텍스트 콘텐츠입니다.

도구 개발

도구 구조의 예:

import { MCPTool } from "mcp-framework";
import { z } from "zod";

interface MyToolInput {
  message: string;
}

class MyTool extends MCPTool<MyToolInput> {
  name = "my_tool";
  description = "Describes what your tool does";

  schema = {
    message: {
      type: z.string(),
      description: "Description of this input parameter",
    },
  };

  async execute(input: MyToolInput) {
    // Your tool logic here
    return `Processed: ${input.message}`;
  }
}

export default MyTool;

구성 요소 추가

이 프로젝트 src/tools/ExampleTool.ts 과 TemplatedImageTool.ts 파일에 예제 도구가 포함되어 있습니다. CLI를 사용하여 더 많은 도구를 추가할 수 있습니다.

# Add a new tool
mcp add tool my-tool

# Example tools you might create:
mcp add tool data-processor
mcp add tool api-client
mcp add tool file-handler

npm에 게시하기

1. package.json을 업데이트하세요:

   • name 이 고유하고 npm 명명 규칙을 따르는지 확인하세요.

   • 적절한 version 설정하세요

   • description , author , license 등을 추가합니다.

   • 올바른 항목 파일에 대한 bin 포인트를 확인하세요.

2. 로컬로 빌드하고 테스트하세요.

   npm run build
   npm link
   mcp-templateio  # Test your CLI locally

3. npm에 로그인합니다(필요한 경우 계정을 만듭니다):

   npm login

4. 패키지를 게시하세요:

   npm publish

게시 후 사용자는 이를 Claude 데스크톱 클라이언트에 추가하거나(아래 참조) npx로 실행할 수 있습니다.

Claude Desktop과 함께 사용

지역 개발

Claude Desktop 구성 파일에 다음 구성을 추가하세요.

MacOS : ~/Library/Application Support/Claude/claude_desktop_config.json Windows : %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "mcp-templateio": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-templateio/dist/index.js"]
    }
  }
}

출판 후

API 키는 여기에서 받으세요: https://app.templated.io/api-integration?template=4ae9a86b-4ecd-44ee-aebd-7c5a49c16969

Claude Desktop 구성 파일에 다음 구성을 추가하세요.

MacOS : ~/Library/Application Support/Claude/claude_desktop_config.json Windows : %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "mcp-templateio": {
      "command": "node",
      "args": [
        "C:\\Users\\alex0\\Documents\\AA_CodeAndScripts\\modelcontextprotocol\\mcp-templateio\\dist\\index.js"
      ],
      "env": {"TEMPLATED_API_KEY":"YOUR-API-KEY-HERE"}
    },
  }
}

빌딩 및 테스트

1. 도구를 변경하세요

2. npm run build 실행하여 컴파일합니다.

3. 서버는 시작 시 자동으로 도구를 로드합니다.

자세히 알아보기

• MCP 프레임워크 Github

• MCP 프레임워크 문서