feat: initial commit - Jhonny Editor
- Adicionado estrutura completa do projeto - Configurado MCP server para Premiere Pro - Adicionado documentação e skills - Configurado Gitignore para o projeto
This commit is contained in:
João Henrique
@@ -0,0 +1,116 @@
|
||||
import { AlertTriangle, ArrowDown, CheckCircle2, FileCode2, PlugZap, TerminalSquare } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import { product } from "@/lib/product"
|
||||
|
||||
const bridgeSteps = [
|
||||
{
|
||||
icon: TerminalSquare,
|
||||
title: "Your AI calls a tool",
|
||||
description: "Claude, Cursor, Windsurf, or another MCP client sends a structured request to the local server.",
|
||||
},
|
||||
{
|
||||
icon: FileCode2,
|
||||
title: "The bridge runs it in Premiere",
|
||||
description: "A versioned helper library and small ES3 script pass through a private shared temp directory.",
|
||||
},
|
||||
{
|
||||
icon: PlugZap,
|
||||
title: "Premiere returns a result",
|
||||
description: "The CEP bridge executes the command and sends structured data, confirmation, or diagnostics back to the client.",
|
||||
},
|
||||
]
|
||||
|
||||
const diagnostics = [
|
||||
{
|
||||
icon: CheckCircle2,
|
||||
title: "Automatic bridge startup",
|
||||
description: "The CEP bridge creates its temp directory and starts polling when Premiere activates.",
|
||||
},
|
||||
{
|
||||
icon: AlertTriangle,
|
||||
title: "Modal-stall diagnostics",
|
||||
description: "In-flight heartbeats help distinguish an open Premiere dialog from a disconnected bridge.",
|
||||
},
|
||||
]
|
||||
|
||||
export function ArchitectureSection() {
|
||||
return (
|
||||
<section id="how-it-works" className="reveal-section border-y border-zinc-900 bg-[#050506] px-5 py-24 md:py-32">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<figure className="mb-16 overflow-hidden rounded-xl border border-white/10 bg-black">
|
||||
<Image
|
||||
src="/marketing/premiere-pro-mcp-workflow-v1.png"
|
||||
alt="Local-first workflow: an AI assistant sends a request through the MCP bridge to Premiere, which returns a verified result."
|
||||
width={1672}
|
||||
height={941}
|
||||
sizes="(max-width: 768px) 100vw, 1152px"
|
||||
className="h-auto w-full"
|
||||
/>
|
||||
<figcaption className="border-t border-zinc-800 px-5 py-4 text-sm leading-6 text-zinc-400">
|
||||
The recommended path keeps the assistant, MCP bridge, Premiere, and project media on the same computer. A verified result still depends on a live host connection.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<div className="grid gap-16 lg:grid-cols-2 lg:gap-20">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold tracking-tight text-white md:text-4xl">How the bridge <span className="text-purple-400">works</span></h2>
|
||||
<p className="mt-4 max-w-xl text-base leading-7 text-zinc-400">
|
||||
A local-first file bridge keeps the control path inspectable and avoids exposing your project media to the MCP server.
|
||||
</p>
|
||||
<div className="mt-10">
|
||||
{bridgeSteps.map((step, index) => (
|
||||
<div key={step.title} className="relative flex gap-5 pb-9 last:pb-0">
|
||||
{index < bridgeSteps.length - 1 && <span className="absolute left-[19px] top-10 h-[calc(100%-2rem)] w-px bg-zinc-800" aria-hidden="true" />}
|
||||
<span className="relative z-10 grid h-10 w-10 shrink-0 place-items-center rounded-md border border-zinc-800 bg-zinc-950 text-purple-400">
|
||||
<step.icon className="h-5 w-5" strokeWidth={1.6} />
|
||||
</span>
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-zinc-100">{step.title}</h3>
|
||||
<p className="mt-2 text-sm leading-6 text-zinc-500">{step.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold tracking-tight text-white md:text-4xl">Compatibility & <span className="text-purple-400">diagnostics</span></h2>
|
||||
<p className="mt-4 max-w-xl text-base leading-7 text-zinc-400">
|
||||
The signed CEP connector is the default route for Premiere Pro {product.premiereCompatibility} on macOS and Windows. A modern UXP bridge adds capability-gated workflows on compatible newer hosts.
|
||||
</p>
|
||||
<div className="mt-10 space-y-4">
|
||||
{diagnostics.map((item) => (
|
||||
<article key={item.title} className="flex gap-4 rounded-xl border border-zinc-800 bg-zinc-950 p-5">
|
||||
<item.icon className="mt-0.5 h-6 w-6 shrink-0 text-purple-300" strokeWidth={1.5} />
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-zinc-100">{item.title}</h3>
|
||||
<p className="mt-2 text-sm leading-6 text-zinc-500">{item.description}</p>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-6 rounded-xl border border-amber-500/20 bg-amber-500/[0.04] p-5">
|
||||
<p className="text-sm leading-6 text-zinc-400">
|
||||
<span className="font-semibold text-amber-200">Know the boundary:</span> UXP is capability-gated for compatible newer Premiere workflows; it is not yet the default installer or a replacement for CEP. Premiere’s undocumented QE DOM is powerful but imperfect, so results should be verified before you rely on them.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 flex flex-col gap-4 rounded-xl border border-zinc-800 bg-black px-5 py-5 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-zinc-200">Need the full tool list, schemas, or troubleshooting guide?</p>
|
||||
<p className="mt-1 text-sm text-zinc-500">The README documents every setup path and known security boundary.</p>
|
||||
</div>
|
||||
<a
|
||||
href="https://github.com/leancoderkavy/premiere-pro-mcp#readme"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex shrink-0 items-center gap-2 text-sm font-semibold text-purple-300 transition-colors hover:text-purple-200"
|
||||
>
|
||||
Read the documentation <ArrowDown className="h-4 w-4 -rotate-90" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user