feat(web): improve public project detail page

apps/web/package.json

@@ -26,6 +26,7 @@
     "@agentic/platform-types": "workspace:*",
     "@agentic/platform-validators": "workspace:*",
     "@date-fns/utc": "catalog:",
+    "@fisch0920/markdown-to-html": "^1.1.0",
     "@number-flow/react": "catalog:",
     "@pmndrs/assets": "catalog:",
     "@radix-ui/react-collapsible": "^1.1.11",

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

@@ -12,6 +12,7 @@ import { useAgentic } from '@/components/agentic-provider'
 import { ExampleUsage } from '@/components/example-usage'
 import { HeroButton } from '@/components/hero-button'
 import { LoadingIndicator } from '@/components/loading-indicator'
+import { SSRMarkdown } from '@/components/markdown/ssr-markdown'
 import { PageContainer } from '@/components/page-container'
 import { ProjectPricingPlans } from '@/components/project-pricing-plans'
 import { Button } from '@/components/ui/button'
@@ -159,8 +160,8 @@ export function MarketplacePublicProjectDetail({
     hasInitializedCheckoutFromSearchParams
   ])
 
+  const deployment = useMemo(() => project?.lastPublishedDeployment, [project])
   const featuredToolName = useMemo(() => {
-    const deployment = project?.lastPublishedDeployment
     const toolConfigs = deployment?.toolConfigs?.filter(
       (toolConfig) => toolConfig?.enabled !== false
     )
@@ -173,9 +174,15 @@ export function MarketplacePublicProjectDetail({
       toolConfigs?.[0]?.name ??
       deployment?.tools[0]?.name
     )
-  }, [project])
+  }, [deployment])
 
-  const deployment = project?.lastPublishedDeployment
+  const inferredTab = useMemo(() => {
+    if (tab === 'readme' && !deployment?.readme?.trim()) {
+      return 'overview'
+    }
+
+    return tab
+  }, [tab, deployment])
 
   return (
     <PageContainer>
@@ -191,7 +198,7 @@ export function MarketplacePublicProjectDetail({
             <ProjectHeader project={project} />
 
             <Tabs
-              value={tab}
+              value={inferredTab}
               onValueChange={(value) => {
                 if (value === 'overview') {
                   router.push(`/marketplace/projects/${projectIdentifier}`)
@@ -207,6 +214,12 @@ export function MarketplacePublicProjectDetail({
                   Overview
                 </TabsTrigger>
 
+                {deployment?.readme?.trim() && (
+                  <TabsTrigger value='readme' className='cursor-pointer'>
+                    Readme
+                  </TabsTrigger>
+                )}
+
                 <TabsTrigger
                   value='tools'
                   className='cursor-pointer'
@@ -229,175 +242,201 @@ export function MarketplacePublicProjectDetail({
               </TabsList>
 
               <div className='bg-card p-4 border rounded-lg shadow-sm color-card-foreground'>
-                <TabsContent value='overview' className='flex flex-col gap-4'>
+                {inferredTab === 'overview' && (
-                  <h2 className='text-balance leading-snug md:leading-none text-xl font-semibold'>
+                  <TabsContent value='overview' className='flex flex-col gap-4'>
-                    Overview
+                    <h2 className='text-balance leading-snug md:leading-none text-xl font-semibold'>
-                  </h2>
+                      Overview
+                    </h2>
 
-                  <div
+                    <div
-                    className={`grid grid-cols grid-cols-1 md:grid-cols-2 gap-8 md:gap-4`}
+                      className={`grid grid-cols grid-cols-1 lg:grid-cols-2 gap-8 md:gap-4`}
-                  >
+                    >
-                    <div className='flex flex-col gap-8'>
+                      <div className='flex flex-col gap-8'>
-                      {deployment ? (
+                        {deployment ? (
-                        <>
+                          <>
+                            <p>
+                              {deployment.description ||
+                                '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
+                                      asChild
+                                      className='w-full flex flex-col gap-4'
+                                      variant='outline'
+                                    >
+                                      <Link
+                                        href={`/marketplace/projects/${projectIdentifier}/tools`}
+                                      >
+                                        View{' '}
+                                        {deployment.tools.length -
+                                          MAX_TOOLS_TO_SHOW}{' '}
+                                        more{' '}
+                                        {plur(
+                                          'tool',
+                                          deployment.tools.length -
+                                            MAX_TOOLS_TO_SHOW
+                                        )}
+                                      </Link>
+                                    </Button>
+                                  </li>
+                                )}
+                              </ul>
+                            </div>
+                          </>
+                        ) : (
                           <p>
-                            {deployment.description ||
+                            This project doesn't have any published deployments.
-                              'No description available'}
                           </p>
+                        )}
+                      </div>
 
-                          <div className='flex flex-col gap-4'>
+                      <div className='flex flex-col gap-4'>
-                            <h3 className='text-balance leading-snug md:leading-none text-lg font-semibold'>
+                        <ExampleUsage
-                              Tools
+                          projectIdentifier={projectIdentifier}
+                          project={project}
+                          tool={featuredToolName}
+                        />
+                      </div>
+                    </div>
+                  </TabsContent>
+                )}
+
+                {deployment?.readme?.trim() && inferredTab === 'readme' && (
+                  <TabsContent value='readme' className='flex flex-col gap-4'>
+                    <SSRMarkdown
+                      markdown={deployment.readme}
+                      className='items-start!'
+                    />
+                  </TabsContent>
+                )}
+
+                {inferredTab === 'tools' && (
+                  <TabsContent value='tools' className='flex flex-col gap-4'>
+                    <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>
 
-                            <ul className='flex flex-col gap-4'>
+                            <p className='text-sm text-gray-500'>
-                              {deployment.tools
+                              {tool.description}
-                                .slice(0, MAX_TOOLS_TO_SHOW)
+                            </p>
-                                .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.
-                        </p>
-                      )}
-                    </div>
-
-                    <div className='flex flex-col gap-4'>
-                      <ExampleUsage
-                        projectIdentifier={projectIdentifier}
-                        project={project}
-                        tool={featuredToolName}
-                      />
-                    </div>
-                  </div>
-                </TabsContent>
-
-                <TabsContent value='tools' className='flex flex-col gap-4'>
-                  <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
+                                  Input schema
                                   <ChevronsUpDownIcon />
                                 </Button>
                               </CollapsibleTrigger>
 
                               <CollapsibleContent>
                                 <pre className='max-w-full overflow-x-auto border p-4 rounded-sm'>
-                                  {JSON.stringify(tool.outputSchema, null, 2)}
+                                  {JSON.stringify(tool.inputSchema, null, 2)}
                                 </pre>
                               </CollapsibleContent>
                             </Collapsible>
-                          )}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </TabsContent>
 
-                <TabsContent value='pricing' className='flex flex-col gap-4'>
+                            {tool.outputSchema && (
-                  <h2 className='text-balance leading-snug md:leading-none text-xl font-semibold'>
+                              <Collapsible className='w-full flex flex-col align-start gap-2'>
-                    Pricing
+                                <CollapsibleTrigger asChild>
-                  </h2>
+                                  <Button
+                                    variant='outline'
+                                    className='self-start'
+                                  >
+                                    Output schema
+                                    <ChevronsUpDownIcon />
+                                  </Button>
+                                </CollapsibleTrigger>
 
-                  <ProjectPricingPlans
+                                <CollapsibleContent>
-                    project={project}
+                                  <pre className='max-w-full overflow-x-auto border p-4 rounded-sm'>
-                    consumer={consumer}
+                                    {JSON.stringify(tool.outputSchema, null, 2)}
-                    isLoadingStripeCheckoutForPlan={
+                                  </pre>
-                      isLoadingStripeCheckoutForPlan
+                                </CollapsibleContent>
-                    }
+                              </Collapsible>
-                    onSubscribe={onSubscribe}
+                            )}
-                  />
+                          </li>
-                </TabsContent>
+                        ))}
-
+                      </ul>
-                <TabsContent value='debug' className='flex flex-col gap-4'>
-                  <h2 className='text-balance leading-snug md:leading-none text-xl font-semibold'>
-                    Debug
-                  </h2>
-
-                  <pre className='max-w-full overflow-x-auto'>
-                    {JSON.stringify(
-                      omit(
-                        project,
-                        'lastPublishedDeployment',
-                        'lastDeployment'
-                      ),
-                      null,
-                      2
                     )}
-                  </pre>
+                  </TabsContent>
-                </TabsContent>
+                )}
+
+                {inferredTab === 'pricing' && (
+                  <TabsContent value='pricing' className='flex flex-col gap-4'>
+                    <h2 className='text-balance leading-snug md:leading-none text-xl font-semibold'>
+                      Pricing
+                    </h2>
+
+                    <ProjectPricingPlans
+                      project={project}
+                      consumer={consumer}
+                      isLoadingStripeCheckoutForPlan={
+                        isLoadingStripeCheckoutForPlan
+                      }
+                      onSubscribe={onSubscribe}
+                    />
+                  </TabsContent>
+                )}
+
+                {inferredTab === 'debug' && (
+                  <TabsContent value='debug' className='flex flex-col gap-4'>
+                    <h2 className='text-balance leading-snug md:leading-none text-xl font-semibold'>
+                      Debug
+                    </h2>
+
+                    <pre className='max-w-full overflow-x-auto'>
+                      {JSON.stringify(
+                        omit(
+                          project,
+                          'lastPublishedDeployment',
+                          'lastDeployment'
+                        ),
+                        null,
+                        2
+                      )}
+                    </pre>
+                  </TabsContent>
+                )}
               </div>
             </Tabs>
           </div>

apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/utils.ts

@@ -1,6 +1,7 @@
 export const MAX_TOOLS_TO_SHOW = 5
 export const marketplacePublicProjectDetailTabs = [
   'overview',
+  'readme',
   'tools',
   'pricing',
   'debug'

apps/web/src/components/markdown/ssr-markdown.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { markdownToHtml } from '@fisch0920/markdown-to-html'
+import { useAsync } from 'react-use'
+
+import { cn } from '@/lib/utils'
+
+import { LoadingIndicator } from '../loading-indicator'
+import styles from './styles.module.css'
+
+// TODO: figure out how to make this server-only to not bloat the client-side bundle
+export function SSRMarkdown({
+  className,
+  markdown
+}: {
+  className?: string
+  markdown: string
+}) {
+  const { value: html, loading } = useAsync(
+    async () => markdownToHtml(markdown),
+    [markdown]
+  )
+
+  if (loading) {
+    return (
+      <div className={cn('flex justify-center items-center h-full', className)}>
+        <LoadingIndicator />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cn('prose dark:prose-invert', styles.markdown, className)}
+      dangerouslySetInnerHTML={{ __html: html! }}
+    />
+  )
+}

apps/web/src/components/public-project.tsx

@@ -10,7 +10,7 @@ export function PublicProject({ project }: { project: Project }) {
     <Link
       key={project.id}
       className='p-2 border rounded-lg hover:border-gray-400
-      divide-y divide-gray-200 overflow-hidden bg-white shadow-sm max-w-md
+      divide-y divide-gray-200 overflow-hidden bg-white shadow-sm max-w-md flex flex-col gap-2 justify-between
       '
       href={`/marketplace/projects/${project.identifier}`}
     >

fixtures/valid/everything-openapi/agentic.config.ts

@@ -8,6 +8,38 @@ export default defineConfig({
     url: 'https://agentic-platform-fixtures-everything.onrender.com',
     spec: 'https://agentic-platform-fixtures-everything.onrender.com/docs'
   },
+  readme: `
+# Test Everything OpenAPI
+
+This is testing **readme rendering**.
+
+## Misc
+
+- [ ] Item 1
+- [ ] Item 2
+- [x] Item 3
+
+---
+
+- _italic_
+- **bold**
+- [link](https://www.google.com)
+- \`code\`
+
+## Code
+
+\`\`\`ts
+const a = 1
+
+export function foo() {
+  console.log('hello world')
+}
+\`\`\`
+
+## Images
+
+![Image](https://placehold.co/600x400)
+`,
   toolConfigs: [
     {
       name: 'get_user',
@@ -23,6 +55,19 @@ export default defineConfig({
         }
       }
     },
+    {
+      name: 'echo',
+      examples: [
+        {
+          name: 'Example 1',
+          prompt: 'Use the echo tool to say hello.',
+          featured: true,
+          args: {
+            message: 'Hello, world!'
+          }
+        }
+      ]
+    },
     {
       name: 'disabled_tool',
       enabled: false

packages/cli/src/commands/debug.ts

@@ -29,7 +29,7 @@ export function registerDebugCommand({
             cwd: opts.cwd
           }),
           {
-            text: `Loading Agentic config from ${opts.cwd}`,
+            text: `Loading Agentic config from ${opts.cwd ?? process.cwd()}`,
             successText: `Agentic config loaded successfully.`,
             failText: 'Failed to load Agentic config.'
           }

packages/cli/src/commands/deploy.ts

@@ -36,7 +36,7 @@ export function registerDeployCommand({
             cwd: opts.cwd
           }),
           {
-            text: `Loading Agentic config from ${opts.cwd}`,
+            text: `Loading Agentic config from ${opts.cwd ?? process.cwd()}`,
             successText: `Agentic config loaded successfully.`,
             failText: 'Failed to load Agentic config.'
           }

pnpm-lock.yaml

@@ -770,6 +770,9 @@ importers:
       '@date-fns/utc':
         specifier: 'catalog:'
         version: 2.1.0
+      '@fisch0920/markdown-to-html':
+        specifier: ^1.1.0
+        version: 1.1.0
       '@number-flow/react':
         specifier: 'catalog:'
         version: 0.5.10(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -2742,6 +2745,10 @@ packages:
       '@fisch0920/drizzle-orm': '>=0.36.0'
       zod: '>=3.0.0'
 
+  '@fisch0920/markdown-to-html@1.1.0':
+    resolution: {integrity: sha512-+3mrW0QoXU73zwrGB5DvZTsji3VaRQidHYZhimhJVix+pREo/En4s8Z8B3WDFlnM8dK0qknkVqtEDvYh9BzSAw==}
+    engines: {node: '>=18'}
+
   '@floating-ui/core@1.7.1':
     resolution: {integrity: sha512-azI0DrjMMfIug/ExbBaeDVJXcY0a7EPvPjb2xAJPa4HeimBX+Z18HK8QQR3jb6356SnDDdxx+hinMLcJEDdOjw==}
 
@@ -7965,6 +7972,9 @@ packages:
   hast-util-embedded@3.0.0:
     resolution: {integrity: sha512-naH8sld4Pe2ep03qqULEtvYr7EjrLK2QHY8KJR6RJkTUjPGObe1vnx585uzem2hGra+s1q08DZZpfgDVYRbaXA==}
 
+  hast-util-format@1.1.0:
+    resolution: {integrity: sha512-yY1UDz6bC9rDvCWHpx12aIBGRG7krurX0p0Fm6pT547LwDIZZiNr8a+IHDogorAdreULSEzP82Nlv5SZkHZcjA==}
+
   hast-util-from-dom@5.0.1:
     resolution: {integrity: sha512-N+LqofjR2zuzTjCPzyDUdSshy4Ma6li7p/c3pA78uTwzFgENbgbUrm2ugwsOdcjI1muO+o6Dgzp9p8WHtn/39Q==}
 
@@ -7995,6 +8005,9 @@ packages:
   hast-util-phrasing@3.0.1:
     resolution: {integrity: sha512-6h60VfI3uBQUxHqTyMymMZnEbNl1XmEGtOxxKYL7stY2o601COo62AWAYBQR9lZbYXYSBoxag8UpPRXK+9fqSQ==}
 
+  hast-util-raw@9.1.0:
+    resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}
+
   hast-util-to-estree@3.1.3:
     resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
 
@@ -8007,6 +8020,9 @@ packages:
   hast-util-to-mdast@10.1.2:
     resolution: {integrity: sha512-FiCRI7NmOvM4y+f5w32jPRzcxDIz+PUqDwEqn1A+1q2cdp3B8Gx7aVrXORdOKjMNDQsD1ogOr896+0jJHW1EFQ==}
 
+  hast-util-to-parse5@8.0.0:
+    resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
+
   hast-util-to-string@3.0.1:
     resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
 
@@ -8081,6 +8097,9 @@ packages:
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
+  html-whitespace-sensitive-tag-names@3.0.1:
+    resolution: {integrity: sha512-q+310vW8zmymYHALr1da4HyXUQ0zgiIwIicEfotYPWGN0OJVEN/58IJ3A4GBYcEq3LGAZqKb+ugvP0GNB9CEAA==}
+
   htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
 
@@ -9960,6 +9979,9 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  property-information@6.5.0:
+    resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
+
   property-information@7.1.0:
     resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
@@ -10204,6 +10226,9 @@ packages:
     resolution: {integrity: sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==}
     hasBin: true
 
+  rehype-format@5.0.1:
+    resolution: {integrity: sha512-zvmVru9uB0josBVpr946OR8ui7nJEdzZobwLOOqHb/OOD88W0Vk2SqLwoVOj0fM6IPCCO6TaV9CvQvJMWwukFQ==}
+
   rehype-katex@7.0.1:
     resolution: {integrity: sha512-OiM2wrZ/wuhKkigASodFoo8wimG3H12LWQaH8qSPVJn9apWKFSH3YOCtbKpBorTVw/eI7cuT21XBbvwEswbIOA==}
 
@@ -10213,9 +10238,15 @@ packages:
   rehype-parse@9.0.1:
     resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
 
+  rehype-raw@7.0.0:
+    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+
   rehype-recma@1.0.0:
     resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
 
+  rehype-stringify@10.0.1:
+    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
+
   remark-frontmatter@5.0.0:
     resolution: {integrity: sha512-XTFYvNASMe5iPN0719nPrdItC9aU0ssC4v14mH1BCi1u0n1gAocqcujWUrByftZTbLhRtiKRyjYTSIOcr69UVQ==}
 
@@ -12911,6 +12942,18 @@ snapshots:
       '@fisch0920/drizzle-orm': 0.43.7(@cloudflare/workers-types@4.20250620.0)(@neondatabase/serverless@1.0.1)(@opentelemetry/api@1.9.0)(@types/pg@8.15.4)(kysely@0.28.2)(postgres@3.4.7)
       zod: 3.25.67
 
+  '@fisch0920/markdown-to-html@1.1.0':
+    dependencies:
+      rehype-format: 5.0.1
+      rehype-raw: 7.0.0
+      rehype-stringify: 10.0.1
+      remark-gfm: 4.0.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
   '@floating-ui/core@1.7.1':
     dependencies:
       '@floating-ui/utils': 0.2.9
@@ -19161,6 +19204,16 @@ snapshots:
       '@types/hast': 3.0.4
       hast-util-is-element: 3.0.0
 
+  hast-util-format@1.1.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-embedded: 3.0.0
+      hast-util-minify-whitespace: 1.0.1
+      hast-util-phrasing: 3.0.1
+      hast-util-whitespace: 3.0.0
+      html-whitespace-sensitive-tag-names: 3.0.1
+      unist-util-visit-parents: 6.0.1
+
   hast-util-from-dom@5.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -19226,6 +19279,22 @@ snapshots:
       hast-util-is-body-ok-link: 3.0.1
       hast-util-is-element: 3.0.0
 
+  hast-util-raw@9.1.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      '@ungap/structured-clone': 1.3.0
+      hast-util-from-parse5: 8.0.3
+      hast-util-to-parse5: 8.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      parse5: 7.3.0
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
   hast-util-to-estree@3.1.3:
     dependencies:
       '@types/estree': 1.0.8
@@ -19298,6 +19367,16 @@ snapshots:
       unist-util-position: 5.0.0
       unist-util-visit: 5.0.0
 
+  hast-util-to-parse5@8.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      property-information: 6.5.0
+      space-separated-tokens: 2.0.2
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
   hast-util-to-string@3.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -19345,6 +19424,8 @@ snapshots:
 
   html-void-elements@3.0.0: {}
 
+  html-whitespace-sensitive-tag-names@3.0.1: {}
+
   htmlparser2@8.0.2:
     dependencies:
       domelementtype: 2.3.0
@@ -21444,6 +21525,8 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  property-information@6.5.0: {}
+
   property-information@7.1.0: {}
 
   protobufjs@7.5.3:
@@ -21784,6 +21867,11 @@ snapshots:
     dependencies:
       jsesc: 3.0.2
 
+  rehype-format@5.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-format: 1.1.0
+
   rehype-katex@7.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -21805,6 +21893,12 @@ snapshots:
       hast-util-from-html: 2.0.3
       unified: 11.0.5
 
+  rehype-raw@7.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-raw: 9.1.0
+      vfile: 6.0.3
+
   rehype-recma@1.0.0:
     dependencies:
       '@types/estree': 1.0.8
@@ -21813,6 +21907,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  rehype-stringify@10.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+      unified: 11.0.5
+
   remark-frontmatter@5.0.0:
     dependencies:
       '@types/mdast': 4.0.4

todo.md

@@ -12,9 +12,8 @@
   - example usage
     - double check example usage for all TS sdks now that real examples are working
     - fix mcp examples
-    - add example usage to project detail pages
     - import react example usage component into docs
-  - replace json project and components with actual designs
+  - replace json pricing plans and consumers with actual designs
 - double-check free-tier rate-limits for `@agentic/search`
 - create agentic products for select legacy tools
 - add feature about optimized context to docs
@@ -24,8 +23,6 @@
 - replace how-it-works diagram with better version
 - docs: add notes about constraints on mcp origin servers (static tools)
 - improve public project detail page
-  - **include example usage**
-  - list tools
   - mcp inspector
   - **add support to example-usage for api keys**
 - **api keys should go beyond 1:1 consumers**