MCPInstall
sprite-codia-mcp logo

sprite-codia-mcp

by duyquangnvx duyquangnvx/sprite-codia-mcp

SpriteCodia is a tool that leverages the Model Context Protocol (MCP) TypeScript SDK to efficiently crawl and extract sprites from Codia within Figma, simplifying asset retrieval for developers and designers.

READMEmain

mcp-server-template-ts

A TypeScript template for building Model Context Protocol (MCP) servers with a modular and scalable structure.

Overview

This project provides a TypeScript-based template for creating MCP servers that can expose resources, tools, and prompts to Large Language Models (LLMs). The template follows a modular architecture that makes it easy to add new functionality.

The Model Context Protocol (MCP) enables rich, bidirectional communication between LLMs and external services. This template helps you create servers that allow LLMs to:

  • Access structured data via resources
  • Perform actions and computations via tools
  • Generate context-specific responses via prompts

Features

  • TypeScript-based: Fully typed for better development experience
  • Modular Architecture: Add new tools and capabilities easily
  • MCP Standards: Built on the official MCP TypeScript SDK
  • Extensible: Simple base classes to extend for your custom functionality
  • Ready to use: Includes example tools and configuration

Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn

Installation

# Clone the repository
git clone https://github.com/yourusername/mcp-server-template-ts.git
cd mcp-server-template-ts

# Install dependencies
npm install

Building and Running

# Build the project
npm run build

# Start the MCP server
npm start

# In development, you can use watch mode
npm run watch

Testing with MCP Inspector

You can test your MCP server using the MCP Inspector tool:

npm run inspector

Project Structure

mcp-server-template-ts/
├── src/
│   ├── index.ts         # Main entry point
│   ├── base/            # Base classes and interfaces
│   │   ├── base-tool.ts # Base tool implementation
│   └── tools/           # Tool implementations
│       └── demo-tools.ts # Example tools
├── tsconfig.json        # TypeScript configuration
└── package.json         # Project dependencies

Adding New Tools

  1. Create a new class that extends BaseTool in the src/tools directory:
import { BaseTool, ToolResult } from "../base/base-tool.js";
import { z } from "zod";

export class MyNewTool extends BaseTool {
    name = "my-new-tool";
    description = "Description of my new tool";
    schema = z.object({
        // Define your parameters with Zod
        param1: z.string().describe("Description of parameter 1"),
        param2: z.number().describe("Description of parameter 2")
    });

    async execute(input: z.infer<this["schema"]>): Promise<ToolResult> {
        // Implement your tool logic here
        const result = `Processed ${input.param1} with value ${input.param2}`;
        
        return {
            content: [{ type: "text", text: result }]
        };
    }
}
  1. Register your tool in src/index.ts:
import { MyNewTool } from "./tools/my-tool.js";

// Inside the main function
(new MyNewTool()).register(server);

Adding Resources

To add a resource to your MCP server, modify the index.ts file:

// Register a static resource
server.resource(
  "example-resource",
  "example://resource",
  async (uri) => ({
    contents: [{
      uri: uri.href,
      text: "Example resource content"
    }]
  })
);

// Register a dynamic resource with parameters
server.resource(
  "dynamic-resource",
  new ResourceTemplate("dynamic://{param}", { list: undefined }),
  async (uri, { param }) => ({
    contents: [{
      uri: uri.href,
      text: `Dynamic resource with parameter: ${param}`
    }]
  })
);

Adding Prompts

To add a prompt template to your MCP server, modify the index.ts file:

// Register a prompt template
server.prompt(
  "example-prompt",
  {
    param1: z.string(),
    param2: z.number().optional()
  },
  ({ param1, param2 = 0 }) => ({
    messages: [{
      role: "user",
      content: {
        type: "text",
        text: `Process this with ${param1} and value ${param2}`
      }
    }]
  })
);

Contributing

Contributions are welcome! Please feel free to submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments