4bf93d6763
- Add Slack as customer-facing messaging platform (client, 4 MCP tools, dashboard card) - Add /api/chat endpoint powered by Claude Haiku with SquareMCP system prompt - Add embeddable chat-widget.js injected into all 3 sites (docs, app, www) - Add ANTHROPIC_API_KEY, serve product/ as static files - Update Platform type to include slack Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
96 lines
5.0 KiB
HTML
96 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SquareMCP Docs — AI Social Media Gateway</title>
|
||
<meta name="description" content="Connect Claude, Codex CLI, and opencode to LinkedIn, TikTok, WhatsApp, and more via the Model Context Protocol.">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="site-nav">
|
||
<div class="nav-inner">
|
||
<a href="index.html" class="nav-logo"><span class="nav-logo-mark">S</span> SquareMCP</a>
|
||
<div class="nav-links">
|
||
<a href="getting-started.html">Getting started</a>
|
||
<a href="platforms.html">Platform guides</a>
|
||
<a href="agent-tutorial.html">Agent tutorial</a>
|
||
<a href="https://hermes.squaremcp.com/openapi-social.json" target="_blank">API reference ↗</a>
|
||
</div>
|
||
<a href="https://squaremcp.com" class="nav-cta" target="_blank">Open app</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="page">
|
||
<div class="hero">
|
||
<h1>Build AI agents that<br>talk to the world</h1>
|
||
<p>SquareMCP connects Claude, Codex CLI, and opencode to LinkedIn, TikTok, WhatsApp, Instagram, Twitter, and more — through a single MCP server.</p>
|
||
</div>
|
||
|
||
<div class="card-grid">
|
||
<a href="getting-started.html" class="card" style="text-decoration:none;color:inherit;">
|
||
<h4>🚀 Getting started</h4>
|
||
<p>Add SquareMCP to Claude Desktop, Codex CLI, or opencode in five minutes.</p>
|
||
</a>
|
||
<a href="platforms.html" class="card" style="text-decoration:none;color:inherit;">
|
||
<h4>🔌 Platform guides</h4>
|
||
<p>Connect LinkedIn, TikTok, and WhatsApp. Step-by-step setup for each platform.</p>
|
||
</a>
|
||
<a href="agent-tutorial.html" class="card" style="text-decoration:none;color:inherit;">
|
||
<h4>🤖 Agent tutorial</h4>
|
||
<p>Real code: a Claude agent that researches news and posts to LinkedIn automatically.</p>
|
||
</a>
|
||
<a href="https://hermes.squaremcp.com/openapi-social.json" target="_blank" class="card" style="text-decoration:none;color:inherit;">
|
||
<h4>📖 API reference ↗</h4>
|
||
<p>Full OpenAPI spec for every social tool. Mail API available separately.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<h2>Why MCP?</h2>
|
||
<p>The Model Context Protocol lets AI assistants call real tools without custom integrations. Instead of writing a bespoke connector for every model and platform, you configure SquareMCP once and every MCP-compatible client gains the same 50+ tools.</p>
|
||
<p>SquareMCP is multi-tenant by design: each customer's credentials are encrypted at rest, isolated per account, and never shared across sessions. Bearer tokens issued through OAuth are bound to your customer record so every tool call is attributable and rate-limited.</p>
|
||
|
||
<h2>Supported clients</h2>
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<h4>Claude Desktop</h4>
|
||
<p>Add a <code>mcpServers</code> entry to <code>claude_desktop_config.json</code>. No extra software needed.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h4>Codex CLI</h4>
|
||
<p>Pass <code>--mcp-server</code> or configure in <code>~/.codex/config.json</code>. Full PKCE OAuth flow supported.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h4>opencode</h4>
|
||
<p>Add SquareMCP to your opencode MCP providers list. HTTP Bearer transport.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h4>Custom agents</h4>
|
||
<p>Any MCP client that supports Streamable HTTP transport works. See the agent tutorial for a from-scratch example.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Supported platforms</h2>
|
||
<div class="card-grid">
|
||
<div class="card"><h4><span class="icon" style="background:#0a66c2;">in</span> LinkedIn</h4><p>Post text, images, and video. Search connections, send messages.</p></div>
|
||
<div class="card"><h4><span class="icon" style="background:#000;">🎵</span> TikTok</h4><p>Upload and publish videos. View creator analytics.</p></div>
|
||
<div class="card"><h4><span class="icon" style="background:#25d366;">💬</span> WhatsApp</h4><p>Send messages and templates. Receive inbound via webhook.</p></div>
|
||
<div class="card"><h4><span class="icon" style="background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);">📷</span> Instagram</h4><p>Publish reels and image posts via Business API.</p></div>
|
||
<div class="card"><h4><span class="icon" style="background:#000;">𝕏</span> Twitter / X</h4><p>Tweet with media. Search and read timeline.</p></div>
|
||
<div class="card"><h4><span class="icon" style="background:#1877f2;">f</span> Facebook</h4><p>Post to pages, share photos and video.</p></div>
|
||
<div class="card"><h4><span class="icon" style="background:#0088cc;">✈️</span> Telegram</h4><p>Send messages and photos via bot token.</p></div>
|
||
<div class="card"><h4><span class="icon" style="background:#5865f2;">🎮</span> Discord</h4><p>Send messages to channels via bot.</p></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Highlight active nav link
|
||
document.querySelectorAll('.nav-links a').forEach(a => {
|
||
if (a.href === location.href) a.classList.add('active');
|
||
});
|
||
</script>
|
||
<script src="https://hermes.squaremcp.com/chat-widget.js"></script>
|
||
</body>
|
||
</html>
|