kopia lustrzana https://github.com/transitive-bullshit/chatgpt-api
265 wiersze
9.8 KiB
TypeScript
265 wiersze
9.8 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
import { GitHubStarCounter } from '@/components/github-star-counter'
|
|
import { HeroSimulation2 } from '@/components/hero-simulation-2'
|
|
import { SupplySideCTA } from '@/components/supply-side-cta'
|
|
import {
|
|
calendarBookingUrl,
|
|
docsUrl,
|
|
githubUrl,
|
|
twitterUrl
|
|
} from '@/lib/config'
|
|
|
|
export default function TheSecondBestDamnLandingPageEver() {
|
|
return (
|
|
<>
|
|
{/* Hero section */}
|
|
<section className='mb-16 relative'>
|
|
<div className='flex gap-8'>
|
|
{/* <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'>
|
|
Your API → Paid MCP, Instantly
|
|
</h1>
|
|
|
|
<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>.
|
|
</h5>
|
|
|
|
<SupplySideCTA />
|
|
</div>
|
|
|
|
<div className='w-[40%] h-full min-h-full' />
|
|
|
|
<HeroSimulation2 className='absolute! top-[-50%]! left-[30%] w-full h-[200%]!' />
|
|
</div>
|
|
</section>
|
|
|
|
<section></section>
|
|
|
|
{/* 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'>
|
|
How It Works
|
|
</h2>
|
|
|
|
<div>TODO</div>
|
|
</section>
|
|
|
|
{/* Features 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'>
|
|
Production-Ready and Extremely Flexible
|
|
</h2>
|
|
|
|
<div className='grid gap-6 max-w-2xl'>
|
|
<div className='flex flex-col gap-2'>
|
|
<h4 className='text-center text-balance text-lg font-heading'>
|
|
Auth
|
|
</h4>
|
|
|
|
<p className='text-sm'>
|
|
Ship to production fast with Agentic's free, built-in
|
|
authentication. Email & password, OAuth, GitHub, Google, Twitter,
|
|
etc – if your origin API requires OAuth credentials, Agentic
|
|
likely already supports it, and if not,{' '}
|
|
<Link
|
|
href={calendarBookingUrl}
|
|
target='_blank'
|
|
rel='noopener'
|
|
className='link'
|
|
>
|
|
let me know
|
|
</Link>
|
|
.
|
|
</p>
|
|
</div>
|
|
|
|
<div className='flex flex-col gap-2'>
|
|
<h4 className='text-center text-balance text-lg font-heading'>
|
|
Stripe Billing
|
|
</h4>
|
|
|
|
<p className='text-sm'>
|
|
Charge for your MCP products with a flexible, declarative pricing
|
|
model built on top of Stripe. Agentic supports almost any
|
|
combination of fixed and{' '}
|
|
<span className='font-semibold'>usage-based billing</span> models,
|
|
both at the MCP level, at the tool-call level, and at the custom
|
|
metric level (e.g., tokens, image transformations, etc).
|
|
</p>
|
|
</div>
|
|
|
|
<div className='flex flex-col gap-2'>
|
|
<h4 className='text-center text-balance text-lg font-heading'>
|
|
Support both MCP and HTTP
|
|
</h4>
|
|
|
|
<p className='text-sm'>
|
|
All agentic products support being used both as a standard MCP
|
|
server <em>and</em> as an extremely simple HTTP API. MCP is
|
|
important for interop, discoverability, and future-proofing,
|
|
whereas being able to call your agentic tools via simple{' '}
|
|
<em>HTTP POST</em> requests makes tool use easy to debug and makes
|
|
integration with existing LLM tool calling patterns a breeze. With
|
|
Agentic, you get the best of both worlds, including future support
|
|
for unreleased MCP features and related specs.
|
|
</p>
|
|
</div>
|
|
|
|
<div className='flex flex-col gap-2'>
|
|
<h4 className='text-center text-balance text-lg font-heading'>
|
|
API keys
|
|
</h4>
|
|
|
|
<p className='text-sm'>
|
|
When a customer subscribes to your product, they're given a unique
|
|
API key. MCP URLs are appended with this API key to correlate
|
|
usage with their subscription. Customer HTTP tool calls use the
|
|
same API key as a standard HTTP <em>Authorization</em> header.
|
|
</p>
|
|
</div>
|
|
|
|
<div className='flex flex-col gap-2'>
|
|
<h4 className='text-center text-balance text-lg font-heading'>
|
|
Rate-limiting
|
|
</h4>
|
|
|
|
<p className='text-sm'>
|
|
All agentic products are protected by durable rate-limiting built
|
|
on top of Cloudflare's global infrastructure. Customize the
|
|
default rate-limits, change them based on a customer's pricing
|
|
plan, or create custom tool-specific overrides. REST assured that
|
|
your origin API will be safe behind Agentic's robust API gateway.
|
|
</p>
|
|
</div>
|
|
|
|
<div className='flex flex-col gap-2'>
|
|
<h4 className='text-center text-balance text-lg font-heading'>
|
|
Caching
|
|
</h4>
|
|
|
|
<p className='text-sm'>
|
|
Opt-in to caching with familiar <em>cache-control</em> and{' '}
|
|
<em>stale-while-revalidate</em> options. MCP tool calls include
|
|
caching information in their <em>_meta</em> fields, providing
|
|
parity with standard HTTP headers. All caching takes place in
|
|
Cloudflare's global edge cache, and caching will only be enabled
|
|
if you choose to enable it for your product or individual tools.
|
|
</p>
|
|
</div>
|
|
|
|
<div className='flex flex-col gap-2'>
|
|
<h4 className='text-center text-balance text-lg font-heading'>
|
|
Analytics
|
|
</h4>
|
|
|
|
<p className='text-sm'>
|
|
Agentic tracks all tool calls for usage-based billing and
|
|
analytics at a fine-grained level, so you can drill in and deeply
|
|
understand how your customers are using your product.
|
|
</p>
|
|
</div>
|
|
|
|
<div className='flex flex-col gap-2'>
|
|
<h4 className='text-center text-balance text-lg font-heading'>
|
|
Versioning
|
|
</h4>
|
|
|
|
<p className='text-sm'>
|
|
Just like Vercel, Agentic uses immutable deployments, so every
|
|
time you make a change to your product's config, pricing, or docs,
|
|
a unique preview deployment is created for that change. This
|
|
enables instant rollbacks if there are problems with a deployment.
|
|
Publishing deployments publicly uses semantic versioning (
|
|
<em>semver</em>), so your customers can choose how to handle
|
|
breaking changes.
|
|
</p>
|
|
</div>
|
|
|
|
<div className='flex flex-col gap-2'>
|
|
<h4 className='text-center text-balance text-lg font-heading'>
|
|
That's just the start
|
|
</h4>
|
|
|
|
<p className='text-sm'>
|
|
<Link href={docsUrl} className='link'>
|
|
Check out our docs
|
|
</Link>{' '}
|
|
for more details on Agentic's MCP API gateway.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Marketplace 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'>
|
|
MCP Marketplace
|
|
</h2>
|
|
|
|
<p>
|
|
<i>Coming soon...</i>
|
|
</p>
|
|
</section> */}
|
|
|
|
{/* 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'>
|
|
Agentic is 100% Open Source
|
|
</h2>
|
|
|
|
<p className=''>
|
|
Open source is very dear to my heart, and I couldn't be happier that
|
|
Agentic is fully OSS. It's written in{' '}
|
|
<span className='font-semibold'>TypeScript</span> and has a small but
|
|
vibrant developer community.{' '}
|
|
<Link
|
|
href={githubUrl}
|
|
target='_blank'
|
|
rel='noopener'
|
|
className='link'
|
|
>
|
|
Check out the source on GitHub
|
|
</Link>{' '}
|
|
or{' '}
|
|
<Link
|
|
href={twitterUrl}
|
|
target='_blank'
|
|
rel='noopener'
|
|
className='link'
|
|
>
|
|
ping me on Twitter with questions / feedback
|
|
</Link>
|
|
.
|
|
</p>
|
|
|
|
<GitHubStarCounter />
|
|
</section>
|
|
|
|
{/* Social proof section */}
|
|
<section className='gap-8 mb-16'>
|
|
<h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
|
|
TODO: social proof
|
|
</h2>
|
|
|
|
<p className='text-center text-lg max-w-2xl'>TODO</p>
|
|
</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'>
|
|
Deploy Your MCP Today
|
|
</h2>
|
|
|
|
<SupplySideCTA variant='github-2' />
|
|
</section>
|
|
</>
|
|
)
|
|
}
|