diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index cbe03583..e1a3d405 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -1,7 +1,6 @@ import './globals.css' import type { Metadata } from 'next' -import cs from 'clsx' import { Geist } from 'next/font/google' import { Toaster } from 'sonner' @@ -11,7 +10,6 @@ import { Header } from '@/components/header' import * as config from '@/lib/config' import Providers from './providers' -import styles from './styles.module.css' const geist = Geist({ variable: '--font-geist', @@ -49,10 +47,10 @@ export default function RootLayout({ -
+
-
+
{children}
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 53542f39..eed49575 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -1,9 +1,19 @@ -import { OpenSourceSection } from '@/components/open-source-section' -import { SupplySideCTA } from '@/components/supply-side-cta' +import Link from 'next/link' -export default function IndexPage() { +import { GitHubStarCounter } from '@/components/github-star-counter' +import { SupplySideCTA } from '@/components/supply-side-cta' +import { + calendarBookingUrl, + discordUrl, + docsUrl, + githubUrl, + twitterUrl +} from '@/lib/config' + +export default function TheBestDamnLandingPageEver() { return ( <> + {/* Hero section */}

Your API → Paid MCP, Instantly @@ -18,13 +28,208 @@ export default function IndexPage() {

-
-

How it works

+ {/* How it works section */} +
+

+ How It Works +

TODO
- + {/* Features section */} +
+

+ Production-Ready and Extremely Flexible +

+ +
+
+

+ Auth +

+ +

+ 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,{' '} + + let me know + + . +

+
+ +
+

+ Monetization +

+ +

+ Charge for your MCP products with a flexible, declarative pricing + model built on top of Stripe. Agentic supports almost any + combination of fixed and usage-based billing models, both at the + MCP level, at the tool-call level, and at the custom metric level + (e.g., tokens, image transformations, etc). +

+
+ +
+

+ Support both MCP and HTTP +

+ +

+ All agentic products support being used both as a standard MCP + server and 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{' '} + HTTP POST 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. +

+
+ +
+

+ Rate-limiting +

+ +

+ Customize your MCP product with durable rate-limiting built on top + of Cloudflare's global infrastructure. Create default rate-limits, + change them based on a customer's subscribed pricing plan, and + create custom tool-specific overrides, all with a simple, + strongly-typed JSON config. REST assured that your origin API will + be safe behind Agentic's robust API gateway. +

+
+ +
+

+ Caching +

+ +

+ Opt-in to caching with familiar cache-control and{' '} + stale-while-revalidate features. MCP tool calls include + caching information in their _meta fields with symmetry + to standard HTTP headers. All caching takes place in Cloudflare's + global edge cache, and will only be enabled if you choose to + enable it for your product or specific tools. +

+
+ +
+

+ Analytics +

+ +

+ Agentic tracks usage-based billing and analytics at a fine-grained + level, so you can understand how your customers are using your + product. +

+
+ +
+

+ Versioning +

+ +

+ 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. + Publish deployment publicly uses semantic versioning ( + semver), so your customers can choose how to handle + breaking changes. +

+
+ +
+

+ And more! +

+ +

+ Checkout our docs for more details on + Agentic's MCP API gateway. +

+
+
+
+ + {/* Marketplace section */} +
+

+ MCP Marketplace +

+ +

Coming soon...

+
+ + {/* Open source section */} +
+

+ Agentic is 100% Open Source! +

+ +

+ Join the tens of thousands of TypeScript AI engineers who've{' '} + + starred the project on GitHub + + .{' '} + + Check out the source on GitHub + + ,{' '} + + join our community on Discord + + , or{' '} + + ping me on Twitter + + . +

+ + +
+ + {/* CTA section */} +
+ +
) } diff --git a/apps/web/src/app/styles.module.css b/apps/web/src/app/styles.module.css deleted file mode 100644 index 87bb58f2..00000000 --- a/apps/web/src/app/styles.module.css +++ /dev/null @@ -1,17 +0,0 @@ -.root { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - min-height: 100vh; -} - -.main { - flex: 1; - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - max-width: 1200px; -} diff --git a/apps/web/src/components/confetti.tsx b/apps/web/src/components/confetti.tsx index 965a90e5..b4533c50 100644 --- a/apps/web/src/components/confetti.tsx +++ b/apps/web/src/components/confetti.tsx @@ -4,6 +4,8 @@ import type { Simplify } from 'type-fest' import confetti, { type Options as ConfettiBaseOptions } from 'canvas-confetti' import { useCallback } from 'react' +import { randomInRange } from '@/lib/utils' + export type ConfettiOptions = Simplify< ConfettiBaseOptions & { duration?: number @@ -55,7 +57,3 @@ export function useConfettiFireworks() { fireConfetti } } - -function randomInRange(min: number, max: number) { - return Math.random() * (max - min) + min -} diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx index dd6174a3..65ebafb9 100644 --- a/apps/web/src/components/footer.tsx +++ b/apps/web/src/components/footer.tsx @@ -13,6 +13,7 @@ export function Footer() {

Site

+