✊

apps/web/package.json

@@ -28,6 +28,7 @@
     "@date-fns/utc": "catalog:",
     "@number-flow/react": "catalog:",
     "@pmndrs/assets": "catalog:",
+    "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-dropdown-menu": "catalog:",
     "@radix-ui/react-label": "catalog:",
     "@radix-ui/react-slot": "catalog:",
@@ -52,6 +53,7 @@
     "motion": "catalog:",
     "next": "catalog:",
     "next-themes": "catalog:",
+    "plur": "catalog:",
     "posthog-js": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",

apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/marketplace-project-index.tsx

@@ -2,9 +2,10 @@
 
 import type { Project } from '@agentic/platform-types'
 import { assert, omit, sanitizeSearchParams } from '@agentic/platform-core'
-import { ExternalLinkIcon } from 'lucide-react'
+import { ChevronsUpDownIcon, ExternalLinkIcon } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
+import plur from 'plur'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useAgentic } from '@/components/agentic-provider'
@@ -13,11 +14,18 @@ import { LoadingIndicator } from '@/components/loading-indicator'
 import { PageContainer } from '@/components/page-container'
 import { ProjectPricingPlans } from '@/components/project-pricing-plans'
 import { Button } from '@/components/ui/button'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from '@/components/ui/collapsible'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { GitHubIcon } from '@/icons/github'
 import { toast, toastError } from '@/lib/notifications'
 import { useQuery } from '@/lib/query-client'
 
