👸

apps/web/src/app/page.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 
 import { DemandSideCTA } from '@/components/demand-side-cta'
+import { DotsSection } from '@/components/dots-section'
 import { ExampleUsage } from '@/components/example-usage'
 import { GitHubStarCounter } from '@/components/github-star-counter'
 import { githubUrl, twitterUrl } from '@/lib/config'
@@ -9,11 +10,7 @@ export default function TheBestDamnLandingPageEver() {
   return (
     <>
       {/* Hero section */}
-      <section className='mb-16 relative'>
+      <DotsSection className='mb-16'>
-        <div className='absolute top-0 bottom-0 left-0 right-0 bg-[url(/dots.svg)] bg-repeat bg-center bg-size-[32px_auto] opacity-30 dark:opacity-100' />
-
-        <div className='absolute top-0 bottom-0 left-0 right-0 bg-[radial-gradient(39%_50%_at_50%_50%,rgba(255,255,255,.3)_0%,rgb(255,255,255)_100%)] dark:bg-[radial-gradient(39%_50%_at_50%_50%,rgba(10,10,10,0)_0%,rgb(10,10,10)_100%)]' />
-
         <div className='flex flex-col gap-8 relative z-10'>
           <h1 className='text-center text-balance leading-snug md:leading-none text-4xl font-semibold'>
             The App Store for LLM Tools
@@ -26,9 +23,7 @@ export default function TheBestDamnLandingPageEver() {
 
           <DemandSideCTA />
         </div>
-      </section>
+      </DotsSection>
-
-      <section></section>
 
       {/* How it works section */}
       <section className='flex flex-col gap-8 mb-16'>
@@ -94,13 +89,16 @@ export default function TheBestDamnLandingPageEver() {
       </section>
 
       {/* CTA section */}
-      <section className='flex flex-col gap-12 mb-16'>
-        <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
-          Level up your AI Agents with the best tools
-        </h2>
 
-        <DemandSideCTA />
+      <DotsSection className='mb-16'>
-      </section>
+        <div className='flex flex-col gap-12 relative z-10'>
+          <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
+            Level up your AI Agents with the best tools
+          </h2>
+
+          <DemandSideCTA />
+        </div>
+      </DotsSection>
     </>
   )
 }

apps/web/src/components/dots-section.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils'
+
+export function DotsSection({
+  children,
+  className
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <section className={cn('relative', className)}>
+      <div className='absolute top-0 bottom-0 left-0 right-0 bg-[url(/dots.svg)] bg-repeat bg-center bg-size-[32px_auto] opacity-30 dark:opacity-100' />
+
+      <div className='absolute top-0 bottom-0 left-0 right-0 bg-[radial-gradient(39%_50%_at_50%_50%,rgba(255,255,255,.3)_0%,rgb(255,255,255)_100%)] dark:bg-[radial-gradient(39%_50%_at_50%_50%,rgba(10,10,10,0)_0%,rgb(10,10,10)_100%)]' />
+
+      {children}
+    </section>
+  )
+}

packages/tool-client/src/agentic-tool-client.ts

@@ -11,8 +11,12 @@ import { parseDeploymentIdentifier } from '@agentic/platform-validators'
 import defaultKy, { type KyInstance } from 'ky'
 
 /**
- * Agentic tool client which makes it easy to use an Agentic tools product with
+ * Agentic tool client which makes it easy to use an Agentic tool products with
- * all of the major TypeScript LLM SDKs.
+ * all of the major TypeScript LLM SDKs, without having to go through any MCP
+ * middleware.
+ *
+ * The resulting tool client will make simple HTTP calls to the Agentic Gateway
+ * to execute tools.
  *
  * @example
  * ```ts
@@ -73,6 +77,9 @@ export class AgenticToolClient extends AIFunctionsProvider {
     return this._functions
   }
 
+  /**
+   * Helper method to call a tool with either raw or stringified JSON arguments.
+   */
   async callTool(toolName: string, args: string | Record<string, any>) {
     const tool = this.functions.get(toolName)
     assert(tool, `Tool "${toolName}" not found`)