From 99bd0fb061ceae2159369e61c3da23fedbbba0c3 Mon Sep 17 00:00:00 2001 From: Ajax Davis Date: Sun, 28 Dec 2025 12:39:02 +1000 Subject: [PATCH] feat: add mobile responsiveness across all pages - Add hamburger menu icon and MobileMenu slide-out drawer component - Update AppHeader with responsive nav (hidden on mobile, hamburger shown) - Apply responsive styles to all 14 pages: - Responsive headings (text-2xl sm:text-3xl md:text-4xl) - Responsive grid gaps (gap-4 md:gap-6) - Explicit mobile grid columns (grid-cols-1 md:grid-cols-X) - Flex stacking on mobile (flex-col sm:flex-row) - Add mobile nav dropdown to docs page - Update README to correctly frame TPMJS as a discovery registry first, with agent integration as secondary/optional --- README.md | 52 +++---- apps/web/src/app/changelog/page.tsx | 6 +- apps/web/src/app/docs/page.tsx | 36 ++++- apps/web/src/app/faq/page.tsx | 2 +- apps/web/src/app/how-it-works/page.tsx | 42 +++-- apps/web/src/app/page.tsx | 8 +- apps/web/src/app/playground/page.tsx | 48 ++++-- apps/web/src/app/privacy/page.tsx | 46 ++++-- apps/web/src/app/publish/page.tsx | 46 ++++-- apps/web/src/app/sdk/page.tsx | 40 +++-- apps/web/src/app/spec/page.tsx | 52 +++++-- apps/web/src/app/terms/page.tsx | 72 ++++++--- apps/web/src/app/tool/[...slug]/page.tsx | 12 +- apps/web/src/app/tool/tool-search/page.tsx | 29 ++-- apps/web/src/components/AppHeader.tsx | 173 ++++++++++++--------- apps/web/src/components/MobileMenu.tsx | 148 ++++++++++++++++++ packages/ui/src/Icon/icons.ts | 4 + 17 files changed, 583 insertions(+), 233 deletions(-) create mode 100644 apps/web/src/components/MobileMenu.tsx diff --git a/README.md b/README.md index 6b2454d..03b88c6 100644 --- a/README.md +++ b/README.md @@ -2,38 +2,21 @@ [![CI](https://github.com/tpmjs/tpmjs/actions/workflows/ci.yml/badge.svg)](https://github.com/tpmjs/tpmjs/actions/workflows/ci.yml) -**TPMJS is a registry that lets AI agents discover and use npm packages as tools at runtime.** +**TPMJS is a registry for discovering AI tools published to npm.** -Instead of manually importing and configuring tools, agents search by description and load what they need on-demand. Publish your npm package with the `tpmjs-tool` keywordโ€”it appears on [tpmjs.com](https://tpmjs.com) within 15 minutes. +Browse, search, and find tools at [tpmjs.com](https://tpmjs.com). Publish your tool by adding the `tpmjs-tool` keyword to your package.jsonโ€”it appears in the registry within 15 minutes. ## Why TPMJS? -- **No config files** - Agents discover tools by describing what they need -- **Always up-to-date** - Tools load from npm at runtime, no manual updates -- **Works with any agent** - Compatible with Vercel AI SDK, LangChain, OpenAI, Claude, etc. -- **Publish once** - Add one keyword to package.json, publish to npm, done +- **Discover tools** - Search and browse AI tools by category, quality score, and popularity +- **Publish easily** - Add one keyword to package.json, publish to npm, done +- **Quality metrics** - Tools are scored based on documentation, downloads, and metadata completeness +- **Agent integration** - Optional SDK for agents to search and execute tools at runtime ## Quick Start -**For AI agent developers:** -```bash -npm install @tpmjs/sdk -``` +### Publishing a Tool -```typescript -import { searchRegistry, executeRegistry } from '@tpmjs/sdk'; - -// Find tools by description -const tools = await searchRegistry({ query: 'parse PDF documents' }); - -// Execute a tool -const result = await executeRegistry({ - toolId: 'pdf-parser/extractText', - input: { url: 'https://example.com/doc.pdf' } -}); -``` - -**For tool publishers:** ```bash npx @tpmjs/create-basic-tools ``` @@ -43,14 +26,31 @@ Or add manually to your package.json: { "keywords": ["tpmjs-tool"], "tpmjs": { - "category": "text-analysis", - "description": "What your tool does" + "category": "text-analysis" } } ``` +Publish to npm and your tool appears on [tpmjs.com](https://tpmjs.com) within 15 minutes. + See [HOW_TO_PUBLISH_A_TOOL.md](./HOW_TO_PUBLISH_A_TOOL.md) for the full guide. +### For AI Agents (Optional) + +Agents can search and execute tools from the registry: + +```bash +npm install @tpmjs/registry-search @tpmjs/registry-execute +``` + +```typescript +import { registrySearchTool } from '@tpmjs/registry-search'; +import { registryExecuteTool } from '@tpmjs/registry-execute'; + +// Add to your agent's tools +const tools = [registrySearchTool, registryExecuteTool]; +``` + --- ## Monorepo Structure diff --git a/apps/web/src/app/changelog/page.tsx b/apps/web/src/app/changelog/page.tsx index e9ca637..25b6631 100644 --- a/apps/web/src/app/changelog/page.tsx +++ b/apps/web/src/app/changelog/page.tsx @@ -198,7 +198,9 @@ export default function ChangelogPage() {
{/* Header */}
-

Changelog

+

+ Changelog +

Release history for all published TPMJS packages. Track new features, improvements, and fixes across our SDK and tools. @@ -206,7 +208,7 @@ export default function ChangelogPage() {

{/* Legend */} -
+
Breaking changes diff --git a/apps/web/src/app/docs/page.tsx b/apps/web/src/app/docs/page.tsx index cf614e2..99a70fa 100644 --- a/apps/web/src/app/docs/page.tsx +++ b/apps/web/src/app/docs/page.tsx @@ -195,6 +195,7 @@ function InfoCard({ export default function DocsPage(): React.ReactElement { const [activeSection, setActiveSection] = useState('introduction'); + const [mobileNavOpen, setMobileNavOpen] = useState(false); useEffect(() => { const observer = new IntersectionObserver( @@ -222,6 +223,7 @@ export default function DocsPage(): React.ReactElement { const element = document.getElementById(id); if (element) { element.scrollIntoView({ behavior: 'smooth' }); + setMobileNavOpen(false); } }; @@ -229,8 +231,26 @@ export default function DocsPage(): React.ReactElement {
-
- {/* Sidebar */} +
+ {/* Mobile Navigation Toggle */} +
+ + {/* Mobile Nav Dropdown */} + {mobileNavOpen && ( +
+ +
+ )} +
+ + {/* Desktop Sidebar */}