+const MAX_TOOLS_TO_SHOW = 5
+
 export function MarketplaceProjectIndex({
   projectIdentifier
 }: {
@@ -182,11 +190,19 @@ export function MarketplaceProjectIndex({
                   Overview
                 </TabsTrigger>
 
-                <TabsTrigger value='tools' className='cursor-pointer'>
+                <TabsTrigger
+                  value='tools'
+                  className='cursor-pointer'
+                  disabled={!deployment}
+                >
                   Tools
                 </TabsTrigger>
 
-                <TabsTrigger value='pricing' className='cursor-pointer'>
+                <TabsTrigger
+                  value='pricing'
+                  className='cursor-pointer'
+                  disabled={!deployment}
+                >
                   Pricing
                 </TabsTrigger>
 
@@ -202,14 +218,60 @@ export function MarketplaceProjectIndex({
                   </h2>
 
                   <div
-                    className={`grid grid-cols grid-cols-1 gap-8 md:grid-cols-2`}
+                    className={`grid grid-cols grid-cols-1 md:grid-cols-2 gap-8 md:gap-4`}
                   >
-                    <div className='flex flex-col gap-4'>
+                    <div className='flex flex-col gap-8'>
                       {deployment ? (
-                        <p>
+                        <>
-                          {deployment?.description ||
+                          <p>
-                            'No description available'}
+                            {deployment.description ||
-                        </p>
+                              'No description available'}
+                          </p>
+
+                          <div className='flex flex-col gap-4'>
+                            <h3 className='text-balance leading-snug md:leading-none text-lg font-semibold'>
+                              Tools
+                            </h3>
+
+                            <ul className='flex flex-col gap-4'>
+                              {deployment.tools
+                                .slice(0, MAX_TOOLS_TO_SHOW)
+                                .map((tool) => (
+                                  <li
+                                    key={tool.name}
+                                    className='p-4 border rounded-sm w-full flex flex-col gap-4'
+                                  >
+                                    <h3 className='text-balance leading-snug md:leading-none text-md font-semibold'>
+                                      {tool.name}
+                                    </h3>
+
+                                    <p className='text-sm text-gray-500'>
+                                      {tool.description}
+                                    </p>
+                                  </li>
+                                ))}
+
+                              {deployment.tools.length > MAX_TOOLS_TO_SHOW && (
+                                <li>
+                                  <Button
+                                    className='w-full flex flex-col gap-4'
+                                    variant='outline'
+                                  >
+                                    View{' '}
+                                    {deployment.tools.length -
+                                      MAX_TOOLS_TO_SHOW}{' '}
+                                    more{' '}
+                                    {plur(
+                                      'tool',
+                                      deployment.tools.length -
+                                        MAX_TOOLS_TO_SHOW
+                                    )}
+                                  </Button>
+                                </li>
+                              )}
+                            </ul>
+                          </div>
+                        </>
                       ) : (
                         <p>
                           This project doesn't have any published deployments.
@@ -231,6 +293,60 @@ export function MarketplaceProjectIndex({
                   <h2 className='text-balance leading-snug md:leading-none text-xl font-semibold'>
                     Tools
                   </h2>
+
+                  {deployment && (
+                    <ul className='flex flex-col gap-4'>
+                      {deployment.tools.map((tool) => (
+                        <li
+                          key={tool.name}
+                          className='p-4 border rounded-sm w-full flex flex-col gap-4'
+                        >
+                          <h3 className='text-balance leading-snug md:leading-none text-md font-semibold'>
+                            {tool.name}
+                          </h3>
+
+                          <p className='text-sm text-gray-500'>
+                            {tool.description}
+                          </p>
+
+                          <Collapsible className='w-full flex flex-col align-start gap-2'>
+                            <CollapsibleTrigger asChild>
+                              <Button variant='outline' className='self-start'>
+                                Input schema
+                                <ChevronsUpDownIcon />
+                              </Button>
+                            </CollapsibleTrigger>
+
+                            <CollapsibleContent>
+                              <pre className='max-w-full overflow-x-auto border p-4 rounded-sm'>
+                                {JSON.stringify(tool.inputSchema, null, 2)}
+                              </pre>
+                            </CollapsibleContent>
+                          </Collapsible>
+
+                          {tool.outputSchema && (
+                            <Collapsible className='w-full flex flex-col align-start gap-2'>
+                              <CollapsibleTrigger asChild>
+                                <Button
+                                  variant='outline'
+                                  className='self-start'
+                                >
+                                  Output schema
+                                  <ChevronsUpDownIcon />
+                                </Button>
+                              </CollapsibleTrigger>
+
+                              <CollapsibleContent>
+                                <pre className='max-w-full overflow-x-auto border p-4 rounded-sm'>
+                                  {JSON.stringify(tool.outputSchema, null, 2)}
+                                </pre>
+                              </CollapsibleContent>
+                            </Collapsible>
+                          )}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
                 </TabsContent>
 
                 <TabsContent value='pricing' className='flex flex-col gap-4'>

apps/web/src/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot='collapsible' {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot='collapsible-trigger'
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot='collapsible-content'
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleContent,CollapsibleTrigger }

pnpm-lock.yaml

@@ -367,7 +367,7 @@ catalogs:
       specifier: ^8.3.0
       version: 8.3.0
     plur:
-      specifier: ^5.1.0
+      specifier: 5.1.0
       version: 5.1.0
     postcss:
       specifier: ^8.5.6
@@ -776,6 +776,9 @@ importers:
       '@pmndrs/assets':
         specifier: 'catalog:'
         version: 1.7.0
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.11
+        version: 1.1.11(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-dropdown-menu':
         specifier: 'catalog:'
         version: 2.1.15(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -848,6 +851,9 @@ importers:
       next-themes:
         specifier: 'catalog:'
         version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      plur:
+        specifier: 'catalog:'
+        version: 5.1.0
       posthog-js:
         specifier: 'catalog:'
         version: 1.255.0
@@ -4499,6 +4505,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collapsible@1.1.11':
+    resolution: {integrity: sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.7':
     resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
     peerDependencies:
@@ -15201,6 +15220,22 @@ snapshots:
       '@types/react': 19.1.8
       '@types/react-dom': 19.1.6(@types/react@19.1.8)
 
+  '@radix-ui/react-collapsible@1.1.11(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)

pnpm-workspace.yaml

@@ -142,7 +142,7 @@ catalog:
   p-throttle: 6.2.0
   p-times: ^4.0.0
   parse-json: ^8.3.0
-  plur: ^5.1.0
+  plur: 5.1.0
   postcss: ^8.5.6
   postgres: ^3.4.7
   posthog-js: ^1.255.0