Hugging Face's logo

Spaces:
fmarky
/
memeops-mcp-server
Sleeping

App Files Community
memeops-mcp-server
File size: 3,054 Bytes 
6629f49
1219621
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6629f49
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>MemeOps 🚀</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&display=swap" rel="stylesheet">
  <style>
    body{font-family:Roboto,system-ui;margin:0;background:#0b0b0b;color:#eee;display:grid;place-items:center;min-height:100dvh;padding:18px}
    .card{max-width:860px;width:100%;background:#121212;border:1px solid #2a2a2a;border-radius:16px;padding:16px;box-shadow:0 8px 30px #0008}
    h1{margin:0 0 8px;font-size:22px}
    p,code,pre{font-size:14px;line-height:1.4}
    .muted{color:#b8b8b8}
    img{width:100%;height:auto;border-radius:12px;background:#1a1a1a}
    .cap{margin-top:8px;font-size:18px;font-weight:600}
    pre{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;padding:10px;overflow:auto}
    a{color:#9ad1ff;text-decoration:none}
  </style>
</head>
<body>
  <section class="card">
    <!-- 1) Concept -->
      <h1>MemeOps 🚀</h1>
      <p class="muted">
        Concept: server reads a fake git diff → LLM writes a short caption → picks an Imgflip template → you giggle.
      </p>
      <p>
        <strong>modelcontextprotocol/inspector</strong> = a developer UI + proxy to test MCP servers over 
        <em>Streamable HTTP</em>. We'll use it to connect to your server:
        <code>https://fmarky-memeops-mcp-server.hf.space/mcp</code>.
      </p>
    <section class="card">
      <h2 style="margin-top:0;font-size:18px">Connect with Inspector (Streamable HTTP)</h2>
      <p class="muted">Create the config and launch the Inspector:</p>
      <pre><code>cat &gt; mcp.json &lt;&lt;'EOF'
{
  "mcpServers": {
    "memeops": {
      "type": "streamable-http",
      "url": "https://fmarky-memeops-mcp-server.hf.space/mcp",
      "note": "MemeOps MCP server (FastMCP) - via Streamable HTTP"
    }
  }
}
EOF

npx -y @modelcontextprotocol/inspector --config ./mcp.json
      <p class="muted">Open the UI at <code>http://127.0.0.1:6274</code> 
→ run <code>tools/call</code> for <code>memes.render_for_commit</code> with <code>{"commit_id":"demo-42"}</code>.</p>
    </section>


    <section class="card">
    <img id="meme" alt="Random meme" />
  </section>

  <script>
    // One random Imgflip meme
    (async () => {
      try {
        const r = await fetch("https://api.imgflip.com/get_memes");
        const j = await r.json();
        const list = (j?.data?.memes||[]);
        const pick = list[Math.floor(Math.random()*list.length)];
        document.getElementById("meme").src = pick.url;
        // Optional: tweak static legend based on template name
        if ((pick.name||"").toLowerCase().includes("distracted")) {
          document.getElementById("legend").textContent = "Static legend: Me → perf gains | Also me → breaking tests";
        }
      } catch(e) {
        document.getElementById("legend").textContent = "Couldn't fetch meme 😭 - try again.";
      }
    })();
  </script>
</body>
</html>