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>
214 lines
9.6 KiB
HTML
214 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Getting Started — SquareMCP Docs</title>
|
|
<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" class="active">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>Getting started</h1>
|
|
<p>Connect your AI assistant to SquareMCP in five minutes. Choose your client below.</p>
|
|
</div>
|
|
|
|
<h2>Step 1 — Create your account</h2>
|
|
<ol class="steps">
|
|
<li>
|
|
<div>
|
|
<strong>Sign up at squaremcp.com</strong>
|
|
Open the <a href="https://squaremcp.com" target="_blank">SquareMCP dashboard</a>, create an account, and verify your email.
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<strong>Get your access token</strong>
|
|
Click <strong>Connect MCP Client</strong> in the dashboard. This opens a short OAuth flow that issues a Bearer token bound to your account.
|
|
Copy the token shown on the confirmation page — it won't be displayed again.
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<strong>Connect at least one platform</strong>
|
|
Go to <strong>Platforms</strong> and connect LinkedIn, TikTok, WhatsApp, or any other service. See <a href="platforms.html">Platform guides</a> for step-by-step instructions per platform.
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
|
|
<h2>Step 2 — Configure your MCP client</h2>
|
|
|
|
<div class="tabs">
|
|
<button class="tab active" onclick="switchTab(this,'claudeai')">claude.ai</button>
|
|
<button class="tab" onclick="switchTab(this,'claude')">Claude Desktop</button>
|
|
<button class="tab" onclick="switchTab(this,'codex')">Codex CLI</button>
|
|
<button class="tab" onclick="switchTab(this,'opencode')">opencode</button>
|
|
</div>
|
|
|
|
<div id="tab-claudeai" class="tab-content tab-panel active">
|
|
<p>Connect SquareMCP directly inside the claude.ai web interface — no config files needed.</p>
|
|
<ol class="steps">
|
|
<li><div><strong>Open MCP Servers</strong> — go to <strong>claude.ai → Settings → MCP Servers</strong> and click <strong>Add</strong>.</div></li>
|
|
<li><div><strong>Enter the server URL</strong></div></li>
|
|
</ol>
|
|
<pre><code>https://hermes.squaremcp.com</code></pre>
|
|
<ol class="steps" start="3">
|
|
<li>
|
|
<div>
|
|
<strong>Complete the OAuth flow</strong> — a popup will open at <code>hermes.squaremcp.com/login</code>.
|
|
Sign in with your SquareMCP account credentials. After signing in you will be shown a consent page — click <strong>Connect MCP client</strong>.
|
|
The popup closes and the connector shows as <strong>Connected</strong>.
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
<div class="callout">
|
|
<strong>Why a separate login page?</strong>
|
|
Browsers partition cookies per top-level site. The OAuth popup runs on <code>hermes.squaremcp.com</code>, so your session must be established there — not on <code>app.squaremcp.com</code> — for the cookie to be visible.
|
|
</div>
|
|
<h3>Troubleshooting claude.ai connections</h3>
|
|
<p><strong>Popup doesn't open</strong> — make sure your browser isn't blocking pop-ups from claude.ai. Allow pop-ups for claude.ai and retry.</p>
|
|
<p><strong>Stuck on login after connecting</strong> — the popup may have been closed before the OAuth flow finished. Remove the server entry, click Add again, and complete the full popup flow.</p>
|
|
<p><strong>Shows connected but tools don't appear</strong> — start a new conversation. Tools from newly connected MCP servers appear in the next conversation's tool picker.</p>
|
|
</div>
|
|
|
|
<div id="tab-claude" class="tab-content tab-panel">
|
|
<pre><code><span class="cmt">// ~/Library/Application Support/Claude/claude_desktop_config.json (macOS)</span>
|
|
<span class="cmt">// %APPDATA%\Claude\claude_desktop_config.json (Windows)</span>
|
|
{
|
|
<span class="str">"mcpServers"</span>: {
|
|
<span class="str">"squaremcp"</span>: {
|
|
<span class="str">"type"</span>: <span class="str">"http"</span>,
|
|
<span class="str">"url"</span>: <span class="str">"https://hermes.squaremcp.com/mcp"</span>,
|
|
<span class="str">"headers"</span>: {
|
|
<span class="str">"Authorization"</span>: <span class="str">"Bearer YOUR_TOKEN_HERE"</span>
|
|
}
|
|
}
|
|
}
|
|
}</code></pre>
|
|
<p>Restart Claude Desktop after saving. You should see SquareMCP tools in the tool picker (hammer icon).</p>
|
|
</div>
|
|
|
|
<div id="tab-codex" class="tab-content tab-panel">
|
|
<pre><code><span class="cmt"># ~/.codex/config.json</span>
|
|
{
|
|
<span class="str">"mcpServers"</span>: {
|
|
<span class="str">"squaremcp"</span>: {
|
|
<span class="str">"type"</span>: <span class="str">"http"</span>,
|
|
<span class="str">"url"</span>: <span class="str">"https://hermes.squaremcp.com/mcp"</span>,
|
|
<span class="str">"headers"</span>: {
|
|
<span class="str">"Authorization"</span>: <span class="str">"Bearer YOUR_TOKEN_HERE"</span>
|
|
}
|
|
}
|
|
}
|
|
}</code></pre>
|
|
<p>Or pass inline per command:</p>
|
|
<pre><code>codex --mcp-server squaremcp=https://hermes.squaremcp.com/mcp \
|
|
--mcp-header squaremcp:Authorization="Bearer YOUR_TOKEN_HERE" \
|
|
"Post a LinkedIn update about today's product launch"</code></pre>
|
|
<div class="callout">
|
|
<strong>PKCE flow (optional)</strong>
|
|
Codex CLI supports the full OAuth PKCE flow. Run <code>codex auth squaremcp</code> and follow the browser prompt — no token copy-paste required.
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tab-opencode" class="tab-content tab-panel">
|
|
<pre><code><span class="cmt"># ~/.config/opencode/config.json</span>
|
|
{
|
|
<span class="str">"mcp"</span>: {
|
|
<span class="str">"servers"</span>: {
|
|
<span class="str">"squaremcp"</span>: {
|
|
<span class="str">"type"</span>: <span class="str">"http"</span>,
|
|
<span class="str">"url"</span>: <span class="str">"https://hermes.squaremcp.com/mcp"</span>,
|
|
<span class="str">"headers"</span>: {
|
|
<span class="str">"Authorization"</span>: <span class="str">"Bearer YOUR_TOKEN_HERE"</span>
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}</code></pre>
|
|
<p>Save the file and restart opencode. The SquareMCP tools will appear in the tool list automatically.</p>
|
|
</div>
|
|
|
|
<h2>Step 3 — Verify the connection</h2>
|
|
<p>Ask your AI assistant:</p>
|
|
<pre><code>What social platforms do I have connected?</code></pre>
|
|
<p>It should call <code>get_profile</code> or <code>linkedin_get_profile</code> and return your account details. If you see a "Platform not connected" error, revisit the <a href="platforms.html">Platform guides</a>.</p>
|
|
|
|
<h2>Available tools</h2>
|
|
<p>SquareMCP exposes tools across every connected platform. A few highlights:</p>
|
|
|
|
<div class="card-grid">
|
|
<div class="card">
|
|
<h4>linkedin_create_post</h4>
|
|
<p>Publish text, image, or video to your LinkedIn feed.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h4>tiktok_create_video</h4>
|
|
<p>Upload a video file and publish it to TikTok.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h4>whatsapp_send_message</h4>
|
|
<p>Send a WhatsApp message to any number via Business API.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h4>twitter_create_tweet</h4>
|
|
<p>Post a tweet with optional media attachment.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h4>instagram_create_reel</h4>
|
|
<p>Publish a reel to your Instagram Business account.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h4>send_email</h4>
|
|
<p>Send email from any connected IMAP/SMTP account.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p>See the full list in the <a href="https://hermes.squaremcp.com/openapi-social.json" target="_blank">API reference</a>.</p>
|
|
|
|
<h2>Troubleshooting</h2>
|
|
|
|
<h3>Tools not appearing in Claude</h3>
|
|
<p>Restart Claude Desktop after editing <code>claude_desktop_config.json</code>. If tools still don't appear, open the Claude Desktop developer console and look for MCP connection errors.</p>
|
|
|
|
<h3>"Platform not connected" errors</h3>
|
|
<p>The tool was called but the platform isn't linked to your account. Open the dashboard and connect the platform under <strong>Platforms</strong>.</p>
|
|
|
|
<h3>"Token expired" badge in dashboard</h3>
|
|
<p>OAuth tokens for LinkedIn, TikTok, and Instagram expire. SquareMCP attempts an automatic refresh — if that fails, reconnect the platform. WhatsApp, Telegram, and Discord use long-lived bot tokens that don't expire.</p>
|
|
|
|
<h3>Rate limit errors</h3>
|
|
<p>Each SquareMCP plan has a monthly tool-call limit. Check <strong>Usage</strong> in the dashboard. Upgrade your plan if you're consistently hitting the limit.</p>
|
|
|
|
<div class="callout callout-warn">
|
|
<strong>Keep your Bearer token secret</strong>
|
|
Your Bearer token has full access to every connected platform. Treat it like a password. Rotate it from the dashboard if you suspect it's been exposed.
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function switchTab(btn, id) {
|
|
btn.closest('.page').querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
btn.closest('.page').querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
document.getElementById('tab-' + id).classList.add('active');
|
|
}
|
|
</script>
|
|
<script src="https://hermes.squaremcp.com/chat-widget.js"></script>
|
|
</body>
|
|
</html>
|