Redesign AI page (#114)
This commit is contained in:
Ben Senescu
GitHub
parent
1b6bf8fd94
commit
4595080356
@ -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,25 +13,22 @@ 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
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<h1 className="text-2xl font-semibold">
|
|
||||||
AI-powered features are coming soon
|
|
||||||
</h1>
|
|
||||||
<p className="text-sm text-base-content/70 max-w-3xl">
|
|
||||||
We want this to be community driven. If there's a workflow
|
|
||||||
you want solved first, let me know!
|
|
||||||
</p>
|
</p>
|
||||||
<div className="text-sm text-base-content/80">
|
<p className="mt-3 text-sm text-base-content/70 leading-relaxed">
|
||||||
Message us on{" "}
|
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.
|
||||||
|
</p>
|
||||||
|
<p className="mt-3 text-sm text-base-content/70 leading-relaxed">
|
||||||
|
This is community-driven — we want to hear what matters to you. Reach
|
||||||
|
out on{" "}
|
||||||
<a
|
<a
|
||||||
className="link link-primary"
|
className="link link-primary"
|
||||||
href={DISCORD_URL}
|
href={DISCORD_URL}
|
||||||
@ -39,89 +37,121 @@ function AiPage() {
|
|||||||
>
|
>
|
||||||
Discord
|
Discord
|
||||||
</a>{" "}
|
</a>{" "}
|
||||||
or email me at{" "}
|
or email{" "}
|
||||||
<a className="link link-primary" href={`mailto:${SUPPORT_EMAIL}`}>
|
<a className="link link-primary" href={`mailto:${SUPPORT_EMAIL}`}>
|
||||||
{SUPPORT_EMAIL}
|
{SUPPORT_EMAIL}
|
||||||
</a>
|
</a>
|
||||||
.
|
.
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-4 md:grid-cols-2">
|
|
||||||
<div className="card bg-base-100 border border-base-300">
|
|
||||||
<div className="card-body gap-3">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Sparkles className="size-4 text-primary" />
|
|
||||||
<h2 className="card-title text-base">
|
|
||||||
Planned: Content Assistant
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-base-content/70">
|
|
||||||
Generate blog post drafts using your saved keywords, business
|
|
||||||
context, and general strategy.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card bg-base-100 border border-base-300">
|
{/* Sam */}
|
||||||
<div className="card-body gap-3">
|
<section className="mt-12">
|
||||||
<div className="flex items-center gap-2">
|
<h2 className="text-xl font-semibold">Sam: AI SEO Teammate</h2>
|
||||||
<Bot className="size-4 text-primary" />
|
<p className="mt-2 text-sm text-base-content/70 leading-relaxed">
|
||||||
<h2 className="card-title text-base">
|
Sam turns your Claude Code or favorite coding agent into a powerful
|
||||||
Planned: SEO Research Agent
|
SEO teammate. Sam has a specialized workflow for writing great
|
||||||
</h2>
|
content, but you can teach Sam about your SEO workflow and needs and
|
||||||
</div>
|
it will customize itself for you.
|
||||||
<p className="text-sm text-base-content/70">
|
|
||||||
Ask SEO questions, run focused research, and get help using the
|
|
||||||
app without leaving your workflow.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<p className="mt-3 text-sm text-base-content/70 leading-relaxed">
|
||||||
</div>
|
Sam handles keyword research, source discovery, and drafting — with
|
||||||
|
a built-in QA loop that checks quality and accuracy before you
|
||||||
<div className="card bg-base-100 border border-base-300 md:col-span-2">
|
publish.
|
||||||
<div className="card-body gap-3">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Lightbulb className="size-4 text-primary" />
|
|
||||||
<h2 className="card-title text-base">
|
|
||||||
Content Assistant workflow today
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-base-content/70">
|
|
||||||
If you want content generation right now, make a local folder
|
|
||||||
and use Claude Code, Claude/Cowork, Cursor, Codex, or a similar
|
|
||||||
coding agent. Paste in your keywords, business plan, and
|
|
||||||
strategy, then iterate with the agent until the draft is right.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<p className="mt-3 text-sm text-base-content/70 leading-relaxed">
|
||||||
</div>
|
Works with DataForSEO MCP for real SEO data. Model-agnostic — use it
|
||||||
|
with Claude Code, GPT, or others.
|
||||||
<div className="card bg-base-100 border border-base-300 md:col-span-2">
|
</p>
|
||||||
<div className="card-body gap-3">
|
<ul className="mt-4 space-y-2">
|
||||||
<div className="flex items-center gap-2">
|
{[
|
||||||
<Compass className="size-4 text-primary" />
|
"Keyword research & topic analysis",
|
||||||
<h2 className="card-title text-base">
|
"Source discovery & verification",
|
||||||
DataForSEO MCP for agentic workflows
|
"Content drafting with QA",
|
||||||
</h2>
|
].map((item) => (
|
||||||
</div>
|
<li
|
||||||
<p className="text-sm text-base-content/70">
|
key={item}
|
||||||
If you want the best agentic path for DataForSEO API data, use
|
className="flex gap-2.5 text-sm text-base-content/70"
|
||||||
the official DataForSEO MCP server setup guide.
|
>
|
||||||
|
<span className="mt-[2px] shrink-0 text-base-content/40">
|
||||||
|
—
|
||||||
|
</span>
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a
|
||||||
|
href={SAM_GITHUB_URL}
|
||||||
|
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>
|
||||||
|
|
||||||
|
{/* Use any coding agent */}
|
||||||
|
<section className="mt-12">
|
||||||
|
<h2 className="text-xl font-semibold">Use any coding agent</h2>
|
||||||
|
<p className="mt-2 text-sm text-base-content/70 leading-relaxed">
|
||||||
|
Pair your preferred agent with the DataForSEO MCP server to access
|
||||||
|
keyword volumes, SERP results, backlink profiles, and more.
|
||||||
|
</p>
|
||||||
|
<p className="mt-3 text-sm text-base-content/60">
|
||||||
|
Claude Code · Cursor · Windsurf · Codex
|
||||||
|
· any MCP-compatible agent
|
||||||
</p>
|
</p>
|
||||||
<div>
|
|
||||||
<a
|
<a
|
||||||
className="btn btn-outline btn-sm"
|
|
||||||
href={DATAFORSEO_MCP_DOCS_URL}
|
href={DATAFORSEO_MCP_DOCS_URL}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
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"
|
||||||
>
|
>
|
||||||
Open DataForSEO MCP docs
|
DataForSEO MCP setup guide
|
||||||
<ArrowUpRight className="size-3.5" />
|
<ArrowUpRight className="size-3.5" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
|
||||||
</div>
|
{/* Roadmap */}
|
||||||
</div>
|
<section className="mt-12">
|
||||||
|
<h2 className="text-xl font-semibold">Roadmap</h2>
|
||||||
|
<ul className="mt-4 space-y-4">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
title: "In-app SEO Research Agent",
|
||||||
|
description:
|
||||||
|
"Ask questions and run research without leaving OpenSEO",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Content Assistant",
|
||||||
|
description:
|
||||||
|
"Generate drafts using saved keywords and business context",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "More MCP integrations",
|
||||||
|
},
|
||||||
|
].map((item) => (
|
||||||
|
<li key={item.title}>
|
||||||
|
<p className="flex gap-2.5 text-sm text-base-content/70">
|
||||||
|
<span className="mt-[2px] shrink-0 text-base-content/40">
|
||||||
|
—
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<span className="font-medium text-base-content">
|
||||||
|
{item.title}
|
||||||
|
</span>
|
||||||
|
{item.description ? (
|
||||||
|
<>
|
||||||
|
<br />
|
||||||
|
{item.description}
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user