> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getconcierge.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Welcome

> Production grade MCP framework with progressive tool disclosure

export const GradientCardDark = ({className, title, description, icon, href, color = 270}) => {
  const hue = typeof color === "number" ? color : 270;
  return <a href={href} className={`group relative overflow-hidden rounded-2xl no-underline block transition-all duration-500 hover:-translate-y-0.5 ${className || ""}`} style={{
    minHeight: "220px"
  }}>
      {}
      <div className="absolute inset-0 w-full h-full transition-all duration-700 group-hover:scale-[1.02]" style={{
    background: `linear-gradient(145deg,
            oklch(0.18 0.015 ${hue}) 0%,
            oklch(0.15 0.02 ${hue + 10}) 40%,
            oklch(0.13 0.025 ${hue + 15}) 100%)`
  }} />

      {}
      <div className="absolute inset-0 w-full h-full" style={{
    background: `radial-gradient(ellipse at 20% 0%, oklch(0.22 0.02 ${hue}) 0%, transparent 50%)`
  }} />

      {}
      <div className="absolute inset-0 w-full h-full rounded-2xl" style={{
    boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(255,255,255,0.08)`
  }} />

      {}
      <div className="relative z-10 p-7 flex flex-col justify-between h-full">
        <div className="text-2xl w-10 h-10 flex items-center justify-center rounded-xl" style={{
    background: `linear-gradient(135deg, oklch(0.22 0.02 ${hue}), oklch(0.18 0.03 ${hue + 10}))`,
    boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.08)`
  }}>
          {icon}
        </div>
        <div className="mt-auto pt-8">
          <h3 className="font-semibold text-lg tracking-tight" style={{
    color: `oklch(0.92 0.02 ${hue})`
  }}>
            {title}
          </h3>
          <p className="text-sm mt-1.5 leading-relaxed" style={{
    color: `oklch(0.65 0.02 ${hue})`
  }}>
            {description}
          </p>
        </div>
      </div>
    </a>;
};

