From 99d0edb6b61f4a237dad321913a13a52b83661d9 Mon Sep 17 00:00:00 2001 From: Travis Fischer Date: Wed, 25 Jun 2025 01:14:17 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/app/mcp-authors/page.tsx | 82 ++++---- apps/web/src/app/page.tsx | 27 ++- apps/web/src/app/signup/signup-form.tsx | 2 +- apps/web/src/components/dots-section.tsx | 4 +- .../components/example-agentic-configs.tsx | 181 ++++++++++++++++++ apps/web/src/components/example-usage.tsx | 4 +- apps/web/src/lib/developer-config.ts | 23 ++- 7 files changed, 260 insertions(+), 63 deletions(-) create mode 100644 apps/web/src/components/example-agentic-configs.tsx diff --git a/apps/web/src/app/mcp-authors/page.tsx b/apps/web/src/app/mcp-authors/page.tsx index c2e9781a..ee6e6898 100644 --- a/apps/web/src/app/mcp-authors/page.tsx +++ b/apps/web/src/app/mcp-authors/page.tsx @@ -1,7 +1,8 @@ import Link from 'next/link' +import { DotsSection } from '@/components/dots-section' +import { ExampleAgenticConfigs } from '@/components/example-agentic-configs' import { GitHubStarCounter } from '@/components/github-star-counter' -import { HeroSimulation2 } from '@/components/hero-simulation-2' import { SupplySideCTA } from '@/components/supply-side-cta' import { calendarBookingUrl, @@ -10,37 +11,25 @@ import { twitterUrl } from '@/lib/config' -export default function TheSecondBestDamnLandingPageEver() { +export default function MCPAuthorsPage() { return ( <> {/* Hero section */} -
-
- {/*
+ +
+

+ Your API → Paid MCP, Instantly +

-
*/} +
+ Run one command to turn any MCP server or OpenAPI service into a + paid MCP product,{' '} + with built-in distribution to over 20k AI engineers. +
-
-

- Your API → Paid MCP, Instantly -

- -
- Run one command to turn any MCP server or OpenAPI service into a - paid MCP product,{' '} - with built-in distribution to over 20k AI engineers. -
- - -
- -
- - +
-
- -
+ {/* How it works section */}
@@ -51,6 +40,27 @@ export default function TheSecondBestDamnLandingPageEver() {
TODO
+ {/* Config section */} +
+

+ Simple, Declarative Configuration +

+ + + +
+

+ Configuring your Agentic project is straightforward, regardless of + whether your origin is an MCP server or an OpenAPI service. For TS + projects, you can use a fully-typed{' '} + agentic.config.ts file, or + fall back to using an{' '} + agentic.config.json file to + configure your project. +

+
+
+ {/* Features section */}

@@ -197,17 +207,6 @@ export default function TheSecondBestDamnLandingPageEver() {

- {/* Marketplace section */} - {/*
-

- MCP Marketplace -

- -

- Coming soon... -

-
*/} - {/* Open source section */}

@@ -242,15 +241,6 @@ export default function TheSecondBestDamnLandingPageEver() {

- {/* Social proof section */} -
-

- TODO: social proof -

- -

TODO

-
- {/* CTA section */}

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 4695f6d4..6b474400 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -36,7 +36,7 @@ export default async function TheBestDamnLandingPageEver() { <> {/* Hero section */} -
+

The App Store for LLM Tools

@@ -50,10 +50,14 @@ export default async function TheBestDamnLandingPageEver() {
+ {/*
+ + */} + {/* How it works section */}

- LLM Tools that work everywhere + Agentic tools work everywhere

+ +
+

+ This example uses the{' '} + + @agentic/search + {' '} + tool to provide an LLM access to the web. +

+ +

+ All Agentic tools are exposed as both{' '} + MCP servers as well as simple{' '} + HTTP APIs. 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. +

+
{/* Marketplace section */} diff --git a/apps/web/src/app/signup/signup-form.tsx b/apps/web/src/app/signup/signup-form.tsx index 45c14b14..ba131b73 100644 --- a/apps/web/src/app/signup/signup-form.tsx +++ b/apps/web/src/app/signup/signup-form.tsx @@ -77,7 +77,7 @@ export function SignupForm() { }) return ( -
+
-
+
-
+
{children}
diff --git a/apps/web/src/components/example-agentic-configs.tsx b/apps/web/src/components/example-agentic-configs.tsx new file mode 100644 index 00000000..638b41e8 --- /dev/null +++ b/apps/web/src/components/example-agentic-configs.tsx @@ -0,0 +1,181 @@ +'use client' + +import type { BundledLanguage } from 'shiki/bundle/web' +import { useLocalStorage } from 'react-use' + +import { CodeBlock } from '@/components/code-block' +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' + +import { LoadingIndicator } from './loading-indicator' + +const formatLabels = { + typescript: 'TypeScript', + json: 'JSON' +} as const +const formats = Object.keys(formatLabels) as (keyof typeof formatLabels)[] +type Format = (typeof formats)[number] + +const originAdaptorLabels = { + mcp: 'MCP', + openapi: 'OpenAPI' +} as const +const originAdaptors = Object.keys( + originAdaptorLabels +) as (keyof typeof originAdaptorLabels)[] +type OriginAdaptor = (typeof originAdaptors)[number] + +type ExampleAgenticConfig = { + format: Format + originAdaptor: OriginAdaptor +} + +const defaultExampleAgenticConfig: ExampleAgenticConfig = { + format: 'typescript', + originAdaptor: 'mcp' +} + +type CodeSnippet = { + code: string + lang: BundledLanguage +} + +export function ExampleAgenticConfigs() { + const [config, setConfig] = useLocalStorage( + 'example-agentic-config', + defaultExampleAgenticConfig + ) + + if (!config) { + return + } + + const codeSnippet = getCodeSnippetForExampleAgenticConfig(config) + + return ( + + setConfig({ + ...defaultExampleAgenticConfig, + ...config, + format: value as Format + }) + } + className='w-full max-w-3xl' + > + + {formats.map((format) => ( + + {formatLabels[format]} + + ))} + + + + + setConfig({ + ...defaultExampleAgenticConfig, + ...config, + originAdaptor: value as OriginAdaptor + }) + } + className='w-full' + > + + {originAdaptors.map((originAdaptor) => ( + + {originAdaptorLabels[originAdaptor]} + + ))} + + + {originAdaptors.map((originAdaptor) => ( + + + + ))} + + + + ) +} + +function getCodeSnippetForExampleAgenticConfig( + config: ExampleAgenticConfig +): CodeSnippet { + if (config.format === 'typescript') { + if (config.originAdaptor === 'mcp') { + return { + code: ` +import { defineConfig } from '@agentic/platform' + +export default defineConfig({ + name: 'mcp-example', + // Your origin MCP server URL supporting the streamable HTTP transport + originUrl: '', + originAdapter: { + type: 'mcp' + } +})`.trim(), + lang: 'typescript' + } + } else { + return { + code: ` +import { defineConfig } from '@agentic/platform' + +export default defineConfig({ + name: 'openapi-example', + originUrl: '', + originAdapter: { + type: 'openapi', + spec: '' + } +})`.trim(), + lang: 'typescript' + } + } + } else if (config.format === 'json') { + if (config.originAdaptor === 'mcp') { + return { + code: ` +{ + "name": "mcp-example", + "originUrl": "", + "originAdapter": { + "type": "mcp" + } +}`.trim(), + lang: 'json' + } + } else { + return { + code: ` +{ + "name": "openapi-example", + "originUrl": "", + "originAdapter": { + "type": "openapi", + "spec": "" + } +}`.trim(), + lang: 'json' + } + } + } + + return { + code: '', + lang: 'json' + } +} diff --git a/apps/web/src/components/example-usage.tsx b/apps/web/src/components/example-usage.tsx index 0e320553..4f47f397 100644 --- a/apps/web/src/components/example-usage.tsx +++ b/apps/web/src/components/example-usage.tsx @@ -45,7 +45,7 @@ export function ExampleUsage({ const ctx = useAgentic() const [config, setConfig] = useLocalStorage( - 'config', + 'developer-config', defaultConfig ) @@ -176,7 +176,7 @@ export function ExampleUsage({ setConfig({ ...defaultConfig, diff --git a/apps/web/src/lib/developer-config.ts b/apps/web/src/lib/developer-config.ts index 2b3ffb69..e1398a0d 100644 --- a/apps/web/src/lib/developer-config.ts +++ b/apps/web/src/lib/developer-config.ts @@ -10,18 +10,18 @@ export const targetLabels = { python: 'Python', http: 'HTTP' } as const -export const targets: (keyof typeof targetLabels)[] = Object.keys( +export const targets = Object.keys( targetLabels -) as any +) as (keyof typeof targetLabels)[] export type Target = (typeof targets)[number] export const httpTargetLabels = { curl: 'cURL', httpie: 'HTTPie' } as const -export const httpTargets: (keyof typeof httpTargetLabels)[] = Object.keys( +export const httpTargets = Object.keys( httpTargetLabels -) as any +) as (keyof typeof httpTargetLabels)[] export type HTTPTarget = (typeof httpTargets)[number] export const mcpClientTargetLabels = { @@ -34,8 +34,9 @@ export const mcpClientTargetLabels = { cline: 'Cline', goose: 'Goose' } as const -export const mcpClientTargets: (keyof typeof mcpClientTargetLabels)[] = - Object.keys(mcpClientTargetLabels) as any +export const mcpClientTargets = Object.keys( + mcpClientTargetLabels +) as (keyof typeof mcpClientTargetLabels)[] export type MCPClientTarget = (typeof mcpClientTargets)[number] export const tsFrameworkTargetLabels = { @@ -48,8 +49,9 @@ export const tsFrameworkTargetLabels = { 'firebase-genkit': 'Firebase GenKit', xsai: 'xsAI' } as const -export const tsFrameworkTargets: (keyof typeof tsFrameworkTargetLabels)[] = - Object.keys(tsFrameworkTargetLabels) as any +export const tsFrameworkTargets = Object.keys( + tsFrameworkTargetLabels +) as (keyof typeof tsFrameworkTargetLabels)[] export type TsFrameworkTarget = (typeof tsFrameworkTargets)[number] export const pyFrameworkTargetLabels = { @@ -57,8 +59,9 @@ export const pyFrameworkTargetLabels = { langchain: 'LangChain', llamaindex: 'LlamaIndex' } as const -export const pyFrameworkTargets: (keyof typeof pyFrameworkTargetLabels)[] = - Object.keys(pyFrameworkTargetLabels) as any +export const pyFrameworkTargets = Object.keys( + pyFrameworkTargetLabels +) as (keyof typeof pyFrameworkTargetLabels)[] export type PyFrameworkTarget = (typeof pyFrameworkTargets)[number] export type DeveloperConfig = {