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 { ArrowUpRight, Bot, Compass, Lightbulb, Sparkles } from "lucide-react";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
|
||||
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 =
|
||||
"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() {
|
||||
return (
|
||||
<div className="px-4 py-4 md:px-6 md:py-6 pb-24 md:pb-8 overflow-auto">
|
||||
<div className="mx-auto max-w-5xl space-y-4">
|
||||
<div className="card bg-base-100 border border-base-300">
|
||||
<div className="card-body gap-3">
|
||||
<div className="flex items-center gap-2 text-primary">
|
||||
<Sparkles className="size-5" />
|
||||
<span className="text-sm font-semibold uppercase tracking-wide">
|
||||
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!
|
||||
<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-2xl">
|
||||
<h1 className="text-2xl font-semibold">AI & Agents</h1>
|
||||
<p className="mt-2 text-sm text-base-content/70 leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
<div className="text-sm text-base-content/80">
|
||||
Message us on{" "}
|
||||
<p className="mt-3 text-sm text-base-content/70 leading-relaxed">
|
||||
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
|
||||
className="link link-primary"
|
||||
href={DISCORD_URL}
|
||||
@ -39,89 +37,121 @@ function AiPage() {
|
||||
>
|
||||
Discord
|
||||
</a>{" "}
|
||||
or email me at{" "}
|
||||
or email{" "}
|
||||
<a className="link link-primary" href={`mailto:${SUPPORT_EMAIL}`}>
|
||||
{SUPPORT_EMAIL}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card bg-base-100 border border-base-300">
|
||||
<div className="card-body gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bot className="size-4 text-primary" />
|
||||
<h2 className="card-title text-base">
|
||||
Planned: SEO Research Agent
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-sm text-base-content/70">
|
||||
Ask SEO questions, run focused research, and get help using the
|
||||
app without leaving your workflow.
|
||||
{/* 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card bg-base-100 border border-base-300 md:col-span-2">
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card bg-base-100 border border-base-300 md:col-span-2">
|
||||
<div className="card-body gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Compass className="size-4 text-primary" />
|
||||
<h2 className="card-title text-base">
|
||||
DataForSEO MCP for agentic workflows
|
||||
</h2>
|
||||
</div>
|
||||
<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 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"
|
||||
>
|
||||
<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>
|
||||
<div>
|
||||
<a
|
||||
className="btn btn-outline btn-sm"
|
||||
href={DATAFORSEO_MCP_DOCS_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"
|
||||
>
|
||||
Open DataForSEO MCP docs
|
||||
DataForSEO MCP setup guide
|
||||
<ArrowUpRight className="size-3.5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Roadmap */}
|
||||
<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>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user