# Get Started

Source: https://docs.morpho.org/get-started



{/* Main container with 20px top margin */}

<div style="{ marginTop: '20px'}">
  {/* Title + Subtitle Frame */}

  <div
    className="rounded-[20px]"
    style="{
    position: 'relative',
    overflow: 'hidden',
    padding: '32px 28px 28px',
    marginBottom: '12px',
    minHeight: '148px',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundImage: 'linear-gradient(90deg, rgba(5, 16, 34, 0.54) 0%, rgba(5, 16, 34, 0.26) 100%), url(&#x22;/img/get-started/home/background-without.png&#x22;)',
    backgroundSize: '100% 100%',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    boxShadow: '0 14px 36px rgba(5, 16, 34, 0.10)',
  }"
  >
    <h1
      style="{
    color: '#FFFFFF',
    fontFamily: 'FKGrotesk, Helvetica, Inter, -apple-system, BlinkMacSystemFont, &#x22;Segoe UI&#x22;, Roboto, sans-serif',
    fontSize: 'clamp(28px, 4.4vw, 40px)',
    fontStyle: 'normal',
    fontWeight: '300',
    letterSpacing: '-0.04em',
    lineHeight: '1.02',
    textAlign: 'center',
    textWrap: 'balance',
    textShadow: '0 2px 18px rgba(5, 16, 34, 0.34)',
    marginTop: '0',
    marginBottom: '0',
    maxWidth: '760px',
  }"
    >
      Connect to the open credit network for the world
    </h1>
  </div>

  {/* Morpho Agents – Horizontal Card */}

  <a href="/developers/agents/get-started/" aria-label="Morpho Agents documentation" className="border-[0.5px] border-[#E5E7EB] rounded-[20px] hover:bg-[#C4DAFF] hover:border-[#C4DAFF] transition-all duration-200 mb-3 flex flex-row items-center gap-6 px-7 py-6 no-underline text-inherit">
    <div className="flex-1 prose-no-margin">
      <h3 className="mb-1.5 text-lg font-light">
        Use Morpho with your AI agent
      </h3>

      <p className="text-sm font-light text-[#91979E]">
        Install the Morpho skill and MCP server to query vaults, markets, and positions and prepare unsigned transactions from Claude Code, Codex, or Cursor.
      </p>
    </div>

    <div className="shrink-0 rounded-[70px] bg-[#5792FE] px-[17px] py-2.5 font-light text-white">
      →
    </div>
  </a>

  {/* Use cases */}

  <h1 className="mt-6 mb-3 text-2xl font-light">
    Use cases
  </h1>

  <div className="mb-3 flex flex-col gap-3 sm:flex-row">
    {/* For app builders */}

    <div className="flex-1 rounded-[20px] border-[0.5px] border-[#E5E7EB] px-6 py-5 prose-no-margin">
      <h3 className="mb-3 text-lg font-light">
        For app builders
      </h3>

      <div className="flex flex-col gap-2">
        <a href="/developers/earn/get-started/" className="text-sm font-light text-[#5792FE] no-underline hover:underline">
          Integrate Earn
        </a>

        <a href="/developers/borrow/get-started/" className="text-sm font-light text-[#5792FE] no-underline hover:underline">
          Integrate Borrow
        </a>
      </div>
    </div>

    {/* For vault curators */}

    <div className="flex-1 rounded-[20px] border-[0.5px] border-[#E5E7EB] px-6 py-5 prose-no-margin">
      <h3 className="mb-3 text-lg font-light">
        For vault curators
      </h3>

      <div className="flex flex-col gap-2">
        <a href="/curate/tutorials-v2/vault-creation/" className="text-sm font-light text-[#5792FE] no-underline hover:underline">
          Create a vault
        </a>

        <a href="/curate/tutorials-v2/roles/" className="text-sm font-light text-[#5792FE] no-underline hover:underline">
          Setup vault roles
        </a>
      </div>
    </div>

    {/* For protocol developers */}

    <div className="flex-1 rounded-[20px] border-[0.5px] border-[#E5E7EB] px-6 py-5 prose-no-margin">
      <h3 className="mb-3 text-lg font-light">
        For protocol developers
      </h3>

      <div className="flex flex-col gap-2">
        <a href="/developers/contracts/" className="text-sm font-light text-[#5792FE] no-underline hover:underline">
          Explore contracts
        </a>
      </div>
    </div>
  </div>

  {/* Integration methods */}

  <h1 className="mt-6 mb-3 text-2xl font-light">
    Integration methods
  </h1>

  <div className="mb-3 flex flex-col gap-3 sm:flex-row">
    {/* API */}

    <a href="/developers/api/get-started/" aria-label="Morpho API documentation" className="flex flex-1 flex-row items-center gap-5 rounded-[20px] border-[0.5px] border-[#E5E7EB] px-7 py-5 no-underline text-inherit transition-all duration-200 hover:bg-[#C4DAFF] hover:border-[#C4DAFF]">
      <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-[#EAF0FF] text-[#5792FE]">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
          <line x1="4" y1="7" x2="20" y2="7" />

          <line x1="4" y1="12" x2="20" y2="12" />

          <line x1="4" y1="17" x2="14" y2="17" />
        </svg>
      </div>

      <div className="flex-1 prose-no-margin">
        <h3 className="mb-1 text-lg font-light">
          API
        </h3>

        <p className="text-sm font-light text-[#91979E]">
          Query markets, vaults, and positions over GraphQL and REST.
        </p>
      </div>

      <span className="shrink-0 text-lg font-light text-[#5792FE]">
        →
      </span>
    </a>

    {/* Typescript SDK */}

    <a href="/developers/sdks/get-started/" aria-label="TypeScript SDK documentation" className="flex flex-1 flex-row items-center gap-5 rounded-[20px] border-[0.5px] border-[#E5E7EB] px-7 py-5 no-underline text-inherit transition-all duration-200 hover:bg-[#C4DAFF] hover:border-[#C4DAFF]">
      <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-[#EAF0FF] text-[#5792FE]">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="16 18 22 12 16 6" />

          <polyline points="8 6 2 12 8 18" />
        </svg>
      </div>

      <div className="flex-1 prose-no-margin">
        <h3 className="mb-1 text-lg font-light">
          Typescript SDK
        </h3>

        <p className="text-sm font-light text-[#91979E]">
          Typed, viem-based libraries for reading data and building transactions.
        </p>
      </div>

      <span className="shrink-0 text-lg font-light text-[#5792FE]">
        →
      </span>
    </a>
  </div>
</div>