From 58a6d0f2007a4d4c22138f4d7c9abf38e93205d5 Mon Sep 17 00:00:00 2001 From: Garfield Date: Fri, 12 Jun 2026 12:55:42 -0400 Subject: [PATCH] =?UTF-8?q?style(design):=20FINDING-003,004,005,006,007,00?= =?UTF-8?q?8,009=20=E2=80=94=20remove=20emoji,=20H4=E2=86=92H3,=20touch=20?= =?UTF-8?q?targets,=20favicon,=20nav=20link,=20H1=20text-wrap?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/index.html | 37 +++++++++++++++++++------------------ docs/squaremcp-logo.svg | 18 ++++++++++++++++++ docs/styles.css | 9 +++++++-- 3 files changed, 44 insertions(+), 20 deletions(-) create mode 100644 docs/squaremcp-logo.svg diff --git a/docs/index.html b/docs/index.html index 1233678..9570f89 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,6 +5,7 @@ SquareMCP Docs — AI Social Media Gateway + @@ -18,31 +19,31 @@ Agent tutorial API reference ↗ - Open app + Open app
-

Build AI agents that
talk to the world

+

Build AI agents that talk to the world

SquareMCP connects Claude, Codex CLI, and opencode to LinkedIn, TikTok, WhatsApp, Instagram, Twitter, and more — through a single MCP server.

-

🚀 Getting started

+

Getting started

Add SquareMCP to Claude Desktop, Codex CLI, or opencode in five minutes.

 -

🔌 Platform guides

+

Platform guides

Connect LinkedIn, TikTok, and WhatsApp. Step-by-step setup for each platform.

 -

🤖 Agent tutorial

+

Agent tutorial

Real code: a Claude agent that researches news and posts to LinkedIn automatically.

 -

📖 API reference ↗

+

API reference ↗

Full OpenAPI spec for every social tool. Mail API available separately.
@@ -54,33 +55,33 @@

Supported clients

-

Claude Desktop

+

Claude Desktop

Add a mcpServers entry to claude_desktop_config.json. No extra software needed.

-

Codex CLI

+

Codex CLI

Pass --mcp-server or configure in ~/.codex/config.json. Full PKCE OAuth flow supported.

-

opencode

+

opencode

Add SquareMCP to your opencode MCP providers list. HTTP Bearer transport.

-

Custom agents

+

Custom agents

Any MCP client that supports Streamable HTTP transport works. See the agent tutorial for a from-scratch example.

Supported platforms

-

in LinkedIn

Post text, images, and video. Search connections, send messages.

-

🎵 TikTok

Upload and publish videos. View creator analytics.

-

💬 WhatsApp

Send messages and templates. Receive inbound via webhook.

-

📷 Instagram

Publish reels and image posts via Business API.

-

𝕏 Twitter / X

Tweet with media. Search and read timeline.

-

f Facebook

Post to pages, share photos and video.

-

✈️ Telegram

Send messages and photos via bot token.

-

🎮 Discord

Send messages to channels via bot.

+

in LinkedIn

Post text, images, and video. Search connections, send messages.

+

Tk TikTok

Upload and publish videos. View creator analytics.

+

WA WhatsApp

Send messages and templates. Receive inbound via webhook.

+

Ig Instagram

Publish reels and image posts via Business API.

+

𝕏 Twitter / X

Tweet with media. Search and read timeline.

+

f Facebook

Post to pages, share photos and video.

+

Tg Telegram

Send messages and photos via bot token.

+

Dc Discord

Send messages to channels via bot.

diff --git a/docs/squaremcp-logo.svg b/docs/squaremcp-logo.svg new file mode 100644 index 0000000..84c53f8 --- /dev/null +++ b/docs/squaremcp-logo.svg @@ -0,0 +1,18 @@ + + SquareMCP logo + + + + + + + + + diff --git a/docs/styles.css b/docs/styles.css index df422a7..a590500 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -87,11 +87,15 @@ a:hover { text-decoration: underline; } .nav-cta { background: var(--accent); color: #fff !important; - padding: 7px 16px; + padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; + min-height: 44px; + display: inline-flex; + align-items: center; transition: background 0.15s; + white-space: nowrap; } .nav-cta:hover { background: var(--accent-hover) !important; text-decoration: none !important; } @@ -111,6 +115,7 @@ a:hover { text-decoration: underline; } font-weight: 700; line-height: 1.25; margin-bottom: 12px; + text-wrap: balance; } .hero p { @@ -247,7 +252,7 @@ p code, li code { } .card:hover { border-color: #3a3a3b; } -.card h4 { font-size: 15px; margin-bottom: 6px; } +.card h3, .card h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; } .card p { font-size: 13px; color: var(--text-secondary); margin: 0; } /* ── Tab switcher ── */