engineering/tpmjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2.0k

feat: update MCP config to native HTTP transport and add moltbook tool

Browse source 
Switch collection MCP configs from npx mcp-remote to native HTTP
transport, fix Claude Code CLI arg order (options before name/url),
rename API key placeholder to YOUR_TPMJS_API_KEY, and add moltbook
social network tool to official blocks.
This commit is contained in:
Ajax Davis 2026-02-07 19:40:54 +10:00
parent 99017322ba
commit 36598fec61
12 changed files with 1838 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

32
apps/web/src/app/(profile)/[username]/collections/[slug]/CollectionDetailClient.tsx
View file

@ -126,14 +126,15 @@ function McpUrlSection({
setTimeout(() => setCopiedUrl(null), 2000);
};
// Claude Code CLI command (correct arg order: options before name and url)
const claudeCodeCommand = `claude mcp add --transport http tpmjs-${slug} ${httpUrl}`;
// Claude Desktop native HTTP config
const configSnippet = `{
"mcpServers": {
"tpmjs-${slug}": {
"command": "npx",
"args": [
"mcp-remote",
"${httpUrl}"
]
"type": "http",
"url": "${httpUrl}"
}
}
}`;
@ -232,6 +233,27 @@ const response = await fetch("${httpUrl}", {
</div>
)}
{/* Claude Code CLI command */}
<div className="mt-4 pt-4 border-t border-border/50">
<h4 className="text-sm font-medium text-foreground mb-2">Add to Claude Code</h4>
<div className="relative">
<pre className="p-3 bg-surface border border-border rounded-lg text-xs font-mono text-foreground-secondary overflow-x-auto whitespace-pre-wrap break-all">
{claudeCodeCommand}
</pre>
<Button
variant="ghost"
size="sm"
onClick={() => navigator.clipboard.writeText(claudeCodeCommand)}
className="absolute top-1.5 right-1.5"
>
<Icon icon="copy" className="w-3.5 h-3.5" />
</Button>
</div>
<p className="mt-1.5 text-xs text-foreground-tertiary">
Run <code className="font-mono">/mcp</code> in Claude Code to verify the connection.
</p>
</div>
{/* Config snippet toggle */}
<div className="mt-4 pt-4 border-t border-border/50 space-y-2">
<button

44
apps/web/src/app/dashboard/collections/[id]/page.tsx
View file

@ -369,16 +369,18 @@ export default function CollectionDetailPage(): React.ReactElement {
const httpUrl = `${baseUrl}/api/mcp/${collection.user.username}/${collection.slug}/http`;
const sseUrl = `${baseUrl}/api/mcp/${collection.user.username}/${collection.slug}/sse`;
// Claude Code CLI command (correct arg order: options before name and url)
const claudeCodeCommand = `claude mcp add --transport http --header "Authorization: Bearer YOUR_TPMJS_API_KEY" ${collection.slug} ${httpUrl}`;
// Claude Desktop native HTTP config
const configSnippet = `{
"mcpServers": {
"${collection.slug}": {
"command": "npx",
"args": [
"mcp-remote",
"${httpUrl}",
"--header",
"Authorization: Bearer YOUR_TPMJS_API_KEY"
]
"type": "http",
"url": "${httpUrl}",
"headers": {
"Authorization": "Bearer YOUR_TPMJS_API_KEY"
}
}
}
}`;
@ -573,7 +575,35 @@ export default function CollectionDetailPage(): React.ReactElement {
<McpUrlDisplay url={sseUrl} label="SSE Transport" sublabel="streaming" />
</div>
{/* Claude Code CLI command */}
<div className="mt-6 pt-4 border-t border-border">
<h4 className="text-sm font-medium text-foreground mb-2">Add to Claude Code</h4>
<div className="relative">
<pre className="p-4 bg-surface-secondary border border-border rounded-lg text-xs font-mono text-foreground-secondary overflow-x-auto whitespace-pre-wrap break-all">
{claudeCodeCommand}
</pre>
<Button
variant="ghost"
size="sm"
onClick={() => navigator.clipboard.writeText(claudeCodeCommand)}
className="absolute top-2 right-2"
>
<Icon icon="copy" size="xs" />
</Button>
</div>
<p className="mt-2 text-xs text-foreground-tertiary">
Replace <code className="font-mono">YOUR_TPMJS_API_KEY</code> with your{' '}
<Link
href="/dashboard/settings/tpmjs-api-keys"
className="text-primary hover:underline"
>
TPMJS API key
</Link>
. Then run <code className="font-mono">/mcp</code> in Claude Code to verify.
</p>
</div>
<div className="mt-4">
<button
type="button"
onClick={() => setShowClaudeConfig(!showClaudeConfig)}

17
apps/web/src/components/collections/InstallationSection.tsx
View file

@ -41,11 +41,14 @@ export function InstallationSection({
const mcpUrl = `${baseUrl}/@${username}/collections/${collection.slug}/mcp`;
// Build the claude mcp add command
const commandParts = ['claude mcp add', collection.slug, '--transport http', mcpUrl];
// Options must come before <name> <url>
const commandParts = ['claude mcp add'];
commandParts.push('--transport http');
if (isPrivate) {
commandParts.push('--header "Authorization: Bearer YOUR_API_KEY"');
commandParts.push('--header "Authorization: Bearer YOUR_TPMJS_API_KEY"');
}
commandParts.push(collection.slug);
commandParts.push(mcpUrl);
const installCommand = commandParts.join(' \\\n ');
@ -58,7 +61,7 @@ export function InstallationSection({
type: 'http',
url: mcpUrl,
headers: {
Authorization: 'Bearer YOUR_API_KEY',
Authorization: 'Bearer YOUR_TPMJS_API_KEY',
},
},
},
@ -87,8 +90,8 @@ export function InstallationSection({
const copyCommand = async () => {
// Copy the flat command (without line breaks for easy pasting)
const flatCommand = isPrivate
? `claude mcp add ${collection.slug} --transport http ${mcpUrl} --header "Authorization: Bearer YOUR_API_KEY"`
: `claude mcp add ${collection.slug} --transport http ${mcpUrl}`;
? `claude mcp add --transport http --header "Authorization: Bearer YOUR_TPMJS_API_KEY" ${collection.slug} ${mcpUrl}`
: `claude mcp add --transport http ${collection.slug} ${mcpUrl}`;
await navigator.clipboard.writeText(flatCommand);
setCopiedCommand(true);
@ -212,7 +215,7 @@ export function InstallationSection({
<CodeBlock language="json" code={claudeDesktopConfig} />
{isPrivate && (
<p className="mt-2 text-xs text-foreground-tertiary">
Replace <code className="font-mono">YOUR_API_KEY</code> with your{' '}
Replace <code className="font-mono">YOUR_TPMJS_API_KEY</code> with your{' '}
<Link
href="/dashboard/settings/tpmjs-api-keys"
className="text-primary hover:underline"