🧠🥷 چگونه می توان MEME تولید MCP (Cline and Cursor) را تولید کرد

npx create-next-app@latest

"use client";

import { useState, useEffect } from "react";

export default function Home() {
  const [noText, setNoText] = useState("");
  const [yesText, setYesText] = useState("");
  const [error, setError] = useState<string | null>(null);

  const fetchMemeText = async () => {
    setError(null);
    try {
      const response = await fetch("/api/generate-meme", {
        method: "GET",
      });

      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(
          `HTTP error! status: ${response.status}, body: ${errorText}`
        );
      }

      const data = await response.json();
      if (data.receivedText) {
        setNoText(data.receivedText.noText);
        setYesText(data.receivedText.yesText);
      }
    } catch (error) {
      console.error("Error fetching meme text:", error);
      const errorMessage =
        error instanceof Error ? error.message : "An unknown error occurred";
      setError(errorMessage);
    }
  };

  useEffect(() => {
    const intervalId = setInterval(() => {
      fetchMemeText();
    }, 4000);

    return () => clearInterval(intervalId);
  }, []);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <h1 className="text-6xl font-bold mb-4">Meme Generating MCPh1>

      {error && <p className="text-red-500">Error: {error}p>}

      {noText && yesText && (
        <div>
          <div className="flex items-center">
            <img src="/template_no.png" alt="template_no" className="mr-4" />
            <p className="text-6xl font-bold">{noText}p>
          div>
          <div className="flex items-center">
            <img src="/template_yes.png" alt="template_yes" className="mr-4" />
            <p className="text-6xl font-bold">{yesText}p>
          div>
        div>
      )}
    div>
  );
}

import { NextResponse } from "next/server";

let storedNoText: string = "";
let storedYesText: string = "";

export async function POST(request: Request) {
  try {
    const { noText, yesText } = await request.json();
    console.log("Received text in Next.js API:", { noText, yesText });

    storedNoText = noText;
    storedYesText = yesText;

    return NextResponse.json({
      message: "Text received successfully",
      receivedText: { noText, yesText },
    });
  } catch (error) {
    console.error("Error processing request in Next.js API:", error);
    const errorMessage =
      error instanceof Error ? error.message : "An unknown error occurred";
    return NextResponse.json(
      {
        message: "Error processing request",
        error: errorMessage,
      },
      { status: 500 }
    );
  }
}

export async function GET(request: Request) {
  return NextResponse.json({
    message: "Text retrieved successfully",
    receivedText: { noText: storedNoText, yesText: storedYesText },
  });
}

npm init

npm install @modelcontextprotocol/sdk

tsc --init

#!/usr/bin/env node
import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import {
  CallToolRequestSchema,
  ErrorCode,
  ListToolsRequestSchema,
  McpError,
} from "@modelcontextprotocol/sdk/types.js";

class MemeServer {
  private server: Server;

  constructor() {
    this.server = new Server(
      {
        name: "meme-mcp-server",
        version: "0.1.0",
      },
      {
        capabilities: {
          resources: {},
          tools: {},
        },
      }
    );

    this.setupToolHandlers();

    this.server.onerror = (error) => console.error("[MCP Error]", error);
    process.on("SIGINT", async () => {
      await this.server.close();
      process.exit(0);
    });
  }

  private setupToolHandlers() {
    this.server.setRequestHandler(ListToolsRequestSchema, async () => ({
      tools: [
        {
          name: "generate_meme",
          description:
            "Generates a meme by sending text to the Next.js backend.",
          inputSchema: {
            type: "object",
            properties: {
              noText: {
                type: "string",
                description:
                  "The text to display at the top of the meme (No text).",
              },
              yesText: {
                type: "string",
                description:
                  "The text to display at the bottom of the meme (Yes text).",
              },
            },
            required: ["noText", "yesText"],
          },
        },
      ],
    }));

    this.server.setRequestHandler(CallToolRequestSchema, async (request) => {
      if (request.params.name === "generate_meme") {
        const { noText, yesText } = request.params.arguments as {
          noText: string;
          yesText: string;
        };

        try {
          const response = await fetch(
            "http://localhost:3000/api/generate-meme",
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({ noText, yesText }),
            }
          );

          return {
            content: [
              {
                type: "text",
                text: "Meme generated successfully",
              },
            ],
          };
        } catch (error: any) {
          console.error("Error calling Next.js API:", error);
          return {
            content: [
              {
                type: "text",
                text: `Error generating meme: ${error.message}`,
              },
            ],
            isError: true,
          };
        }
      }
      throw new McpError(
        ErrorCode.MethodNotFound,
        `Unknown tool: ${request.params.name}`
      );
    });
  }

  async run() {
    const transport = new StdioServerTransport();
    await this.server.connect(transport);
    console.error("Meme MCP server running on stdio");
    console.log("mcp ok!");
  }
}

const server = new MemeServer();
server.run().catch(console.error);

run npm build

{
  "mcpServers": {
    "meme-mcp-server": {
      "command": "node",
      "args": ["path to index.js"]
    }
  }
}

Use "generate_meme" tool of "meme-mcp-server",
 and send "noText": “Before watching Meme Monday”
 and “yesText”: “After watching Meme Monday”.

Use "generate_meme" tool of "meme-mcp-server",
 and send "noText": “”
 and “yesText”: “After watching Meme Monday”. 
Think the noText part and fill in the text.

Use "generate_meme" tool of "meme-mcp-server",
 and send "noText": “Before watching Meme Monday”
 and “yesText”: “After watching Meme Monday”. 
Think unique and humorous texts and replace noText and yesText.

Boy: Web Developer
Girl in right: Concentrate on Work
Girl in left: Watch Meme Monday.