From 02fcfb9834d192af205194c6c7708a33868b6ab1 Mon Sep 17 00:00:00 2001 From: Ben Senescu Date: Fri, 8 May 2026 13:40:51 -0400 Subject: [PATCH] Update AI page for MCP setup guidance --- src/client/navigation/items.ts | 2 +- src/routes/_project/p/$projectId/ai.tsx | 295 ++++++++++++++++++------ 2 files changed, 231 insertions(+), 66 deletions(-) diff --git a/src/client/navigation/items.ts b/src/client/navigation/items.ts index 20068d2..643378d 100644 --- a/src/client/navigation/items.ts +++ b/src/client/navigation/items.ts @@ -62,7 +62,7 @@ const projectNavItems = [ }, { to: "/p/$projectId/ai" as const, - label: "AI & Agents", + label: "AI & MCP", icon: Bot, matchSegment: "/ai", }, diff --git a/src/routes/_project/p/$projectId/ai.tsx b/src/routes/_project/p/$projectId/ai.tsx index 0aa141d..2802322 100644 --- a/src/routes/_project/p/$projectId/ai.tsx +++ b/src/routes/_project/p/$projectId/ai.tsx @@ -4,27 +4,94 @@ import { ArrowUpRight } from "lucide-react"; const DISCORD_URL = "https://discord.gg/c9uGs3cFXr"; const SUPPORT_EMAIL = "ben@openseo.so"; const SAM_GITHUB_URL = "https://github.com/every-app/sam"; -const DATAFORSEO_MCP_DOCS_URL = - "https://dataforseo.com/help-center/setting-up-the-official-dataforseo-mcp-server-simple-guide"; +const CHATGPT_MCP_DOCS_URL = "https://platform.openai.com/docs/mcp"; +const CLAUDE_CONNECTORS_DOCS_URL = + "https://support.anthropic.com/en/articles/11503834-building-custom-integrations-via-remote-mcp-servers"; + +const mcpTools = [ + { + name: "whoami", + description: + "Check which OpenSEO user and workspace the client can access.", + }, + { + name: "list_projects", + description: "Find your OpenSEO projects and copy the right projectId.", + }, + { + name: "research_keywords", + description: + "Turn seed terms into keyword ideas with volume, difficulty, and CPC.", + }, + { + name: "get_serp_results", + description: + "Inspect live Google results for keyword and competitor research.", + }, + { + name: "get_domain_overview", + description: + "Summarize a domain's organic footprint before deeper research.", + }, + { + name: "get_domain_keyword_suggestions", + description: + "Find keywords a domain already ranks for or could expand into.", + }, + { + name: "get_backlinks_overview", + description: "Review backlink authority and referring-domain signals.", + }, + { + name: "get_rank_tracker", + description: "Read your tracked keyword positions from OpenSEO.", + }, + { + name: "list_saved_keywords", + description: "Pull saved keyword lists into an agent workflow.", + }, + { + name: "save_keywords", + description: "Save promising keyword ideas back to OpenSEO.", + }, +] as const; + +const promptExamples = [ + { + title: "Keyword research", + prompt: + "Use OpenSEO to research keywords for my project. Start with these seed topics: [seed 1], [seed 2], [seed 3]. Group the best opportunities by search intent, prioritize low-difficulty terms, and suggest which keywords I should save.", + }, + { + title: "Competitor research", + prompt: + "Use OpenSEO to compare my domain [yourdomain.com] against these competitors: [competitor1.com], [competitor2.com]. Summarize their strongest keyword themes, backlink advantages, and the first content opportunities I should pursue.", + }, + { + title: "SERP brief", + prompt: + "Use OpenSEO to inspect the live SERP for [keyword]. Tell me who ranks, what search intent Google is rewarding, what pages are cited repeatedly, and what a better page should include.", + }, +] as const; export const Route = createFileRoute("/_project/p/$projectId/ai")({ component: AiPage, }); function AiPage() { + const mcpUrl = + typeof window === "undefined" + ? "https://app.openseo.so/mcp" + : `${window.location.origin}/mcp`; + return (
-
-

AI & Agents

+
+

AI & MCP

- OpenSEO is brand new. Our goal is to build the most powerful and - intuitive tool to help your websites rank better. AI will play a large - role in that. -

-

- Lots of other SEO tools have an overwhelming number of - “features”. We think many of these can be hidden by - default, only shown to you when you want them. + Connect OpenSEO to your coding agent or AI workspace so it can run SEO + research with your project data: keyword ideas, SERP results, domain + overviews, backlinks, rank tracking, and saved keywords.

This is community-driven — we want to hear what matters to you. Reach @@ -44,75 +111,171 @@ function AiPage() { .

- {/* Sam */}
-

Sam: AI SEO Teammate

+

MCP server

- Sam turns your Claude Code or favorite coding agent into a powerful - SEO teammate. Sam has a specialized workflow for writing great - content, but you can teach Sam about your SEO workflow and needs and - it will customize itself for you. + Use this endpoint when a client asks for the OpenSEO MCP server URL. + You will be sent through OpenSEO login the first time a client + connects.

+
+

+ MCP endpoint +

+ + {mcpUrl} + +
+
+ +
+

Connect Codex

+

+ Codex supports hosted MCP servers from the CLI. Add OpenSEO, then + run the OAuth login flow. +

+ 
+            {`codex mcp add openseo --url ${mcpUrl}
+codex mcp login openseo`}
+

- Sam handles keyword research, source discovery, and drafting — with - a built-in QA loop that checks quality and accuracy before you - publish. + After login, ask Codex to call whoami, then{" "} + list_projects. Use the returned projectId{" "} + for keyword, SERP, domain, backlink, and rank-tracking requests.

+
+ +
+

Connect Claude Code CLI

+

+ Claude Code can add OpenSEO as an HTTP MCP server. Use the user + scope if you want it available across projects, or local scope if + this repository is the only place you need it. +

+ 
+            {`claude mcp add --transport http --scope user openseo ${mcpUrl}`}
+

- Works with DataForSEO MCP for real SEO data. Model-agnostic — use it - with Claude Code, GPT, or others. + If Claude Code prompts you to authorize the server, approve the + OpenSEO login flow. Then ask it to list MCP tools or call{" "} + whoami to confirm the connection.

-
    - {[ - "Keyword research & topic analysis", - "Source discovery & verification", - "Content drafting with QA", - ].map((item) => ( -
  • - - — - - {item} -
    • - ))} +
+ +
+

+ ChatGPT, Claude web, and Claude Desktop +

+

+ Web AI clients handle MCP setup differently from coding tools. Use + the same endpoint above when adding a custom connector or MCP + server, then authorize OpenSEO when the client asks you to sign in. +

+
    +
  • + + — + + + In ChatGPT, enable developer mode if needed, then create a + custom MCP connector from Apps & Connectors and use the endpoint + above. + +
    • +
  • + + — + + + In Claude web or Claude Desktop, add OpenSEO from Settings, + Connectors. Remote MCP servers should be added there, not by + editing the desktop JSON config. + +
+

+ Start by asking the client to check whoami and{" "} + list_projects. Once it can see your projects, it can + help with research planning, SERP analysis, competitor comparisons, + and saving useful keywords back to OpenSEO. +

+ +
+ +
+

Available tools

+
+ {mcpTools.map((tool) => ( +
+ + {tool.name} + +

+ {tool.description} +

+
+ ))} +
+
+ +
+

Prompts to try

+
+ {promptExamples.map((example) => ( +
+

{example.title}

+

+ {example.prompt} +

+
+ ))} +
+
+ +
+

Sam: AI SEO teammate

+

+ Sam is an experimental content workflow for Claude Code and other + coding agents. It combines keyword research, source discovery, + drafting, and QA for teams that want an agent to help produce + publishable SEO content. +

- View on GitHub + View Sam on GitHub
- {/* Use any coding agent */} -
-

Use any coding agent

-

- Pair your preferred agent with the DataForSEO MCP server to access - keyword volumes, SERP results, backlink profiles, and more. -

-

- Claude Code · Cursor · Windsurf · Codex - · any MCP-compatible agent -

- - DataForSEO MCP setup guide - - -
- - {/* Roadmap */}

Roadmap

    @@ -128,7 +291,9 @@ function AiPage() { "Generate drafts using saved keywords and business context", }, { - title: "More MCP integrations", + title: "More MCP clients", + description: + "Better setup guidance for ChatGPT, Claude web, OpenCode, and other clients as their MCP support matures", }, ].map((item) => (