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

# Upsun Developer Center

<div className="w-full">
  <div className="max-w-3xl mx-auto px-6 pt-24 pb-20 text-center">
    <h1 className="text-5xl md:text-6xl font-bold text-gray-900 dark:text-white leading-[1.08] mb-5 tracking-heading">
      Build on <span className="text-accent dark:text-[#D5F800]">Upsun</span>
    </h1>

    <p className="text-lg max-w-lg mx-auto mb-10 leading-relaxed text-muted">
      Docs, guides, and references for deploying and managing applications on the Upsun platform.
    </p>

    <div className="flex gap-3 justify-center flex-wrap">
      <a href="/docs/get-started" className="hero-get-started-btn inline-flex items-center gap-2 px-7 py-3 btn-primary rounded-full transition-colors text-sm">
        Get Started

        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
        </svg>
      </a>

      <a href="/docs/core-concepts/index" className="hero-what-is-upsun-btn inline-flex items-center gap-2 px-7 py-3 btn-secondary rounded-full transition-colors text-sm">
        Browse Docs
      </a>
    </div>
  </div>

  <div className="max-w-7xl mx-auto px-6">
    {/* ─── Explore ─── */}

    <div className="pb-20">
      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 tracking-subheading">Explore</h2>
      <p className="mb-8 text-muted">Jump into the topics that matter to you.</p>

      <CardGroup cols={3}>
        <Card title="Quick Start" href="/docs/get-started" icon="zap">
          Deploy your first app step by step
        </Card>

        <Card title="Framework Guides" href="/docs/get-started/stacks" icon="layers">
          Next.js, Django, Laravel, Symfony, and more
        </Card>

        <Card title="Services & Databases" href="/docs/add-services" icon="database">
          PostgreSQL, MySQL, Redis, and more
        </Card>

        <Card title="Environments" href="/docs/environments" icon="sliders-horizontal">
          Branch, preview, and manage environments
        </Card>

        <Card title="Observability" href="/docs/observability" icon="activity">
          Monitoring, metrics, and performance
        </Card>

        <Card title="AI & Automation" href="/docs/get-started/ai" icon="cpu">
          MCP servers, AI agents, and CLI tools
        </Card>
      </CardGroup>
    </div>

    {/* ─── What's New ─── */}

    <div className="pb-20">
      <div className="relative rounded-2xl border border-accent-subtle p-8 overflow-hidden" style={{background: 'linear-gradient(135deg, rgba(96,70,255,0.04) 0%, rgba(96,70,255,0.01) 100%)'}}>
        <div className="absolute top-0 left-0 right-0 h-[2px] gradient-accent-line" />

        <div className="flex items-center justify-between mb-6">
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white tracking-subheading">What's New</h2>

          <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-accent-badge border border-accent-soft">
            <div className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />

            <span className="text-xs font-semibold text-accent">NEW</span>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <a href="/tutorials/ai/coding-agent" className="group p-5 rounded-xl bg-white dark:bg-[#191C1E] border-theme card-hover shadow-sm hover:shadow-md transition-all">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-lg bg-accent-badge border border-accent-soft text-accent">Tutorial</span>
            </div>

            <h3 className="text-sm font-semibold text-gray-900 dark:text-white transition-colors">Deploying a coding agent with opencode</h3>
            <p className="text-sm mt-1.5 text-muted">Deploy opencode as a self-hosted AI coding agent with headless Chrome for web automation and performance testing.</p>
          </a>

          <a href="/tutorials/ai/langchain-chatbot" className="group p-5 rounded-xl bg-white dark:bg-[#191C1E] border-theme card-hover shadow-sm hover:shadow-md transition-all">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-lg bg-accent-badge border border-accent-soft text-accent">Tutorial</span>
            </div>

            <h3 className="text-sm font-semibold text-gray-900 dark:text-white transition-colors">Building a LangChain chatbot</h3>
            <p className="text-sm mt-1.5 text-muted">Build a documentation chatbot with Node.js, LangChain, and OpenAI, with prompt injection defense and streaming responses.</p>
          </a>

          <a href="/tutorials/ai/rag-pipeline" className="group p-5 rounded-xl bg-white dark:bg-[#191C1E] border-theme card-hover shadow-sm hover:shadow-md transition-all">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-lg bg-accent-badge border border-accent-soft text-accent">Tutorial</span>
            </div>

            <h3 className="text-sm font-semibold text-gray-900 dark:text-white transition-colors">Building a RAG pipeline with Qdrant</h3>
            <p className="text-sm mt-1.5 text-muted">Replace context stuffing with vector search using Qdrant for 25x lower cost per query.</p>
          </a>
        </div>
      </div>
    </div>

    {/* ─── Deploy Your Stack ─── */}

    <div className="pb-20">
      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 tracking-subheading">Deploy Your Stack</h2>
      <p className="mb-8 text-muted">Get started with your favorite framework.</p>

      <CardGroup cols={4}>
        <Card title="Next.js" href="/docs/get-started/stacks/nextjs" icon="react">
          Full-stack React with SSR
        </Card>

        <Card title="Django" href="/docs/get-started/stacks/django" icon="python">
          Python web framework
        </Card>

        <Card title="Laravel" href="/docs/get-started/stacks/laravel" icon="laravel">
          PHP framework for artisans
        </Card>

        <Card title="Express" href="/docs/get-started/stacks/express" icon="node-js">
          Minimal Node.js framework
        </Card>

        <Card title="Symfony" href="/docs/get-started/stacks/symfony" icon="symfony">
          Enterprise PHP framework
        </Card>

        <Card title="Flask" href="/docs/get-started/stacks/flask" icon="beaker">
          Lightweight Python framework
        </Card>

        <Card title="WordPress" href="/tutorials/wordpress" icon="wordpress">
          Popular CMS platform
        </Card>

        <Card title="All Frameworks →" href="/docs/get-started/stacks" icon="arrow-right">
          Go, Ruby, Rust, Elixir, Java
        </Card>
      </CardGroup>
    </div>

    {/* ─── How It Works ─── */}

    <div className="pb-20">
      <div className="rounded-2xl overflow-hidden bg-surface-dark">
        <div className="p-8">
          <h2 className="text-2xl font-bold text-white mb-2 tracking-subheading">
            Configure. Commit. Deploy.
          </h2>

          <p className="text-on-dark mb-8 max-w-lg">
            Define your infrastructure in YAML, then deploy with a single push.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-10">
            <div className="flex flex-col">
              <div className="text-on-dark-muted text-xs mb-2 font-mono">.upsun/config.yaml</div>

              <div className="bg-code-block rounded-lg p-5 font-mono text-[13px] leading-relaxed flex-1">
                <div className="text-accent-light">applications:</div>
                <div className="text-on-dark ml-4">myapp:</div>
                <div className="text-accent-light ml-8">type: <span className="text-green-400">{'"'}nodejs:22{'"'}</span></div>
                <div className="text-accent-light ml-8">hooks:</div>
                <div className="text-accent-light ml-12">build: <span className="text-green-400">npm install</span></div>
                <div className="text-accent-light ml-8">web:</div>
                <div className="text-accent-light ml-12">commands:</div>
                <div className="text-accent-light ml-16">start: <span className="text-green-400">{'"'}npm start{'"'}</span></div>

                <div className="mt-3" />

                <div className="text-accent-light">services:</div>
                <div className="text-on-dark ml-4">database:</div>
                <div className="text-accent-light ml-8">type: <span className="text-green-400">postgresql:16</span></div>
              </div>
            </div>

            <div className="flex flex-col">
              <div className="text-on-dark-muted text-xs mb-2 font-mono">Deploy with Git</div>

              <div className="bg-code-block rounded-lg p-5 font-mono text-[13px] leading-relaxed flex-1">
                <div className="text-on-dark-muted mb-1"># Add your config</div>

                <div className="mb-3">
                  <span className="text-on-dark">\$</span>
                  <span className="text-on-dark ml-2">git add .upsun/config.yaml</span>
                </div>

                <div className="text-on-dark-muted mb-1"># Commit and push</div>

                <div className="mb-3">
                  <span className="text-on-dark">\$</span>
                  <span className="text-on-dark ml-2">git commit -m {'"'}Add Upsun config{'"'}</span>
                </div>

                <div className="mb-5">
                  <span className="text-on-dark">\$</span>
                  <span className="text-on-dark ml-2">git push upsun main</span>
                </div>

                <div className="text-accent-light text-xs">Building application 'myapp'...</div>
                <div className="text-accent-light text-xs">Provisioning services...</div>

                <div className="flex items-center gap-1.5 mt-2">
                  <span className="text-green-400 text-xs">✓</span>
                  <span className="text-green-400 text-xs font-medium">Deployment complete</span>
                </div>

                <div className="text-on-dark-muted text-xs mt-1">[https://main-abc123.us-5.platformsh.site/](https://main-abc123.us-5.platformsh.site/)</div>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-3 gap-4 pt-6 border-t border-accent-soft">
            <div className="text-center">
              <div className="text-accent-light text-2xl font-bold mb-1">1</div>
              <div className="text-white text-sm font-medium">Configure</div>
              <div className="text-on-dark-muted text-xs mt-0.5">Define apps & services in YAML</div>
            </div>

            <div className="text-center">
              <div className="text-accent-light text-2xl font-bold mb-1">2</div>
              <div className="text-white text-sm font-medium">Commit</div>
              <div className="text-on-dark-muted text-xs mt-0.5">Add to version control</div>
            </div>

            <div className="text-center">
              <div className="text-accent-light text-2xl font-bold mb-1">3</div>
              <div className="text-white text-sm font-medium">Deploy</div>
              <div className="text-on-dark-muted text-xs mt-0.5">Push and go live</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    {/* ─── AI Use Cases ─── */}

    <div className="pb-20">
      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 tracking-subheading">Tutorials: AI Use Cases</h2>
      <p className="mb-8 text-muted">LLM based applications and workflows</p>

      <CardGroup cols={3}>
        <Card title="LangChain Chatbot" href="/tutorials/ai/langchain-chatbot" icon="message-circle">
          Build a conversational chatbot with Node.js and LangChain, deployed on Upsun
        </Card>

        <Card title="RAG Pipeline" href="/tutorials/ai/rag-pipeline" icon="database">
          Create a retrieval-augmented generation pipeline with Python and Qdrant for vector search
        </Card>

        <Card title="Coding Agent" href="/tutorials/ai/coding-agent" icon="code">
          Deploy a self-hosted coding agent using opencode on Upsun with proper workspace mounts
        </Card>

        <Card title="News Digest" href="/tutorials/ai/news-digest" icon="newspaper">
          Summarize daily news from free APIs using AI, output to a static page
        </Card>

        <Card title="Form Processing" href="/tutorials/ai/form-processing" icon="clipboard-list">
          Classify and extract fields from unstructured text like support tickets using AI
        </Card>

        <Card title="eCommerce Insights" href="/tutorials/ai/ecommerce-insights" icon="banknote">
          AI-powered business intelligence assistant that queries an ecommerce database using natural language
        </Card>
      </CardGroup>
    </div>

    {/* ─── Platform Features ─── */}

    <div className="pb-20">
      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 tracking-subheading">Platform Features</h2>
      <p className="mb-8 text-muted">Everything you need to build and scale.</p>

      <CardGroup cols={3}>
        <Card title="Clone environments instantly" icon="copy" href="/docs/environments">
          Work with full production-like environments, including data.
        </Card>

        <Card title="Deploy with Git" icon="git-branch" href="/docs/get-started/here/setup">
          Infrastructure, services, and code defined together.
        </Card>

        <Card title="Autoscale automatically" icon="trending-up" href="/docs/manage-resources/autoscaling">
          Handle traffic spikes without manual intervention.
        </Card>

        <Card title="Add services easily" icon="database" href="/docs/add-services">
          Databases, caches, queues, and more in a few lines of config.
        </Card>

        <Card title="Deploy with zero downtime" icon="rocket" href="/docs/core-concepts/build-deploy">
          Atomic deployments and instant rollbacks.
        </Card>

        <Card title="Debug with built-in observability" icon="activity" href="/docs/observability">
          Logs, metrics, traces, and profiling included.
        </Card>
      </CardGroup>
    </div>

    {/* ─── Community & Resources ─── */}

    <div className="pb-20">
      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 tracking-subheading">Community & Resources</h2>
      <p className="mb-8 text-muted">Connect, learn, and get inspired.</p>

      <CardGroup cols={3}>
        <Card title="Example Projects" href="https://github.com/orgs/upsun/repositories?q=topic%3Aupsun-example" icon="github">
          Browse example projects on GitHub with ready-to-deploy configurations
        </Card>

        <Card title="Community Forum" href="https://community.upsun.com" icon="messages-square">
          Get help, share projects, and connect with developers
        </Card>

        <Card title="Agency Partners" href="https://upsun.com/agency-hosting-partner/" icon="users">
          Build long-term partnerships and grow your agency
        </Card>
      </CardGroup>
    </div>

    {/* ─── Final CTA ─── */}

    <div className="rounded-2xl overflow-hidden p-14 text-center mb-8 bg-accent">
      <h2 className="text-3xl font-bold text-white mb-3 tracking-subheading">Ready to Deploy?</h2>

      <p className="text-white mb-8 max-w-md mx-auto">
        Get your application live in production.
      </p>

      <div className="flex gap-3 justify-center flex-wrap">
        <a href="/docs/get-started" className="inline-flex items-center px-7 py-3.5 bg-white text-accent-deep font-semibold rounded-full hover:bg-[#DFDAFF] transition-colors text-sm">
          Start Building →
        </a>

        <a href="https://console.upsun.com/projects/create-project" className="inline-flex items-center px-7 py-3.5 text-white font-medium rounded-full border-2 border-white hover:bg-white hover:text-[#6046ff] transition-all text-sm">
          Deploy Demo Project
        </a>
      </div>

      <div className="mt-8 flex gap-6 justify-center text-xs text-white">
        <span>✓ Git push to deploy</span>
        <span>✓ Zero-downtime deploys</span>
        <span>✓ Production-ready</span>
      </div>
    </div>
  </div>
</div>