hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Integrations

Enables publishing the MCP server as an npm package, allowing users to easily install and use the tool.
Utilizes TypeScript for developing MCP tools, providing type safety and better developer experience.
Uses Zod for schema validation of tool inputs, ensuring proper data validation for the image generation tools.

MCP TemplateIO - 이미지 생성 도구

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

개요

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

빠른 시작

지엑스피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에 게시하기

package.json을 업데이트하세요:
- name 이 고유하고 npm 명명 규칙을 따르는지 확인하세요.
- 적절한 version 설정하세요
- description , author , license 등을 추가합니다.
- 올바른 항목 파일에 대한 bin 포인트를 확인하세요.
로컬로 빌드하고 테스트하세요.
npm run build npm link mcp-templateio # Test your CLI locally
npm에 로그인합니다(필요한 경우 계정을 만듭니다):
npm login
패키지를 게시하세요:
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"}
    },
  }
}

빌딩 및 테스트

도구를 변경하세요
npm run build 실행하여 컴파일합니다.
서버는 시작 시 자동으로 도구를 로드합니다.

자세히 알아보기

You must be authenticated.

A

security – no known vulnerabilities

F

license - not found

A

quality - confirmed to work

Templated.io를 사용하여 이미지 생성 도구를 제공하는 모델 컨텍스트 프로토콜 서버로, 사용자는 텍스트와 이미지 레이어가 있는 템플릿을 기반으로 사용자 정의 이미지를 생성할 수 있습니다.

Related Resources

Reddit Discussion about this server