export const GradientCard = ({className, title, description, icon, href, color = 270}) => {
  const hue = typeof color === "number" ? color : 270;
  return <a href={href} className={`group relative overflow-hidden rounded-2xl no-underline block transition-all duration-500 hover:-translate-y-0.5 ${className || ""}`} style={{
    minHeight: "220px"
  }}>
      {}
      <div className="absolute inset-0 w-full h-full transition-all duration-700 group-hover:scale-[1.02]" style={{
    background: `linear-gradient(145deg,
            oklch(0.96 0.02 ${hue}) 0%,
            oklch(0.92 0.04 ${hue + 10}) 40%,
            oklch(0.88 0.05 ${hue + 15}) 100%)`
  }} />

      {}
      <div className="absolute inset-0 w-full h-full" style={{
    background: `radial-gradient(ellipse at 20% 0%, oklch(0.98 0.01 ${hue}) 0%, transparent 50%)`
  }} />

      {}
      <div className="absolute inset-0 w-full h-full" style={{
    background: `radial-gradient(ellipse at 90% 90%, oklch(0.90 0.04 ${hue + 20}) 0%, transparent 45%)`
  }} />

      {}
      <div className="absolute inset-0 w-full h-full rounded-2xl" style={{
    boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.5), inset 0 1px 0 0 rgba(255,255,255,0.6)`
  }} />

      {}
      <div className="absolute inset-0 w-full h-full rounded-2xl transition-shadow duration-500 group-hover:shadow-lg" style={{
    boxShadow: `0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)`
  }} />

      {}
      <div className="relative z-10 p-7 flex flex-col justify-between h-full">
        <div className="text-2xl w-10 h-10 flex items-center justify-center rounded-xl" style={{
    background: `linear-gradient(135deg, oklch(0.94 0.03 ${hue}), oklch(0.88 0.05 ${hue + 10}))`,
    boxShadow: `0 1px 3px rgba(0,0,0,0.06)`
  }}>
          {icon}
        </div>
        <div className="mt-auto pt-8">
          <h3 className="font-semibold text-lg tracking-tight" style={{
    color: `oklch(0.25 0.02 ${hue})`
  }}>
            {title}
          </h3>
          <p className="text-sm mt-1.5 leading-relaxed" style={{
    color: `oklch(0.45 0.02 ${hue})`
  }}>
            {description}
          </p>
        </div>
      </div>
    </a>;
};

<div className="px-4 py-12 mt-16 lg:pb-20 max-w-4xl mx-auto">
  <div className="text-center">
    <img noZoom src="https://mintcdn.com/na-dfd459bd/1O3qeuL9R4tpSdOE/logo/light.svg?fit=max&auto=format&n=1O3qeuL9R4tpSdOE&q=85&s=d262ab6fe3841623e4cd7555af93d814" className="block dark:hidden mx-auto h-10 w-auto" alt="Concierge" width="32" height="32" data-path="logo/light.svg" />

    <img noZoom src="https://mintcdn.com/na-dfd459bd/1O3qeuL9R4tpSdOE/logo/dark.svg?fit=max&auto=format&n=1O3qeuL9R4tpSdOE&q=85&s=4828fe7ced698177fd7c65dce8cd2597" className="hidden dark:block mx-auto h-10 w-auto" alt="Concierge" width="32" height="32" data-path="logo/dark.svg" />

    <h1 className="text-3xl lg:text-4xl font-bold text-zinc-900 dark:text-zinc-50 mt-8 tracking-tight">
      The Production MCP Framework
    </h1>

    <p className="max-w-xl mx-auto mt-4 text-zinc-500 dark:text-zinc-400 text-base leading-relaxed">
      Build reliable MCP servers with progressive tool disclosure, staged workflows, and code-based execution.
    </p>

    <div className="flex items-center justify-center gap-3 mt-8">
      <a href="/getting-started/quickstart" className="px-5 py-2.5 bg-zinc-900 dark:bg-white hover:bg-zinc-800 dark:hover:bg-zinc-100 text-white dark:text-zinc-900 text-sm font-medium rounded-lg no-underline transition-colors">
        Get Started
      </a>

      <a href="https://github.com/concierge-hq/concierge" className="px-5 py-2.5 border border-zinc-200 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 text-sm font-medium rounded-lg no-underline hover:border-zinc-300 dark:hover:border-zinc-600 transition-colors">
        GitHub
      </a>
    </div>
  </div>

  <div className="mt-16 grid sm:grid-cols-3 gap-4 block dark:hidden">
    <GradientCard title="SDK" description="Stages, transitions, state, and provider modes." icon="🧩" href="/sdk/index" color={270} />

    <GradientCard title="Platform" description="Inspector, logs, evaluation, and analytics." icon="📊" href="/platform/inspector" color={210} />

    <GradientCard title="Quickstart" description="Zero to deployed in 5 minutes." icon="🚀" href="/getting-started/quickstart" color={160} />
  </div>

  <div className="mt-16 grid sm:grid-cols-3 gap-4 hidden dark:grid">
    <GradientCardDark title="SDK" description="Stages, transitions, state, and provider modes." icon="🧩" href="/sdk/index" color={270} />

    <GradientCardDark title="Platform" description="Inspector, logs, evaluation, and analytics." icon="📊" href="/platform/inspector" color={210} />

    <GradientCardDark title="Quickstart" description="Zero to deployed in 5 minutes." icon="🚀" href="/getting-started/quickstart" color={160} />
  </div>

  <div className="mt-16 text-center">
    <p className="text-xs font-medium text-zinc-400 dark:text-zinc-600 uppercase tracking-widest mb-5">One-line migration from FastMCP</p>
  </div>

  ```python theme={null}
  # Before
  from mcp.server.fastmcp import FastMCP
  app = FastMCP("my-server")

  # After:all existing @app.tool() decorators keep working
  from concierge import Concierge
  app = Concierge("my-server")
  ```
</div>

<div className="max-w-4xl mx-auto px-6 mt-4">
  <h2 className="text-xl font-semibold text-zinc-900 dark:text-zinc-50 mb-2">Why Concierge?</h2>

  <p className="text-zinc-500 dark:text-zinc-400 text-sm mb-8">
    Standard MCP servers expose all tools at once. At scale, this means bloated context, unpredictable tool selection, no enforced ordering, and no session state.
  </p>

  <CardGroup cols={3}>
    <Card title="Progressive Disclosure" icon="eye" href="/home/what-is-concierge">
      Show only relevant tools per stage. Less context, better accuracy, lower cost.
    </Card>

    <Card title="Staged Workflows" icon="git-branch" href="/sdk/transitions">
      Enforce tool ordering with transitions. Auto-generated navigation. Deterministic flows.
    </Card>

    <Card title="Code Execution" icon="terminal" href="/backends/code">
      Agent writes Python to call tools. 98% less context. Sandboxed and secure.
    </Card>
  </CardGroup>

  <CardGroup cols={3}>
    <Card title="Persistent State" icon="database" href="/sdk/state">
      Per-session key-value storage. Survives transitions. In-memory or Postgres.
    </Card>

    <Card title="Drop-in Compatible" icon="refresh-cw" href="/backends/index">
      Swap one import. All existing tools keep working. Fully MCP-compliant.
    </Card>

    <Card title="Platform" icon="layout-dashboard" href="/platform/inspector">
      Inspector, auto-evaluation, analytics, and server logs.
    </Card>
  </CardGroup>

  <h2 className="text-xl font-semibold text-zinc-900 dark:text-zinc-50 mt-16 mb-4">Community</h2>

  <CardGroup cols={2}>
    <Card title="Discord" icon="discord" href="https://discord.gg/bfT3VkhF">
      Chat with the team and other developers.
    </Card>

    <Card title="GitHub" icon="github" href="https://github.com/concierge-hq/concierge">
      Star, report bugs, or contribute.
    </Card>
  </CardGroup>
</div>