Skip to content

feat(homepage): reposition around MCP / AI gateway wedge #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ndreno wants to merge 1 commit into from
Closed

feat(homepage): reposition around MCP / AI gateway wedge #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ interface Props {

const {
title,
description = "Barbacane - The spec-driven API gateway built in Rust. Your OpenAPI and AsyncAPI specs become your gateway configuration.",
description = "Barbacane is the open-source AI gateway that turns any OpenAPI spec into an MCP tool server, with built-in prompt guarding, token limits, cost tracking, and response guarding. Rust-native and spec-first.",
type = 'website',
article,
ogImage: customOgImage,
Expand Down
206 changes: 183 additions & 23 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,32 @@
import Layout from '../layouts/Layout.astro';
---

<Layout title="Barbacane - The Spec-Driven API Gateway">
<Layout title="Barbacane - Open-source AI gateway for MCP and OpenAPI">
<!-- Hero Section -->
<section class="section relative overflow-hidden">
<div class="absolute inset-0 hero-gradient"></div>
<div class="container-custom relative">
<div class="max-w-4xl mx-auto text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-background-light border border-themed mb-8">
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
<span class="text-sm text-foreground-muted">Open Source &middot; AGPLv3</span>
<span class="text-sm text-foreground-muted">Open source &middot; MCP native &middot; AGPLv3</span>
</div>

<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold mb-6 leading-tight">
Your spec is your
<span class="text-gradient">gateway</span>
Turn any OpenAPI spec into an
<span class="text-gradient">MCP tool server</span>
</h1>

<p class="text-lg sm:text-xl text-foreground-muted max-w-2xl mx-auto mb-10">
Stop maintaining two sources of truth. Barbacane uses your OpenAPI and AsyncAPI
specifications as the single source of truth for routing, validation, authentication, authorization, and event bridging.
Barbacane is the open-source AI gateway for Model Context Protocol.
Expose your existing APIs to AI agents as typed, governed, auditable tools.
Prompt guarding, token limits, cost tracking, and response guarding are built in.
One Rust-native artifact, spec-first.
</p>

<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#get-started" class="btn-primary text-lg px-8 py-4">
Get Started
<a href="#mcp-quickstart" class="btn-primary text-lg px-8 py-4">
See it in action
<svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</svg>
Expand All @@ -41,6 +43,163 @@ import Layout from '../layouts/Layout.astro';
</div>
</section>

<!-- MCP Quickstart Section -->
<section id="mcp-quickstart" class="section bg-background-light">
<div class="container-custom">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">
Your OpenAPI becomes an <span class="text-gradient">MCP server</span>
</h2>
<p class="text-xl text-foreground-muted max-w-3xl mx-auto">
Enable MCP once at the spec root and your existing API is agent-callable.
Authentication, rate limits, validation, and audit logging all apply to tool
calls, because they are just HTTP requests in disguise.
</p>
</div>

<div class="grid lg:grid-cols-2 gap-8 items-start">
<div class="code-block rounded-lg p-5 text-sm overflow-auto">
<pre class="font-mono text-foreground"><code># Enable MCP for the whole API
x-barbacane-mcp:
enabled: true
server_name: Orders API
server_version: 1.0.0

paths:
/orders/&#123;id&#125;:
get:
operationId: getOrder
summary: Fetch an order by id
security:
- bearerAuth: []
parameters:
- name: id
in: path
required: true
schema: &#123; type: string &#125;
responses:
'200':
description: Order
content:
application/json:
schema:
$ref: '#/components/schemas/Order'

/admin/orders/purge:
delete:
operationId: purgeOrders
summary: Purge archived orders
# Hide this one from agents
x-barbacane-mcp:
enabled: false</code></pre>
</div>

<div class="space-y-6">
<div>
<h3 class="text-xl font-semibold mb-2">Agents discover your tools</h3>
<p class="text-foreground-muted">
Barbacane exposes a JSON-RPC 2.0 MCP endpoint at
<code class="text-primary">/__barbacane/mcp</code>. Each operation becomes a
typed tool, with the name taken from <code class="text-primary">operationId</code>,
the description from <code class="text-primary">summary</code>, and input and
output schemas merged from your parameters, body, and responses.
</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-2">Calls run through your middleware</h3>
<p class="text-foreground-muted">
Tool calls are HTTP requests. They pass through authentication, authorization,
rate limits, validation, transformations, and observability like any other
request. No shadow stack, no drift.
</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-2">Opt out what agents should not see</h3>
<p class="text-foreground-muted">
By default every operation is a tool. Add
<code class="text-primary">x-barbacane-mcp: &#123; enabled: false &#125;</code>
to any operation you want to hide, such as admin endpoints or destructive
actions.
</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- AI Governance Section -->
<section class="section">
<div class="container-custom">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">
AI governance, built in
</h2>
<p class="text-xl text-foreground-muted max-w-3xl mx-auto">
Four middlewares compose like any other Barbacane plugin. Named profiles,
CEL expressions, fail-closed on misconfiguration.
</p>
</div>

<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="card">
<div class="w-12 h-12 rounded-lg bg-primary-subtle flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Prompt guard</h3>
<p class="text-foreground-muted text-sm">
PII redaction, regex allow and deny lists, shape constraints on inbound prompts.
Shift-left validation at lint time.
</p>
</div>

<div class="card">
<div class="w-12 h-12 rounded-lg bg-secondary-subtle flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Token limits</h3>
<p class="text-foreground-muted text-sm">
Token-based sliding windows per consumer, per operation, per tenant.
Stop runaway agents before they cost you money.
</p>
</div>

<div class="card">
<div class="w-12 h-12 rounded-lg bg-accent-subtle flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Cost tracking</h3>
<p class="text-foreground-muted text-sm">
Per-operation spend observability as Prometheus metrics. Budget alerts and
cost attribution across tenants and agents.
</p>
</div>

<div class="card">
<div class="w-12 h-12 rounded-lg bg-primary-subtle flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Response guard</h3>
<p class="text-foreground-muted text-sm">
Output scrubbing, schema re-validation, and policy checks before responses
reach the agent. Fail closed on misconfiguration.
</p>
</div>
</div>
</div>
</div>
</section>

<!-- Problem Section -->
<section class="section bg-background-light">
<div class="container-custom">
Expand Down Expand Up @@ -134,14 +293,28 @@ import Layout from '../layouts/Layout.astro';
<div class="container-custom">
<div class="max-w-4xl mx-auto text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">
Everything you need in an API gateway
One gateway for your <span class="text-gradient">APIs</span> and your <span class="text-gradient">agents</span>
</h2>
<p class="text-xl text-foreground-muted">
Built in Rust for speed and safety. Extended with WebAssembly for flexibility.
AI-native features on top of a production-grade, spec-first gateway.
Rust for speed and safety, WebAssembly plugins for extensibility.
</p>
</div>

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="card">
<div class="w-12 h-12 rounded-lg bg-accent-subtle flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.591.659H9.061a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2 2 0 01-2 2H7a2 2 0 01-2-2v-2.5"></path>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">MCP server for AI agents</h3>
<p class="text-foreground-muted">
Expose your API operations as AI-callable tools via the Model Context Protocol.
AI agents discover and call endpoints through JSON-RPC 2.0, one extension to enable.
</p>
</div>

<div class="card">
<div class="w-12 h-12 rounded-lg bg-primary-subtle flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
Expand Down Expand Up @@ -324,19 +497,6 @@ import Layout from '../layouts/Layout.astro';
</p>
</div>

<div class="card">
<div class="w-12 h-12 rounded-lg bg-accent-subtle flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.591.659H9.061a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2 2 0 01-2 2H7a2 2 0 01-2-2v-2.5"></path>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">MCP Server for AI Agents</h3>
<p class="text-foreground-muted">
Expose your API operations as AI-callable tools via the Model Context Protocol.
AI agents discover and call endpoints through JSON-RPC 2.0 &mdash; one extension to enable.
</p>
</div>

<div class="card">
<div class="w-12 h-12 rounded-lg bg-primary-subtle flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
Expand Down