From 70f2e421f910e7a3f59d2ee06d26acfa7d41e43c Mon Sep 17 00:00:00 2001 From: Ajax Davis Date: Thu, 11 Dec 2025 09:08:54 +1000 Subject: [PATCH] fix(tool-details): correct data model and add AI SDK usage examples - Update interface to match actual API response (Tool has package relation) - Fix package name display in installation section (was showing undefined) - Add step-by-step usage instructions: 1. Install package 2. Import the tool 3. Use with AI SDK (generateText example) - Update all sidebar sections to use pkg.* for package-level data - Remove deprecated tpmjsMetadata references - Clean up unused Tags section --- apps/web/src/app/tool/[...slug]/page.tsx | 301 +++++++++++------------ 1 file changed, 140 insertions(+), 161 deletions(-) diff --git a/apps/web/src/app/tool/[...slug]/page.tsx b/apps/web/src/app/tool/[...slug]/page.tsx index d60d92b..2c4d348 100644 --- a/apps/web/src/app/tool/[...slug]/page.tsx +++ b/apps/web/src/app/tool/[...slug]/page.tsx @@ -14,60 +14,54 @@ import { AppHeader } from '~/components/AppHeader'; import { Markdown } from '~/components/Markdown'; import { ToolPlayground } from '~/components/ToolPlayground'; -interface Tool { +interface Package { id: string; npmPackageName: string; npmVersion: string; - description: string; + npmDescription: string | null; + npmHomepage: string | null; category: string; - tags: string[]; npmRepository: { url: string; type: string } | null; - qualityScore: string; isOfficial: boolean; - npmDownloadsLastMonth: number; - npmDownloadsLastWeek: number; + npmDownloadsLastMonth: number | null; npmKeywords: string[]; npmReadme: string | null; npmAuthor: { name: string; email?: string; url?: string } | string | null; npmMaintainers: Array<{ name: string; email?: string }> | null; + npmLicense: string | null; + githubStars: number | null; + frameworks: string[]; + tier: string; + createdAt: string; + updatedAt: string; +} + +interface Tool { + id: string; + exportName: string; + description: string; + parameters: Array<{ + name: string; + type: string; + description: string; + required: boolean; + default?: unknown; + }> | null; + returns: { + type: string; + description: string; + } | null; + aiAgent: { + useCase?: string; + limitations?: string; + examples?: string[]; + } | null; + qualityScore: string | null; importHealth?: 'HEALTHY' | 'BROKEN' | 'UNKNOWN'; executionHealth?: 'HEALTHY' | 'BROKEN' | 'UNKNOWN'; healthCheckError?: string | null; lastHealthCheck?: string | null; - tpmjsMetadata: { - example?: string; - parameters?: Array<{ - name: string; - type: string; - description: string; - required: boolean; - default?: unknown; - }>; - returns?: { - type: string; - description: string; - }; - authentication?: { - required: boolean; - type?: string; - }; - pricing?: { - model: string; - }; - frameworks?: string[]; - links?: { - documentation?: string; - repository?: string; - homepage?: string; - }; - aiAgent?: { - useCase?: string; - limitations?: string; - examples?: string[]; - }; - } | null; - githubStars: number | null; - npmLicense: string | null; + package: Package; createdAt: string; updatedAt: string; } @@ -146,7 +140,8 @@ export default function ToolDetailPage({ ); } - const authorName = typeof tool.npmAuthor === 'string' ? tool.npmAuthor : tool.npmAuthor?.name; + const pkg = tool.package; + const authorName = typeof pkg.npmAuthor === 'string' ? pkg.npmAuthor : pkg.npmAuthor?.name; const recheckHealth = async () => { setRecheckLoading(true); @@ -186,14 +181,17 @@ export default function ToolDetailPage({ Tools / - {tool.npmPackageName} + {pkg.npmPackageName} {/* Title section */}
-

{tool.npmPackageName}

+

{tool.exportName}

+

+ {pkg.npmPackageName} +

{tool.description}

{authorName && (

@@ -201,16 +199,16 @@ export default function ToolDetailPage({

)}
- {tool.isOfficial && ( + {pkg.isOfficial && ( Official )}
- {tool.category} - v{tool.npmVersion} - {tool.npmLicense && {tool.npmLicense}} + {pkg.category} + v{pkg.npmVersion} + {pkg.npmLicense && {pkg.npmLicense}}
@@ -272,105 +270,113 @@ export default function ToolDetailPage({ {/* biome-ignore lint/suspicious/noExplicitAny: Prisma Tool type compatibility with component props */} - {/* Installation */} + {/* Installation & Usage */} - Installation - - Install this tool using your preferred package manager - + Installation & Usage + Install this tool and use it with the AI SDK - - - - + +
+

+ 1. Install the package +

+
+ + +
+
+ +
+

2. Import the tool

+ +
+ +
+

3. Use with AI SDK

+ +
{/* README */} - {tool.npmReadme && ( + {pkg.npmReadme && ( README - - - - )} - - {/* Usage Example */} - {tool.tpmjsMetadata?.example && ( - - - Usage Example - Quick start example - - - + )} {/* AI Agent Information */} - {tool.tpmjsMetadata?.aiAgent && ( + {tool.aiAgent && ( AI Agent Integration How AI agents can use this tool - {tool.tpmjsMetadata.aiAgent.useCase && ( + {tool.aiAgent.useCase && (

Use Case

-

- {tool.tpmjsMetadata.aiAgent.useCase} -

+

{tool.aiAgent.useCase}

)} - {tool.tpmjsMetadata.aiAgent.limitations && ( + {tool.aiAgent.limitations && (

Limitations

- {tool.tpmjsMetadata.aiAgent.limitations} + {tool.aiAgent.limitations}

)} - {tool.tpmjsMetadata.aiAgent.examples && - tool.tpmjsMetadata.aiAgent.examples.length > 0 && ( -
-

Examples

-
    - {tool.tpmjsMetadata.aiAgent.examples.map((example) => ( -
  • - {example} -
    • - ))} -
-
- )} + {tool.aiAgent.examples && tool.aiAgent.examples.length > 0 && ( +
+

Examples

+
    + {tool.aiAgent.examples.map((example) => ( +
  • + {example} +
    • + ))} +
+
+ )} )} {/* Parameters */} - {tool.tpmjsMetadata?.parameters && tool.tpmjsMetadata.parameters.length > 0 && ( + {tool.parameters && tool.parameters.length > 0 && ( Parameters @@ -378,7 +384,7 @@ export default function ToolDetailPage({
- {tool.tpmjsMetadata.parameters.map((param) => ( + {tool.parameters.map((param) => (
{param.name} @@ -422,14 +428,14 @@ export default function ToolDetailPage({

Downloads/month

- {tool.npmDownloadsLastMonth?.toLocaleString() || '0'} + {pkg.npmDownloadsLastMonth?.toLocaleString() || '0'}

- {tool.githubStars != null && ( + {pkg.githubStars != null && (

GitHub Stars

- {tool.githubStars.toLocaleString()} + {pkg.githubStars.toLocaleString()}

)} @@ -452,14 +458,14 @@ export default function ToolDetailPage({ {/* NPM Keywords */} - {tool.npmKeywords && tool.npmKeywords.length > 0 && ( + {pkg.npmKeywords && pkg.npmKeywords.length > 0 && ( NPM Keywords
- {tool.npmKeywords.map((keyword) => ( + {pkg.npmKeywords.map((keyword) => ( {keyword} @@ -469,33 +475,15 @@ export default function ToolDetailPage({ )} - {/* Tags */} - {tool.tags && tool.tags.length > 0 && ( - - - Tags - - -
- {tool.tags.map((tag) => ( - - {tag} - - ))} -
- - - )} - {/* Maintainers */} - {tool.npmMaintainers && tool.npmMaintainers.length > 0 && ( + {pkg.npmMaintainers && pkg.npmMaintainers.length > 0 && ( Maintainers
- {tool.npmMaintainers.map((maintainer) => ( + {pkg.npmMaintainers.map((maintainer) => (
{maintainer.name} {maintainer.email && ( @@ -517,7 +505,7 @@ export default function ToolDetailPage({ View on NPM - {tool.tpmjsMetadata?.links?.documentation && ( + {pkg.npmHomepage && ( - - Documentation - - )} - {tool.tpmjsMetadata?.links?.repository && ( - - - Repository - - )} - {tool.tpmjsMetadata?.links?.homepage && ( - Homepage )} + {pkg.npmRepository && + typeof pkg.npmRepository === 'object' && + pkg.npmRepository.url && ( + + + Repository + + )} {/* Frameworks */} - {tool.tpmjsMetadata?.frameworks && tool.tpmjsMetadata.frameworks.length > 0 && ( + {pkg.frameworks && pkg.frameworks.length > 0 && ( Frameworks
- {tool.tpmjsMetadata.frameworks.map((framework) => ( + {pkg.frameworks.map((framework) => ( {framework}