From 506251bfa58826dea6aeeae35587be6489854c72 Mon Sep 17 00:00:00 2001 From: Ajax Davis Date: Sat, 29 Nov 2025 22:19:43 +1000 Subject: [PATCH] feat(web): add comprehensive /publish page with full publishing guide MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create new /publish page with step-by-step instructions - Show all 3 metadata tiers (Minimal, Basic, Rich) with examples - Include quality score explanation and real-world examples - Add category reference and tips for success - Update homepage with Publish navigation link - Add Publish Your Tool promotional section to homepage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- apps/web/src/app/page.tsx | 51 +++- apps/web/src/app/publish/page.tsx | 441 ++++++++++++++++++++++++++++++ 2 files changed, 489 insertions(+), 3 deletions(-) create mode 100644 apps/web/src/app/publish/page.tsx diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 2de9467..e4b46b6 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -32,9 +32,11 @@ export default function HomePage(): React.ReactElement { Playground - + + + @@ -104,6 +106,49 @@ export default function HomePage(): React.ReactElement { + + {/* Publish Your Tool Section */} +
+ +
+

+ Publish Your AI Tool +

+

+ Share your tool with the AI community. Automatic discovery, quality scoring, and + seamless integration with popular AI frameworks. +

+
+
+
🚀
+

Quick Setup

+

+ Add one keyword to package.json and publish to NPM +

+
+
+
⚡
+

Auto Discovery

+

+ Your tool appears on tpmjs.com within 15 minutes +

+
+
+
📊
+

Quality Metrics

+

+ Automatic scoring based on docs, downloads, and stars +

+
+
+ + + +
+ +
{/* Footer */} diff --git a/apps/web/src/app/publish/page.tsx b/apps/web/src/app/publish/page.tsx new file mode 100644 index 0000000..a2c9ca7 --- /dev/null +++ b/apps/web/src/app/publish/page.tsx @@ -0,0 +1,441 @@ +import { Button } from '@tpmjs/ui/Button/Button'; +import { CodeBlock } from '@tpmjs/ui/CodeBlock/CodeBlock'; +import { Container } from '@tpmjs/ui/Container/Container'; +import { Header } from '@tpmjs/ui/Header/Header'; +import Link from 'next/link'; +import { ThemeToggle } from '../../components/ThemeToggle'; + +export const metadata = { + title: 'Publish a Tool | TPMJS', + description: 'Learn how to publish your AI tool to the TPMJS registry', +}; + +export default function PublishPage(): React.ReactElement { + return ( +
+ {/* Header */} +
+ TPMJS + + } + size="md" + sticky={true} + actions={ +
+ + + + + + + + + + +
+ } + /> + +
+ + {/* Hero */} +
+

+ Publish Your AI Tool +

+

+ Share your tool with the world. Automatic discovery, quality scoring, and AI agent + integration. +

+
+ + {/* Quick Start */} +
+

Quick Start

+
+
    +
  1. Create a new NPM package
    2. +
  2. + Add{' '} + tpmjs-tool{' '} + to keywords +
    3. +
  3. + Add a tpmjs{' '} + field with metadata +
    4. +
  4. Publish to NPM
    5. +
  5. + Your tool appears on{' '} + + tpmjs.com + {' '} + within 15 minutes! +
    6. +
+
+
+ + {/* Step 1: Package.json Setup */} +
+

+ Step 1: Add Required Keyword +

+

+ Add the{' '} + tpmjs-tool{' '} + keyword to your package.json. This is required for automatic discovery. +

+ +
+ + {/* Step 2: Metadata Tiers */} +
+

Step 2: Add TPMJS Metadata

+

+ There are three tiers of metadata. Higher tiers get better visibility and quality + scores. +

+ + {/* Tier 1: Minimal */} +
+
+ + Tier 1: Minimal + + Required fields only +
+ +

+ Quality Score: 1x base multiplier +

+
+ + {/* Tier 2: Basic */} +
+
+ + Tier 2: Basic + + Add parameter & return info +
+ +

+ Quality Score: 2x base multiplier +

+
+ + {/* Tier 3: Rich */} +
+
+ + Tier 3: Rich + + Full documentation +
+ +

+ Quality Score: 4x base multiplier 🚀 +

+
+
+ + {/* Categories */} +
+

Available Categories

+
+ {[ + { name: 'text-analysis', desc: 'NLP, sentiment, summarization' }, + { name: 'code-generation', desc: 'Code generation and transformation' }, + { name: 'data-processing', desc: 'Data manipulation and transformation' }, + { name: 'image-generation', desc: 'Image creation and editing' }, + { name: 'audio-processing', desc: 'Audio/speech processing' }, + { name: 'search', desc: 'Search and retrieval' }, + { name: 'integration', desc: 'Third-party integrations' }, + { name: 'other', desc: 'Anything else' }, + ].map((cat) => ( +
+ {cat.name} +

{cat.desc}

+
+ ))} +
+
+ + {/* Step 3: Publish */} +
+

Step 3: Publish to NPM

+

+ Build your package and publish it to NPM. Your tool will be automatically discovered + within 15 minutes. +

+ +
+ + {/* Quality Score */} +
+

Quality Score

+

+ Your tool gets a quality score based on three factors: +

+
+
+

Tier

+
    +
  • Rich: 4x multiplier
    • +
  • Basic: 2x multiplier
    • +
  • Minimal: 1x multiplier
    • +
+
+
+

Downloads

+

+ Logarithmic scale based on monthly NPM downloads +

+
+
+

GitHub Stars

+

+ Logarithmic scale based on repository stars +

+
+
+
+ + {/* Real Example */} +
+

Real Example

+

+ Here is a complete example from{' '} + + @tpmjs/createblogpost + + : +

+ +
+ + {/* Tips */} +
+

Tips for Success

+
+ {[ + { + icon: '📝', + title: 'Use descriptive names', + desc: 'Make your package name clear and searchable', + }, + { + icon: '📊', + title: 'Complete metadata', + desc: 'Rich tier tools get 4x better visibility', + }, + { + icon: '📚', + title: 'Good documentation', + desc: 'Link to docs in the links.documentation field', + }, + { + icon: '🔄', + title: 'Active maintenance', + desc: 'Regular updates boost download counts', + }, + { + icon: '🤖', + title: 'AI-friendly descriptions', + desc: 'Write aiAgent.useCase as guidance for AI agents', + }, + ].map((tip) => ( +
+
{tip.icon}
+
+

{tip.title}

+

{tip.desc}

+
+
+ ))} +
+
+ + {/* CTA */} +
+

Ready to Publish?

+

+ Follow the steps above and your tool will be live on TPMJS within 15 minutes. +

+
+ + + + + + +
+
+ +
+ + {/* Footer */} + +
+ ); +}