admin/metatron-open-seo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign AI page (#114)

Browse Source
This commit is contained in:
Ben Senescu 2026-04-15 11:41:04 -04:00 committed by GitHub
parent 1b6bf8fd94
commit 4595080356
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 139 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
src/routes/_project/p/$projectId/ai.tsx
View File

@ -1,8 +1,9 @@
import { createFileRoute } from "@tanstack/react-router"; import { createFileRoute } from "@tanstack/react-router";
import { ArrowUpRight, Bot, Compass, Lightbulb, Sparkles } from "lucide-react"; import { ArrowUpRight } from "lucide-react";
const DISCORD_URL = "https://discord.gg/c9uGs3cFXr"; const DISCORD_URL = "https://discord.gg/c9uGs3cFXr";
const SUPPORT_EMAIL = "ben@everyapp.com"; const SUPPORT_EMAIL = "ben@openseo.so";
const SAM_GITHUB_URL = "https://github.com/every-app/sam";
const DATAFORSEO_MCP_DOCS_URL = const DATAFORSEO_MCP_DOCS_URL =
"https://dataforseo.com/help-center/setting-up-the-official-dataforseo-mcp-server-simple-guide"; "https://dataforseo.com/help-center/setting-up-the-official-dataforseo-mcp-server-simple-guide";
@ -12,116 +13,145 @@ export const Route = createFileRoute("/_project/p/$projectId/ai")({
function AiPage() { function AiPage() {
return ( return (
<div className="px-4 py-4 md:px-6 md:py-6 pb-24 md:pb-8 overflow-auto"> <div className="px-4 py-12 md:px-6 md:py-20 pb-24 md:pb-8 overflow-auto">
<div className="mx-auto max-w-5xl space-y-4"> <div className="mx-auto max-w-2xl">
<div className="card bg-base-100 border border-base-300"> <h1 className="text-2xl font-semibold">AI & Agents</h1>
<div className="card-body gap-3"> <p className="mt-2 text-sm text-base-content/70 leading-relaxed">
<div className="flex items-center gap-2 text-primary"> OpenSEO is brand new. Our goal is to build the most powerful and
<Sparkles className="size-5" /> intuitive tool to help your websites rank better. AI will play a large
<span className="text-sm font-semibold uppercase tracking-wide"> role in that.
Coming Soon </p>
</span> <p className="mt-3 text-sm text-base-content/70 leading-relaxed">
</div> Lots of other SEO tools have an overwhelming number of
<h1 className="text-2xl font-semibold"> &ldquo;features&rdquo;. We think many of these can be hidden by
AI-powered features are coming soon default, only shown to you when you want them.
</h1> </p>
<p className="text-sm text-base-content/70 max-w-3xl"> <p className="mt-3 text-sm text-base-content/70 leading-relaxed">
We want this to be community driven. If there&apos;s a workflow This is community-driven — we want to hear what matters to you. Reach
you want solved first, let me know! out on{" "}
</p> <a
<div className="text-sm text-base-content/80"> className="link link-primary"
Message us on{" "} href={DISCORD_URL}
<a target="_blank"
className="link link-primary" rel="noreferrer"
href={DISCORD_URL} >
target="_blank" Discord
rel="noreferrer" </a>{" "}
or email{" "}
<a className="link link-primary" href={`mailto:${SUPPORT_EMAIL}`}>
{SUPPORT_EMAIL}
</a>
.
</p>
{/* Sam */}
<section className="mt-12">
<h2 className="text-xl font-semibold">Sam: AI SEO Teammate</h2>
<p className="mt-2 text-sm text-base-content/70 leading-relaxed">
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.
</p>
<p className="mt-3 text-sm text-base-content/70 leading-relaxed">
Sam handles keyword research, source discovery, and drafting — with
a built-in QA loop that checks quality and accuracy before you
publish.
</p>
<p className="mt-3 text-sm text-base-content/70 leading-relaxed">
Works with DataForSEO MCP for real SEO data. Model-agnostic — use it
with Claude Code, GPT, or others.
</p>
<ul className="mt-4 space-y-2">
{[
"Keyword research & topic analysis",
"Source discovery & verification",
"Content drafting with QA",
].map((item) => (
<li
key={item}
className="flex gap-2.5 text-sm text-base-content/70"
> >
Discord <span className="mt-[2px] shrink-0 text-base-content/40">
</a>{" "} &mdash;
or email me at{" "} </span>
<a className="link link-primary" href={`mailto:${SUPPORT_EMAIL}`}> {item}
{SUPPORT_EMAIL} </li>
</a> ))}
. </ul>
</div> <a
</div> href={SAM_GITHUB_URL}
</div> target="_blank"
rel="noreferrer"
className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-base-content hover:text-base-content/60 transition-colors"
>
View on GitHub
<ArrowUpRight className="size-3.5" />
</a>
</section>
<div className="grid gap-4 md:grid-cols-2"> {/* Use any coding agent */}
<div className="card bg-base-100 border border-base-300"> <section className="mt-12">
<div className="card-body gap-3"> <h2 className="text-xl font-semibold">Use any coding agent</h2>
<div className="flex items-center gap-2"> <p className="mt-2 text-sm text-base-content/70 leading-relaxed">
<Sparkles className="size-4 text-primary" /> Pair your preferred agent with the DataForSEO MCP server to access
<h2 className="card-title text-base"> keyword volumes, SERP results, backlink profiles, and more.
Planned: Content Assistant </p>
</h2> <p className="mt-3 text-sm text-base-content/60">
</div> Claude Code &middot; Cursor &middot; Windsurf &middot; Codex
<p className="text-sm text-base-content/70"> &middot; any MCP-compatible agent
Generate blog post drafts using your saved keywords, business </p>
context, and general strategy. <a
</p> href={DATAFORSEO_MCP_DOCS_URL}
</div> target="_blank"
</div> rel="noreferrer"
className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-base-content hover:text-base-content/60 transition-colors"
>
DataForSEO MCP setup guide
<ArrowUpRight className="size-3.5" />
</a>
</section>
<div className="card bg-base-100 border border-base-300"> {/* Roadmap */}
<div className="card-body gap-3"> <section className="mt-12">
<div className="flex items-center gap-2"> <h2 className="text-xl font-semibold">Roadmap</h2>
<Bot className="size-4 text-primary" /> <ul className="mt-4 space-y-4">
<h2 className="card-title text-base"> {[
Planned: SEO Research Agent {
</h2> title: "In-app SEO Research Agent",
</div> description:
<p className="text-sm text-base-content/70"> "Ask questions and run research without leaving OpenSEO",
Ask SEO questions, run focused research, and get help using the },
app without leaving your workflow. {
</p> title: "Content Assistant",
</div> description:
</div> "Generate drafts using saved keywords and business context",
},
<div className="card bg-base-100 border border-base-300 md:col-span-2"> {
<div className="card-body gap-3"> title: "More MCP integrations",
<div className="flex items-center gap-2"> },
<Lightbulb className="size-4 text-primary" /> ].map((item) => (
<h2 className="card-title text-base"> <li key={item.title}>
Content Assistant workflow today <p className="flex gap-2.5 text-sm text-base-content/70">
</h2> <span className="mt-[2px] shrink-0 text-base-content/40">
</div> &mdash;
<p className="text-sm text-base-content/70"> </span>
If you want content generation right now, make a local folder <span>
and use Claude Code, Claude/Cowork, Cursor, Codex, or a similar <span className="font-medium text-base-content">
coding agent. Paste in your keywords, business plan, and {item.title}
strategy, then iterate with the agent until the draft is right. </span>
</p> {item.description ? (
</div> <>
</div> <br />
{item.description}
<div className="card bg-base-100 border border-base-300 md:col-span-2"> </>
<div className="card-body gap-3"> ) : null}
<div className="flex items-center gap-2"> </span>
<Compass className="size-4 text-primary" /> </p>
<h2 className="card-title text-base"> </li>
DataForSEO MCP for agentic workflows ))}
</h2> </ul>
</div> </section>
<p className="text-sm text-base-content/70">
If you want the best agentic path for DataForSEO API data, use
the official DataForSEO MCP server setup guide.
</p>
<div>
<a
className="btn btn-outline btn-sm"
href={DATAFORSEO_MCP_DOCS_URL}
target="_blank"
rel="noreferrer"
>
Open DataForSEO MCP docs
<ArrowUpRight className="size-3.5" />
</a>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
); );