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

# Home

export const Link = ({href, children, className, ...props}) => {
  const localizedHref = localizeLink(href);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

export const HideElements = () => {
  return <style>
      {`
        #pagination, .feedback-toolbar {
          display: none !important;
        }

        #header.relative {
          display: none;
        }

        .mdx-content {
          margin-top: 0 !important;
          margin-bottom: 0 !important;
        }
        
        @media (min-width: 1030px) {
          #content-container {
            padding: 0 !important;
          }
        }
      `}
    </style>;
};

<HideElements />

<div className="homepage_container max-w-[1200px] mx-auto mb-4 px-0 lg:px-8 pb-12 my-18 xl:my-0">
  <h1 className="mt-8 text-2xl text-black dark:text-white md:text-3xl lg:text-4xl font-bold mb-4 text-center">
    Welcome to Box
  </h1>

  <p className="text-base md:text-lg mb-8 text-center max-w-3xl mx-auto text-gray-600 dark:text-gray-400">
    Learn how to use Box to manage documents at scale with enterprise security, real-time collaboration, e-signatures, workflow automation, and AI built in. Then extend those capabilities into your own applications using Box APIs, SDKs, embeddable UI components, and webhooks.
  </p>

  <div className="flex flex-wrap justify-center gap-4 mb-8">
    <a href={localizeLink("/guides/getting-started")} className="signup-cta-button inline-flex items-center whitespace-nowrap px-6 py-2.5 text-sm font-semibold text-white no-underline">
      Quick start
    </a>

    <a href={localizeLink("/reference")} className="homepage-secondary-button inline-flex items-center whitespace-nowrap px-6 py-2.5 text-sm font-semibold no-underline">
      API reference
    </a>
  </div>

  <h2 className="mt-12 text-2xl text-black dark:text-white md:text-3xl lg:text-4xl font-bold mb-4 text-center homepage_h2">
    I want to…
  </h2>

  <p className="text-base mb-8 text-center text-gray-600 dark:text-gray-400">
    Start with the outcome that matches your goal.
  </p>

  <CardGroup cols={3}>
    <Card title="Manage and collaborate on content" href={localizeLink("/guides/tutorials/secure-in-app-document-review")} icon="folder">
      Upload, render, and review your key documents, all in your own app.
    </Card>

    <Card title="Extract metadata" href={localizeLink("/guides/box-ai/quick-start/box-ai-extract")} icon="table">
      Turn complex documents into structured data with Box AI Extract and Enhanced Extract Agent.
    </Card>

    <Card title="Display content interfaces to users" href={localizeLink("/tutorials/explorer-metadata-view")} icon="window-maximize">
      Let users browse, filter, and edit files by metadata inside your application.
    </Card>

    <Card title="Build an AI knowledge base" href={localizeLink("/tutorials/sales-rfp-answer-bank")} icon="magnifying-glass">
      Index curated content in a Box Hub and get answers with Box AI.
    </Card>

    <Card title="Connect AI agents" href={localizeLink("/tutorials/connect-an-agent-to-box")} icon="sparkles">
      Give AI agents access to Box content through the Box CLI or the Box MCP server.
    </Card>

    <Card title="Create a company brain" href={localizeLink("/tutorials/company-brain")} icon="brain">
      Develop a secure, governed source for humans and agents to work from the same content, versions, and context.
    </Card>
  </CardGroup>

  <h2 className="mt-12 text-2xl text-black dark:text-white md:text-3xl lg:text-4xl font-bold mb-4 text-center homepage_h2">
    New here? Start in 3 steps
  </h2>

  <Steps>
    <Step title={<a href="https://cloud.app.box.com/developers/console" className="no-underline hover:underline">Open the Developer Console</a>}>
      Create an application, configure scopes, and generate credentials.
    </Step>

    <Step title={<Link href="/guides/getting-started">Make your first API call</Link>}>
      Upload a file and authenticate with a developer token.
    </Step>

    <Step title={<Link href="/guides/tutorials">Pick a tutorial for your use case</Link>}>
      Build something real: invoice automation, RFP answer banks, and more.
    </Step>
  </Steps>

  <h2 className="mt-12 text-2xl text-black dark:text-white md:text-3xl lg:text-4xl font-bold mb-4 text-center homepage_h2">
    Browse by topic
  </h2>

  <CardGroup cols={3}>
    <Card title="Authentication & authorization" href={localizeLink("/guides/authentication")} icon="fingerprint">
      OAuth, JWT, app tokens, and scoped access for users and services.
    </Card>

    <Card title="Security" href={localizeLink("/guides/security")} icon="camera-cctv">
      Access tokens, scopes, permissions, and platform controls that protect your content.
    </Card>

    <Card title="Collaboration" href={localizeLink("/guides/collaborations/index")} icon="users">
      Invite collaborators, manage access, and share content across teams.
    </Card>

    <Card title="Box AI" href={localizeLink("/ai/box-ai-api")} icon="sparkles">
      Summarize, extract, generate, and query content with enterprise permissions intact.
    </Card>

    <Card title="Supported AI models" href={localizeLink("/guides/box-ai/ai-models/index")} icon="microchip">
      Core and customer-enabled models with access levels, capability tiers, and API names.
    </Card>

    <Card title="Intelligent workflow" href={localizeLink("/guides/intelligent-workflow")} icon="gears">
      Build governed, agentic content workflows without running your own orchestration stack.
    </Card>

    <Card title="Metadata" href={localizeLink("/guides/metadata/index")} icon="tags">
      Tag files with structured fields your apps can search and automate on.
    </Card>

    <Card title="Search" href={localizeLink("/guides/search/index")} icon="magnifying-glass">
      Find files and metadata across your enterprise content.
    </Card>

    <Card title="Webhooks & events" href={localizeLink("/guides/webhooks/index")} icon="bell">
      React to uploads, permission changes, and enterprise activity in real time.
    </Card>
  </CardGroup>

  <h2 className="mt-12 text-2xl text-black dark:text-white md:text-3xl lg:text-4xl font-bold mb-4 text-center homepage_h2">
    Stay connected
  </h2>

  <CardGroup cols={4}>
    <Card title="Changelog" href={localizeLink("/changelog/")} icon="clock-rotate-left" />

    <Card title="Developer blog" href="https://blog.box.com/developer" icon="newspaper" />

    <Card title="Developer playlist" href="https://www.youtube.com/playlist?list=PL0F3BD5B64D6A39F1" icon="youtube" />

    <Card title="Community" href="https://community.box.com/box-platform-5" icon="comments" />
  </CardGroup>
</div>