kopia lustrzana https://github.com/transitive-bullshit/chatgpt-api
feat: web improvements
Travis Fischer
rodzic
36dce22d3a
commit
a9117a2a42
|
|
@ -57,6 +57,7 @@
|
|||
"react-dom": "catalog:",
|
||||
"react-infinite-scroll-hook": "catalog:",
|
||||
"react-lottie-player": "catalog:",
|
||||
"react-medium-image-zoom": "^5.2.14",
|
||||
"react-use": "catalog:",
|
||||
"server-only": "catalog:",
|
||||
"shiki": "catalog:",
|
||||
|
|
|
|||
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 201 KiB |
|
|
@ -1,4 +1,5 @@
|
|||
import './globals.css'
|
||||
import 'react-medium-image-zoom/dist/styles.css'
|
||||
|
||||
import type { Metadata } from 'next'
|
||||
import { Geist } from 'next/font/google'
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ 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 {
|
||||
docsPublishingQuickStartUrl,
|
||||
githubUrl,
|
||||
|
|
@ -58,7 +59,7 @@ export default async function TheBestDamnLandingPageEver() {
|
|||
{/* How it works section */}
|
||||
<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 work <span className='font-semibold'>everywhere</span>
|
||||
Agentic tools <span className='font-semibold'>work everywhere</span>
|
||||
</h2>
|
||||
|
||||
<ExampleUsage
|
||||
|
|
@ -94,7 +95,7 @@ export default async function TheBestDamnLandingPageEver() {
|
|||
<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{' '}
|
||||
<span className='font-semibold'>production-ready</span>
|
||||
<span className='font-semibold'>optimized for LLMs</span>
|
||||
</h2>
|
||||
|
||||
<MCPMarketplaceFeatures />
|
||||
|
|
@ -126,6 +127,23 @@ export default async function TheBestDamnLandingPageEver() {
|
|||
</p>
|
||||
</section>
|
||||
|
||||
{/* CTA section */}
|
||||
<DotsSection className='mb-16'>
|
||||
<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'>
|
||||
Publish your own MCP products with Agentic
|
||||
</h2>
|
||||
|
||||
<h5 className='text-center max-w-2xl'>
|
||||
Run one command to turn any MCP server or OpenAPI service into a
|
||||
paid MCP product. With built-in support every major LLM SDK and MCP
|
||||
client.
|
||||
</h5>
|
||||
|
||||
<SupplySideCTA variant='book-call' heroVariant='orange' />
|
||||
</div>
|
||||
</DotsSection>
|
||||
|
||||
{/* Open source section */}
|
||||
<section className='flex flex-col items-center gap-8 max-w-2xl text-center mb-16'>
|
||||
<h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
|
||||
|
|
@ -168,7 +186,7 @@ export default async function TheBestDamnLandingPageEver() {
|
|||
<p className='text-center text-lg max-w-2xl'>TODO</p>
|
||||
</section> */}
|
||||
|
||||
{/* CTA section */}
|
||||
{/* Demand-side CTA section */}
|
||||
<DotsSection className='mb-16'>
|
||||
<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'>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import Image from 'next/image'
|
||||
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'
|
||||
|
|
@ -6,7 +8,8 @@ import { GitHubStarCounter } from '@/components/github-star-counter'
|
|||
import { MCPGatewayFeatures } from '@/components/mcp-gateway-features'
|
||||
import { PageContainer } from '@/components/page-container'
|
||||
import { SupplySideCTA } from '@/components/supply-side-cta'
|
||||
import { githubUrl, twitterUrl } from '@/lib/config'
|
||||
import { docsPublishingUrl, githubUrl, twitterUrl } from '@/lib/config'
|
||||
import mcpGatewayDiagramLight from '@/public/agentic-mcp-gateway-mvp-diagram-light.png'
|
||||
|
||||
export default function PublishingMCPsPage() {
|
||||
return (
|
||||
|
|
@ -19,8 +22,7 @@ export default function PublishingMCPsPage() {
|
|||
|
||||
<h5 className='text-center text-lg max-w-2xl'>
|
||||
Run one command to turn any MCP server or OpenAPI service into a paid
|
||||
MCP product,{' '}
|
||||
<em>with built-in distribution to over 20k AI engineers</em>.
|
||||
MCP product. With built-in support every major LLM SDK and MCP client.
|
||||
</h5>
|
||||
|
||||
<SupplySideCTA />
|
||||
|
|
@ -32,7 +34,28 @@ export default function PublishingMCPsPage() {
|
|||
How It Works
|
||||
</h2>
|
||||
|
||||
<div>TODO</div>
|
||||
<div className='w-full max-w-3xl flex flex-col items-center border rounded-lg shadow-sm overflow-hidden p-4 bg-white'>
|
||||
<Zoom>
|
||||
<Image
|
||||
src={mcpGatewayDiagramLight.src}
|
||||
alt='MCP Gateway Demo'
|
||||
width={mcpGatewayDiagramLight.width}
|
||||
height={mcpGatewayDiagramLight.height}
|
||||
className='w-full rounded-lg overflow-hidden'
|
||||
/>
|
||||
</Zoom>
|
||||
</div>
|
||||
|
||||
<p className='text-sm max-w-2xl text-center'>
|
||||
Deploy any MCP server or OpenAPI service to Agentic's MCP Gateway,
|
||||
which handles auth, billing, rate-limiting, caching, etc. And
|
||||
instantly turn your API into a paid MCP product that supports every
|
||||
major LLM SDK and MCP client.{' '}
|
||||
<Link href={docsPublishingUrl} className='link'>
|
||||
Learn more
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Config section */}
|
||||
|
|
@ -43,17 +66,21 @@ export default function PublishingMCPsPage() {
|
|||
|
||||
<ExampleAgenticConfigs />
|
||||
|
||||
<div className='flex flex-col gap-4 text-sm max-w-2xl text-center'>
|
||||
<p>
|
||||
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{' '}
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
<p className='text-sm max-w-2xl text-center'>
|
||||
<Link href={`${docsPublishingUrl}/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={docsPublishingUrl} className='link'>
|
||||
Learn more
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Features section */}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import Link from 'next/link'
|
|||
|
||||
import { HeroButton } from '@/components/hero-button'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { docsMarketplaceUrl } from '@/lib/config'
|
||||
import { docsUrl } from '@/lib/config'
|
||||
|
||||
export function DemandSideCTA() {
|
||||
return (
|
||||
|
|
@ -14,7 +14,7 @@ export function DemandSideCTA() {
|
|||
</HeroButton>
|
||||
|
||||
<Button variant='outline' asChild className='h-full'>
|
||||
<Link href={docsMarketplaceUrl} className='font-mono'>
|
||||
<Link href={docsUrl} className='font-mono'>
|
||||
readTheDocs();
|
||||
</Link>
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export function ExampleAgenticConfigs() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className='w-full max-w-3xl flex flex-col items-center border rounded-lg shadow-sm p-2 md:p-4'>
|
||||
<div className='w-full max-w-3xl flex flex-col items-center border rounded-lg shadow-sm p-2 md:p-4 bg-background'>
|
||||
<ExampleAgenticConfigsContent config={config} setConfig={setConfig} />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ export function ExampleUsage({
|
|||
// })
|
||||
|
||||
return (
|
||||
<div className='w-full max-w-3xl flex flex-col items-center border rounded-lg shadow-sm p-2 md:p-4'>
|
||||
<div className='w-full max-w-3xl flex flex-col items-center border rounded-lg shadow-sm p-2 md:p-4 bg-background'>
|
||||
<ExampleUsageContent
|
||||
projectIdentifier={projectIdentifier}
|
||||
prompt={prompt}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {
|
|||
} from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
|
||||
import { calendarBookingUrl, docsUrl } from '@/lib/config'
|
||||
import { calendarBookingUrl, docsPublishingUrl } from '@/lib/config'
|
||||
|
||||
import { Feature, type FeatureData } from './feature'
|
||||
|
||||
|
|
@ -183,7 +183,7 @@ const mcpGatewayFeatures: FeatureData[] = [
|
|||
description: (
|
||||
<>Check out our docs for more details on Agentic's MCP gateway.</>
|
||||
),
|
||||
href: docsUrl,
|
||||
href: docsPublishingUrl,
|
||||
icon: TextSelectIcon,
|
||||
pattern: {
|
||||
y: 13,
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const mcpMarketplaceFeatures: FeatureData[] = [
|
|||
<span className='font-semibold'>
|
||||
All Agentic tools have been hand-crafted specifically for LLM tool
|
||||
use.
|
||||
</span>
|
||||
</span>{' '}
|
||||
We call this Agentic UX, and it's at the heart of why Agentic tools work
|
||||
better for LLM & MCP use cases than legacy APIs.
|
||||
</>
|
||||
|
|
@ -34,11 +34,12 @@ const mcpMarketplaceFeatures: FeatureData[] = [
|
|||
}
|
||||
},
|
||||
{
|
||||
name: 'Battle-Tested',
|
||||
name: 'Production-Ready MCP Support',
|
||||
description: (
|
||||
<>
|
||||
Forget random GitHub repos and piping MCP servers together. Agentic
|
||||
tools are all battle-tested in production and come with real SLAs.
|
||||
Forget random GitHub repos and gluing local MCP servers together.
|
||||
Agentic tools are all battle-tested in production and come with real
|
||||
SLAs.
|
||||
</>
|
||||
),
|
||||
icon: ShieldCheckIcon,
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import { sanitizeSearchParams } from '@agentic/platform-core'
|
||||
import Link from 'next/link'
|
||||
|
||||
import { HeroButton } from '@/components/hero-button'
|
||||
import { HeroButton, type HeroButtonVariant } from '@/components/hero-button'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { GitHubIcon } from '@/icons/github'
|
||||
import {
|
||||
|
|
@ -16,15 +16,17 @@ import { useAgentic } from './agentic-provider'
|
|||
import { GitHubStarCounter } from './github-star-counter'
|
||||
|
||||
export function SupplySideCTA({
|
||||
variant = 'github'
|
||||
variant = 'github',
|
||||
heroVariant = 'purple'
|
||||
}: {
|
||||
variant?: 'book-call' | 'github' | 'github-2'
|
||||
heroVariant?: HeroButtonVariant
|
||||
}) {
|
||||
const ctx = useAgentic()
|
||||
|
||||
return (
|
||||
<div className='flex justify-center items-center gap-12'>
|
||||
<HeroButton asChild className=''>
|
||||
<HeroButton asChild heroVariant={heroVariant}>
|
||||
<Link
|
||||
href={
|
||||
ctx?.isAuthenticated
|
||||
|
|
@ -32,7 +34,7 @@ export function SupplySideCTA({
|
|||
: `/signup?${sanitizeSearchParams({ next: docsPublishingQuickStartUrl })}`
|
||||
}
|
||||
>
|
||||
Get Started
|
||||
Quick Start
|
||||
</Link>
|
||||
</HeroButton>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ export const githubUrl = 'https://github.com/transitive-bullshit/agentic'
|
|||
export const calendarBookingUrl = 'https://cal.com/travis-fischer/15min'
|
||||
export const docsUrl = 'https://docs.agentic.so'
|
||||
export const docsPublishingQuickStartUrl = `${docsUrl}/publishing/quickstart`
|
||||
export const docsPublishingUrl = `${docsUrl}/publishing`
|
||||
export const docsMarketplaceUrl = `${docsUrl}/marketplace`
|
||||
export const discordUrl = 'https://discord.agentic.so'
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"rootDir": ".",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/public/*": ["public/*"],
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -806,6 +806,9 @@ importers:
|
|||
react-lottie-player:
|
||||
specifier: 'catalog:'
|
||||
version: 2.1.0(react@19.1.0)
|
||||
react-medium-image-zoom:
|
||||
specifier: ^5.2.14
|
||||
version: 5.2.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
react-use:
|
||||
specifier: 'catalog:'
|
||||
version: 17.6.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
|
|
@ -8171,6 +8174,12 @@ packages:
|
|||
peerDependencies:
|
||||
react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
react-medium-image-zoom@5.2.14:
|
||||
resolution: {integrity: sha512-nfTVYcAUnBzXQpPDcZL+cG/e6UceYUIG+zDcnemL7jtAqbJjVVkA85RgneGtJeni12dTyiRPZVM6Szkmwd/o8w==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
react-promise-suspense@0.3.4:
|
||||
resolution: {integrity: sha512-I42jl7L3Ze6kZaq+7zXWSunBa3b1on5yfvUW6Eo/3fFOj6dZ5Bqmcd264nJbTK/gn1HjjILAjSwnZbV4RpSaNQ==}
|
||||
|
||||
|
|
@ -17303,6 +17312,11 @@ snapshots:
|
|||
react: 19.1.0
|
||||
rfdc: 1.4.1
|
||||
|
||||
react-medium-image-zoom@5.2.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
|
||||
react-promise-suspense@0.3.4:
|
||||
dependencies:
|
||||
fast-deep-equal: 2.0.1
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue