feat(marketplace): template publish + fork + voting/ranking + admin moderation
What this enables:
- A user builds an MCP server. If others would benefit, they click 'Publish as
template' on their server detail page. The spec + pre-rendered TypeScript
snapshot is preserved.
- Visitors browse /templates, filter by category, sort by trending/top/newest.
Each template card shows fork count + active deployment count as natural
manipulation-resistant popularity signal.
- /templates/[slug] shows the full plan: tool list with input schemas,
required-credential explanations (with 'how to get one' deep links), and a
collapsible code preview so users can audit before forking.
- Fork is one click → /servers/new?template=slug. The wizard skips Step 1 and
pre-fills Step 2 with the template's parsed spec. Forker only fills in their
own credentials. mcp_servers.template_id is recorded; template.fork_count is
bumped atomically. Each fork gets its own isolated container with its own
port, its own AES-256 secrets — the template author has zero visibility into
the fork's traffic or data.
- Admin /admin/templates moderation: verify quality templates (shows shield
badge in marketplace), hide low-effort ones, takedown anything malicious.
Takedowns cascade-pause every fork container — owners must re-deploy.
Why template+fork instead of shared-container:
- Shared containers would mean the publisher's quota + their secrets + their
logs are exposed to forkers. Bad ergonomics, bad security, bad ownership.
- Templates/forks decouple the spec (shared, vouched-for) from the runtime
(isolated per user). Network-effect moat without the trust collapse.
Why no 5-star voting in v1:
- Manipulation-anfällig, empty lists without adoption. We use fork count +
active deploys + verified badge. Trending algorithm:
score = (activeDeploys * 3 + forks) / sqrt(ageDays + 1)
Real signal, no brigading attack surface.
Backend:
- New schema: templates table (16 cols incl. tools_schema, generated_code,
required_secrets, allowedDomains, status enum, verified, fork_count).
- mcp_servers.template_id FK + idx for fork lookup.
- @bmm/types: SpecEdit unchanged, CreateServerInput accepts optional templateId.
- preview-cache.ts: new cachePrebuiltCode/loadPrebuiltCode for storing the
template's full rendered server.ts alongside the spec. Generator worker
detects this and skips the render step — uses the audited pre-built code
verbatim. Banned-pattern re-scan at publish time.
- routes/templates.ts: 5 public/auth routes + 2 admin routes. Banned-pattern
re-scan before publish. Slug auto-uniqued. forkCount atomic-increment via
SQL.
UI:
- /templates marketplace with trending/top/newest tabs, category filter, search.
Cards show forks + live count + author + verified badge.
- /templates/[slug] full detail with tools, credentials-with-hints, expandable
code preview, fork CTA, ownership + stats sidebar, 'forking is safe' explainer.
- /servers/new?template=slug — wizard auto-jumps to Step 2 with template spec
pre-filled, fork banner at top with link back to template.
- /servers/[id] new Publish tab with title, category, descriptions, per-secret
hint fields (description + howToGetUrl per UPPER_SNAKE_CASE key).
- /admin/templates moderation with verify/hide/takedown actions.
- Marketing nav now includes /templates.
Verified end-to-end:
- Published Echo Demo Template from marco@test.local's live server
- Marketplace lists it correctly with stats
- Detail page renders with all sections
- Fork CTA navigates to wizard with ?template= param
- Wizard skips Step 1, shows fork banner, pre-fills spec
- Build succeeds in ~10s (cached spec + prebuilt code path skips Claude AND
render), container live on :4109 with proper OAuth 401 → token → 200 flow
- DB: templates.fork_count=1, activeDeployments=1, mcp_servers.template_id
populated on the fork
- /admin/templates shows the new template with verify/hide/takedown controls
This commit is contained in:
Marco Sadjadi
@@ -8,7 +8,7 @@ import { CodeBlock } from '@/components/code-block';
|
||||
import { InstallSnippets } from '@/components/install-snippets';
|
||||
import { StreamingLogs } from '@/components/streaming-logs';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Textarea, Label } from '@/components/input';
|
||||
import { Input, Textarea, Label } from '@/components/input';
|
||||
import { cn } from '@/lib/cn';
|
||||
import type { ToolSpec } from '@bmm/types';
|
||||
|
||||
@@ -34,7 +34,7 @@ interface BuildSummary {
|
||||
errorMessage: string | null;
|
||||
}
|
||||
|
||||
type Tab = 'overview' | 'tools' | 'logs' | 'metrics' | 'secrets' | 'iterate';
|
||||
type Tab = 'overview' | 'tools' | 'logs' | 'metrics' | 'secrets' | 'iterate' | 'publish';
|
||||
|
||||
export default function ServerDetailPage() {
|
||||
const params = useParams<{ id: string }>();
|
||||
@@ -85,6 +85,7 @@ export default function ServerDetailPage() {
|
||||
{ id: 'metrics', label: 'Metrics' },
|
||||
{ id: 'secrets', label: 'Secrets' },
|
||||
{ id: 'iterate', label: 'Iterate' },
|
||||
{ id: 'publish', label: 'Publish' },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -268,6 +269,255 @@ export default function ServerDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'publish' && <PublishPanel serverId={server.id} serverStatus={server.status} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const CATEGORIES = [
|
||||
'productivity',
|
||||
'developer-tools',
|
||||
'data',
|
||||
'communication',
|
||||
'finance',
|
||||
'crm',
|
||||
'analytics',
|
||||
'devops',
|
||||
'demo',
|
||||
'other',
|
||||
];
|
||||
|
||||
interface SecretHint {
|
||||
key: string;
|
||||
description: string;
|
||||
howToGetUrl: string;
|
||||
}
|
||||
|
||||
function PublishPanel({ serverId, serverStatus }: { serverId: string; serverStatus: string }) {
|
||||
const [title, setTitle] = useState('');
|
||||
const [category, setCategory] = useState('other');
|
||||
const [shortDescription, setShortDescription] = useState('');
|
||||
const [longDescription, setLongDescription] = useState('');
|
||||
const [secretHints, setSecretHints] = useState<SecretHint[]>([]);
|
||||
const [state, setState] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [publishedSlug, setPublishedSlug] = useState<string | null>(null);
|
||||
|
||||
if (serverStatus !== 'live') {
|
||||
return (
|
||||
<div className="panel p-4">
|
||||
<p className="text-[13px] text-[--color-fg-muted]">
|
||||
Server must be live before publishing as a template. Current status:{' '}
|
||||
<span className="mono">{serverStatus}</span>.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function addHint() {
|
||||
setSecretHints((h) => [...h, { key: '', description: '', howToGetUrl: '' }]);
|
||||
}
|
||||
function updateHint(i: number, patch: Partial<SecretHint>) {
|
||||
setSecretHints((h) => {
|
||||
const next = [...h];
|
||||
const cur = next[i];
|
||||
if (!cur) return h;
|
||||
next[i] = { ...cur, ...patch };
|
||||
return next;
|
||||
});
|
||||
}
|
||||
function removeHint(i: number) {
|
||||
setSecretHints((h) => h.filter((_, j) => j !== i));
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
setError(null);
|
||||
if (title.length < 3) {
|
||||
setError('Title needs at least 3 characters.');
|
||||
return;
|
||||
}
|
||||
if (shortDescription.length < 10) {
|
||||
setError('Short description needs at least 10 characters.');
|
||||
return;
|
||||
}
|
||||
// Validate secret hints
|
||||
for (const h of secretHints) {
|
||||
if (!h.key) {
|
||||
setError('Empty secret key — remove the row or fill it in.');
|
||||
return;
|
||||
}
|
||||
if (!/^[A-Z][A-Z0-9_]*$/.test(h.key)) {
|
||||
setError(`Secret key "${h.key}" must be UPPER_SNAKE_CASE.`);
|
||||
return;
|
||||
}
|
||||
if (h.description.length < 1) {
|
||||
setError(`Add a description for ${h.key}.`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setState('submitting');
|
||||
try {
|
||||
const res = await apiFetch<{ template: { slug: string } }>('/v1/templates', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
serverId,
|
||||
title,
|
||||
category,
|
||||
shortDescription,
|
||||
longDescription: longDescription || undefined,
|
||||
secretHints: secretHints.map((h) => ({
|
||||
key: h.key,
|
||||
description: h.description,
|
||||
...(h.howToGetUrl ? { howToGetUrl: h.howToGetUrl } : {}),
|
||||
})),
|
||||
}),
|
||||
});
|
||||
setPublishedSlug(res.template.slug);
|
||||
setState('success');
|
||||
} catch (e) {
|
||||
const detail = (e as { detail?: { error?: string; detail?: string } }).detail;
|
||||
setError(detail?.detail ?? detail?.error ?? (e as Error).message);
|
||||
setState('error');
|
||||
}
|
||||
}
|
||||
|
||||
if (state === 'success' && publishedSlug) {
|
||||
return (
|
||||
<div className="panel p-4">
|
||||
<div className="text-[14px] font-semibold tracking-tight">Published 🎉</div>
|
||||
<p className="mt-2 text-[12.5px] text-[--color-fg-muted]">
|
||||
Your template is live on the marketplace.
|
||||
</p>
|
||||
<div className="mt-3 flex gap-2">
|
||||
<a
|
||||
href={`/templates/${publishedSlug}`}
|
||||
className="inline-flex h-8 items-center rounded-md bg-[--color-accent] px-3 text-[12.5px] font-medium text-white transition-colors hover:bg-[#5557e8]"
|
||||
>
|
||||
Open in marketplace →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="panel p-4 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-[14px] font-semibold tracking-tight">Publish as template</h3>
|
||||
<p className="mt-1 text-[12px] text-[--color-fg-muted]">
|
||||
Share this server's spec on the public marketplace. Others fork in one click — they
|
||||
run their own container with their own credentials. Your secrets are never shared.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-[1fr_220px]">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="t-title">Title</Label>
|
||||
<Input
|
||||
id="t-title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Notion Reader"
|
||||
maxLength={128}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="t-cat">Category</Label>
|
||||
<select
|
||||
id="t-cat"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
className="h-8 w-full rounded-md border border-[--color-border] bg-[--color-bg-subtle] px-2.5 text-[13px] focus:border-[--color-accent] focus:outline-none"
|
||||
>
|
||||
{CATEGORIES.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{c}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="t-short" hint={`${shortDescription.length}/280`}>
|
||||
Short description
|
||||
</Label>
|
||||
<Input
|
||||
id="t-short"
|
||||
value={shortDescription}
|
||||
onChange={(e) => setShortDescription(e.target.value)}
|
||||
placeholder="Search and read pages from a Notion workspace."
|
||||
maxLength={280}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="t-long">Long description (optional)</Label>
|
||||
<Textarea
|
||||
id="t-long"
|
||||
rows={4}
|
||||
value={longDescription}
|
||||
onChange={(e) => setLongDescription(e.target.value)}
|
||||
placeholder="What does it do, what doesn't it do, what should the user know before forking?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label hint="Help future users understand which credentials they need and where to get them">
|
||||
Credential hints
|
||||
</Label>
|
||||
{secretHints.length === 0 && (
|
||||
<p className="text-[11.5px] text-[--color-fg-muted]">
|
||||
None. This server doesn't need any credentials.
|
||||
</p>
|
||||
)}
|
||||
{secretHints.map((h, i) => (
|
||||
<div key={i} className="panel-subtle p-2.5 space-y-2">
|
||||
<div className="grid grid-cols-[200px_1fr_auto] gap-2">
|
||||
<Input
|
||||
placeholder="NOTION_API_KEY"
|
||||
value={h.key}
|
||||
onChange={(e) => updateHint(i, { key: e.target.value.toUpperCase() })}
|
||||
className="mono"
|
||||
/>
|
||||
<Input
|
||||
placeholder="What is this credential? One sentence."
|
||||
value={h.description}
|
||||
onChange={(e) => updateHint(i, { description: e.target.value })}
|
||||
/>
|
||||
<Button variant="ghost" size="md" onClick={() => removeHint(i)}>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
<Input
|
||||
placeholder="https://notion.so/my-integrations (optional 'How to get one' link)"
|
||||
value={h.howToGetUrl}
|
||||
onChange={(e) => updateHint(i, { howToGetUrl: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<Button variant="ghost" size="sm" onClick={addHint}>
|
||||
+ Add credential hint
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-[12.5px] text-[--color-danger]">{error}</p>}
|
||||
|
||||
<div className="flex items-center justify-between border-t border-[--color-border] pt-3">
|
||||
<p className="text-[11px] text-[--color-fg-subtle]">
|
||||
By publishing, you agree the generated code may be inspected by others.
|
||||
</p>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
onClick={submit}
|
||||
disabled={state === 'submitting'}
|
||||
>
|
||||
{state === 'submitting' ? 'Publishing…' : 'Publish'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { apiFetch } from '@/lib/api';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input, Label, Textarea } from '@/components/input';
|
||||
@@ -98,10 +98,68 @@ export default function NewServerPage() {
|
||||
const [buildId, setBuildId] = useState<string | null>(null);
|
||||
const [serverId, setServerId] = useState<string | null>(null);
|
||||
const [result, setResult] = useState<BuildResult | null>(null);
|
||||
const [forkedTemplateId, setForkedTemplateId] = useState<string | null>(null);
|
||||
const [forkedTemplateTitle, setForkedTemplateTitle] = useState<string | null>(null);
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const templateSlug = searchParams.get('template');
|
||||
|
||||
const trySlug = (n: string) =>
|
||||
n.toLowerCase().replace(/[^a-z0-9-]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 32);
|
||||
|
||||
// Fork-from-template flow: skip Step 1, jump straight to Step 2 with the template's spec
|
||||
useEffect(() => {
|
||||
if (!templateSlug || preview) return;
|
||||
let cancelled = false;
|
||||
setStep('analyzing');
|
||||
(async () => {
|
||||
try {
|
||||
const res = await apiFetch<{
|
||||
previewId: string;
|
||||
templateId: string;
|
||||
template: {
|
||||
slug: string;
|
||||
title: string;
|
||||
shortDescription: string;
|
||||
tools: PreviewTool[];
|
||||
requiredSecrets: Array<{
|
||||
key: string;
|
||||
description: string;
|
||||
howToGetUrl?: string;
|
||||
}>;
|
||||
};
|
||||
}>(`/v1/templates/${templateSlug}/fork`, { method: 'POST', body: '{}' });
|
||||
if (cancelled) return;
|
||||
setName(res.template.title);
|
||||
setSlug(trySlug(res.template.title));
|
||||
setPrompt(`Fork of "${res.template.title}" template.`);
|
||||
setForkedTemplateId(res.templateId);
|
||||
setForkedTemplateTitle(res.template.title);
|
||||
setPreview({
|
||||
previewId: res.previewId,
|
||||
source: 'mock',
|
||||
spec: {
|
||||
name: res.template.title,
|
||||
description: res.template.shortDescription,
|
||||
tools: res.template.tools,
|
||||
requiredSecrets: res.template.requiredSecrets.map((s) => s.key),
|
||||
scopes: [],
|
||||
},
|
||||
});
|
||||
setEditable(null);
|
||||
setStep('confirm');
|
||||
} catch (e) {
|
||||
if (cancelled) return;
|
||||
const detail = (e as { detail?: { error?: string } }).detail;
|
||||
setError(detail?.error ?? (e as Error).message);
|
||||
setStep('prompt');
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [templateSlug, preview]);
|
||||
|
||||
useEffect(() => {
|
||||
if (preview && !editable) {
|
||||
const e = specToEditable(preview.spec);
|
||||
@@ -256,7 +314,9 @@ export default function NewServerPage() {
|
||||
prompt,
|
||||
secrets: filledSecrets,
|
||||
previewId: preview.previewId,
|
||||
specEdit,
|
||||
// Don't send specEdit when forking — the template's spec + pre-rendered code
|
||||
// are already in the Redis cache. Edits would invalidate the impls.
|
||||
...(forkedTemplateId ? { templateId: forkedTemplateId } : { specEdit }),
|
||||
}),
|
||||
},
|
||||
);
|
||||
@@ -363,6 +423,22 @@ export default function NewServerPage() {
|
||||
|
||||
{step === 'confirm' && preview && editable && (
|
||||
<div className="mt-7 space-y-6">
|
||||
{forkedTemplateTitle && (
|
||||
<div className="panel-subtle p-3 flex items-center justify-between">
|
||||
<div className="text-[12.5px]">
|
||||
Forking <span className="mono font-semibold">{forkedTemplateTitle}</span> — fill in
|
||||
your own credentials below. The template author never sees them.
|
||||
</div>
|
||||
<a
|
||||
href={`/templates/${templateSlug}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-[11.5px] text-[--color-fg-muted] underline hover:text-[--color-fg]"
|
||||
>
|
||||
Template ↗
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
<div className="panel p-4">
|
||||
<div className="flex items-baseline justify-between">
|
||||
<h2 className="text-[14px] font-semibold tracking-tight">Confirm what we'll build</h2>
|
||||
|
||||
Reference in New Issue
Block a user