feat(web): add example usage section to publishing page

apps/web/src/app/page.tsx

@@ -1,41 +1,16 @@
 import Link from 'next/link'
 
-import { highlight } from '@/components/code-block/highlight'
 import { DemandSideCTA } from '@/components/demand-side-cta'
 import { DotsSection } from '@/components/dots-section'
-import { ExampleUsage } from '@/components/example-usage'
+import { ExampleUsageSection } from '@/components/example-usage-section'
 import { GitHubStarCounter } from '@/components/github-star-counter'
 import { HeroSimulation2 } from '@/components/hero-simulation-2'
 import { MCPMarketplaceFeatures } from '@/components/mcp-marketplace-features'
 import { PageContainer } from '@/components/page-container'
 import { SupplySideCTA } from '@/components/supply-side-cta'
 import { githubUrl, twitterUrl } from '@/lib/config'
-import {
-  defaultConfig,
-  getCodeForDeveloperConfig
-} from '@/lib/developer-config'
-import { globalAgenticApiClient } from '@/lib/global-api'
 
 export default async function TheBestDamnLandingPageEver() {
-  const projectIdentifier = '@agentic/search'
-  const tool = 'search'
-
-  const initialProject =
-    await globalAgenticApiClient.getPublicProjectByIdentifier({
-      projectIdentifier,
-      populate: ['lastPublishedDeployment']
-    })
-
-  // TODO: this should be loaded in `ExampleUsage`
-  const initialCodeSnippet = getCodeForDeveloperConfig({
-    config: defaultConfig,
-    project: initialProject,
-    deployment: initialProject.lastPublishedDeployment!,
-    identifier: projectIdentifier,
-    tool
-  })
-  const initialCodeBlock = await highlight(initialCodeSnippet)
-
   return (
     <PageContainer>
       {/* Hero section */}
@@ -52,43 +27,10 @@ export default async function TheBestDamnLandingPageEver() {
         <DemandSideCTA />
       </section>
 
-      {/* How it works section */}
+      {/* Example usage section */}
-      <section className='flex flex-col gap-8 mb-16'>
+      <ExampleUsageSection />
-        <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
-          Agentic tools that{' '}
-          <span className='font-semibold'>work everywhere</span>
-        </h2>
-
-        <ExampleUsage
-          projectIdentifier={projectIdentifier}
-          project={initialProject}
-          tool={tool}
-          initialCodeBlock={initialCodeBlock}
-        />
-
-        <div className='flex flex-col gap-4 text-sm max-w-2xl text-center'>
-          <p>
-            This example uses the{' '}
-            <Link
-              href={`/marketplace/projects/${projectIdentifier}`}
-              className='link'
-            >
-              {projectIdentifier}
-            </Link>{' '}
-            tool to provide an LLM access to the web.
-          </p>
-
-          <p>
-            All Agentic tools are exposed as both{' '}
-            <span className='font-semibold'>MCP servers</span> as well as simple{' '}
-            <span className='font-semibold'>HTTP APIs</span>. MCP is important
-            for interop and future-proofing, whereas simple HTTP POST requests
-            make tool use easy to debug and simplifies integration with existing
-            LLM tool calling.
-          </p>
-        </div>
-      </section>
 
+      {/* Features section */}
       <section className='flex flex-col items-center gap-8 text-center mb-16'>
         <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
           Agentic tools are{' '}
@@ -98,6 +40,7 @@ export default async function TheBestDamnLandingPageEver() {
         <MCPMarketplaceFeatures />
       </section>
 
+      {/* MCP section */}
       <section className='flex flex-col items-center gap-8 text-center mb-16 max-w-2xl'>
         <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
           Agentic makes <span className='font-semibold'>MCP fun!</span>

apps/web/src/app/publishing/page.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import Zoom from 'react-medium-image-zoom'
 
 import { DotsSection } from '@/components/dots-section'
-// import { ExampleAgenticConfigs } from '@/components/example-agentic-configs'
+import { ExampleUsageSection } from '@/components/example-usage-section'
 import { GitHubStarCounter } from '@/components/github-star-counter'
 import { MCPGatewayFeatures } from '@/components/mcp-gateway-features'
 import { PageContainer } from '@/components/page-container'
@@ -59,30 +59,8 @@ export default function PublishingMCPsPage() {
         </p>
       </section>
 
-      {/* Config section (TODO) */}
+      {/* Example usage section */}
-      {/* <section className='flex flex-col gap-8 mb-16'>
+      <ExampleUsageSection />
-        <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
-          Simple, Declarative Configuration
-        </h2>
-
-        <ExampleAgenticConfigs />
-
-        <p className='text-sm max-w-2xl text-center'>
-          <Link href='https://docs.agentic.so/publishing/config' className='link'>
-            Configuring your Agentic project
-          </Link>{' '}
-          is straightforward , regardless of whether your origin is an MCP
-          server or an OpenAPI service. For TS projects, you can use a
-          fully-typed <span className='font-semibold'>agentic.config.ts</span>{' '}
-          file, or fall back to using an{' '}
-          <span className='font-semibold'>agentic.config.json</span> file to
-          configure your project.{' '}
-          <Link href='https://docs.agentic.so/publishing' className='link'>
-            Learn more
-          </Link>
-          .
-        </p>
-      </section> */}
 
       {/* Features section */}
       <section className='flex flex-col gap-8 md:gap-12 mb-16'>

apps/web/src/components/example-usage-section.tsx

@@ -0,0 +1,68 @@
+import Link from 'next/link'
+
+import { highlight } from '@/components/code-block/highlight'
+import { ExampleUsage } from '@/components/example-usage'
+import {
+  defaultConfig,
+  getCodeForDeveloperConfig
+} from '@/lib/developer-config'
+import { globalAgenticApiClient } from '@/lib/global-api'
+
+export async function ExampleUsageSection() {
+  const projectIdentifier = '@agentic/search'
+  const tool = 'search'
+
+  const initialProject =
+    await globalAgenticApiClient.getPublicProjectByIdentifier({
+      projectIdentifier,
+      populate: ['lastPublishedDeployment']
+    })
+
+  // TODO: this should be loaded in `ExampleUsage`
+  const initialCodeSnippet = getCodeForDeveloperConfig({
+    config: defaultConfig,
+    project: initialProject,
+    deployment: initialProject.lastPublishedDeployment!,
+    identifier: projectIdentifier,
+    tool
+  })
+  const initialCodeBlock = await highlight(initialCodeSnippet)
+
+  return (
+    <section className='flex flex-col gap-8 mb-16'>
+      <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
+        Agentic tools that{' '}
+        <span className='font-semibold'>work everywhere</span>
+      </h2>
+
+      <ExampleUsage
+        projectIdentifier={projectIdentifier}
+        project={initialProject}
+        tool={tool}
+        initialCodeBlock={initialCodeBlock}
+      />
+
+      <div className='flex flex-col gap-4 text-sm max-w-2xl text-center'>
+        <p>
+          This example uses the{' '}
+          <Link
+            href={`/marketplace/projects/${projectIdentifier}`}
+            className='link'
+          >
+            {projectIdentifier}
+          </Link>{' '}
+          tool to provide an LLM access to the web.
+        </p>
+
+        <p>
+          All Agentic tools are exposed as both{' '}
+          <span className='font-semibold'>MCP servers</span> as well as simple{' '}
+          <span className='font-semibold'>HTTP APIs</span>. MCP is important for
+          interop and future-proofing, whereas simple HTTP POST requests make
+          tool use easy to debug and simplifies integration with existing LLM
+          tool calling.
+        </p>
+      </div>
+    </section>
+  )
+}

todo.md

@@ -32,6 +32,7 @@
 - marketplace project page; replace tabs with links
   - too much of a delay on individual pages and makes no sense to have these imports on the other tab pages
 - add a basic page + docs on pricing
+- update social image to have a lil more padding around the agentic logo
 
 ## TODO: Post-MVP