> ## Documentation Index
> Fetch the complete documentation index at: https://tfh-takis-document-selfie-check-4.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

export const FeatureBlocks = ({items = []}) => {
  const icons = {
    "user": <svg width="100%" height="100%" viewBox="0 1827.71 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M15.9982 1843.28C14.3432 1843.28 12.9968 1841.94 12.9968 1840.28C12.9968 1838.63 14.3432 1837.28 15.9982 1837.28C17.6531 1837.28 18.9995 1838.63 18.9995 1840.28C18.9995 1841.94 17.6531 1843.28 15.9982 1843.28ZM15.9982 1838.62C15.0807 1838.62 14.3339 1839.36 14.3339 1840.28C14.3339 1841.2 15.0807 1841.95 15.9982 1841.95C16.9156 1841.95 17.6623 1841.2 17.6623 1840.28C17.6623 1839.36 16.9156 1838.62 15.9982 1838.62Z" fill="currentColor" />
        <path d="M21.9988 1849.28H9.99756V1848.61C9.99756 1846.47 11.7924 1844.72 13.9986 1844.72H17.9977C20.2039 1844.72 21.9988 1846.47 21.9988 1848.61V1849.28ZM11.4273 1847.94H20.5691C20.2615 1846.86 19.2258 1846.06 17.9977 1846.06H13.9986C12.7705 1846.06 11.7338 1846.86 11.4273 1847.94Z" fill="currentColor" />
      </svg>,
    "shield-check": <svg width="100%" height="100%" viewBox="421.031 1827.71 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M436.472 1845.05L434.248 1842.82L435.193 1841.88L436.472 1843.15L439.072 1840.55L440.017 1841.5L436.472 1845.05Z" fill="currentColor" />
        <path d="M437.029 1850.01L436.766 1849.89C436.559 1849.81 431.695 1847.67 431.695 1843.28V1837.64L432.122 1837.47C433.608 1836.89 435.213 1836.61 437.029 1836.61C438.846 1836.61 440.451 1836.89 441.936 1837.47L442.363 1837.64V1843.29C442.363 1847.67 437.499 1849.81 437.292 1849.89L437.029 1850.01V1850.01ZM433.032 1838.56V1843.29C433.032 1846.27 436.098 1848.06 437.029 1848.54C437.959 1848.06 441.026 1846.27 441.026 1843.29V1838.56C439.814 1838.15 438.502 1837.95 437.029 1837.95C435.556 1837.95 434.243 1838.15 433.032 1838.56Z" fill="currentColor" />
      </svg>,
    "eye": <svg width="100%" height="100%" viewBox="0 2189.71 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M15.9886 2210.64C13.8327 2210.64 11.9906 2209.74 10.6627 2208.03C9.67633 2206.77 9.32354 2205.51 9.30914 2205.45L9.25977 2205.27L9.31119 2205.09C9.32662 2205.04 9.69279 2203.78 10.6658 2202.52C11.9834 2200.81 13.7803 2199.91 15.8621 2199.91C17.9439 2199.91 19.9053 2200.81 21.2373 2202.51C22.2278 2203.78 22.5755 2205.05 22.5899 2205.1L22.6372 2205.28L22.5878 2205.46C22.5734 2205.51 22.2114 2206.77 21.2332 2208.03C19.9125 2209.74 18.0981 2210.64 15.9876 2210.64L15.9886 2210.64ZM10.6555 2205.28C10.9343 2206.09 12.2693 2209.3 15.9886 2209.3C19.7078 2209.3 20.9606 2206.08 21.2435 2205.27C20.9689 2204.46 19.6431 2201.25 15.8621 2201.25C12.2992 2201.25 10.9425 2204.46 10.6555 2205.28V2205.28Z" fill="currentColor" />
        <path d="M15.9978 2207.97C14.5146 2207.97 13.3071 2206.77 13.3071 2205.28C13.3071 2203.8 14.5146 2202.59 15.9978 2202.59C17.481 2202.59 18.6885 2203.8 18.6885 2205.28C18.6885 2206.77 17.481 2207.97 15.9978 2207.97ZM15.9978 2203.93C15.2511 2203.93 14.6442 2204.54 14.6442 2205.28C14.6442 2206.03 15.2511 2206.64 15.9978 2206.64C16.7446 2206.64 17.3514 2206.03 17.3514 2205.28C17.3514 2204.54 16.7446 2203.93 15.9978 2203.93Z" fill="currentColor" />
      </svg>,
    "community": <svg width="100%" height="100%" viewBox="419.888 2189.71 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M438.219 2206.28C436.971 2206.28 435.954 2205.27 435.954 2204.02C435.954 2202.77 436.971 2201.75 438.219 2201.75C439.468 2201.75 440.484 2202.77 440.484 2204.02C440.484 2205.27 439.468 2206.28 438.219 2206.28ZM438.219 2203.09C437.707 2203.09 437.291 2203.51 437.291 2204.02C437.291 2204.53 437.708 2204.95 438.219 2204.95C438.73 2204.95 439.147 2204.53 439.147 2204.02C439.147 2203.51 438.73 2203.09 438.219 2203.09Z" fill="currentColor" />
        <path d="M433.563 2203.9C432.314 2203.9 431.298 2202.88 431.298 2201.63C431.298 2200.38 432.314 2199.37 433.563 2199.37C434.812 2199.37 435.828 2200.38 435.828 2201.63C435.828 2202.88 434.812 2203.9 433.563 2203.9ZM433.563 2200.7C433.051 2200.7 432.635 2201.12 432.635 2201.63C432.635 2202.14 433.052 2202.56 433.563 2202.56C434.074 2202.56 434.491 2202.14 434.491 2201.63C434.491 2201.12 434.074 2200.7 433.563 2200.7Z" fill="currentColor" />
        <path d="M442.553 2210.62H433.885V2209.95C433.885 2208.29 435.213 2206.95 436.845 2206.95H439.594C441.227 2206.95 442.554 2208.29 442.554 2209.95V2210.62H442.553ZM435.359 2209.28H441.08C440.828 2208.69 440.257 2208.28 439.593 2208.28H436.844C436.18 2208.28 435.61 2208.69 435.358 2209.28H435.359Z" fill="currentColor" />
        <path d="M433.22 2208.3L429.221 2208.3V2207.63C429.221 2205.97 430.614 2204.61 432.325 2204.61L435.219 2204.62L435.217 2205.96L432.324 2205.95C431.586 2205.95 430.966 2206.36 430.699 2206.96L433.221 2206.96V2208.3L433.22 2208.3Z" fill="currentColor" />
      </svg>,
    "shield": <svg width="100%" height="100%" viewBox="0 2469.71 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M15.9982 2492.29L15.7349 2492.18C15.5281 2492.09 10.6641 2489.95 10.6641 2485.57V2479.92L11.0909 2479.75C12.5772 2479.18 14.1817 2478.9 15.9982 2478.9C17.8146 2478.9 19.4202 2479.18 20.9054 2479.75L21.3323 2479.92V2485.57C21.3323 2489.95 16.4682 2492.09 16.2615 2492.18L15.9982 2492.29V2492.29ZM12.0012 2480.85V2485.57C12.0012 2488.55 15.0683 2490.35 15.9982 2490.82C16.928 2490.35 19.9952 2488.55 19.9952 2485.57V2480.85C18.7835 2480.44 17.471 2480.23 15.9982 2480.23C14.5253 2480.23 13.2118 2480.44 12.0012 2480.85Z" fill="currentColor" />
      </svg>
  };
  return <div className="not-prose mt-8 grid gap-x-12 gap-y-14 md:grid-cols-2">
      {items.map(item => <div key={item.title}>
          <span className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-[#EDECE9] text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
            {icons[item.icon] || null}
          </span>
          <h3 className="mt-8 mb-0 text-2xl leading-snug font-medium text-zinc-900 dark:text-zinc-100">{item.title}</h3>
          <p className="mt-3 mb-0 max-w-[420px] text-base leading-normal text-zinc-800 dark:text-zinc-300">{item.body}</p>
        </div>)}
    </div>;
};

export const Quickstart = ({title = "Developer quickstart", description = "Make your first API request in minutes. Learn the basics of the platform.", buttonHref = "/docs/get-started", buttonLabel = "Get started", agentPrompt, children}) => {
  const promptCfg = agentPrompt ? {
    skillUrl: agentPrompt.skillUrl || "world.id/SKILL.md",
    productName: agentPrompt.productName || "World ID"
  } : null;
  const promptText = promptCfg ? `Read ${promptCfg.skillUrl} and add ${promptCfg.productName} to my app` : null;
  const copyIcon = <svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
      <path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
    </svg>;
  const onCopy = text => e => {
    try {
      navigator.clipboard.writeText(text);
      const btn = e.currentTarget;
      const icon = btn.querySelector("[data-copy-icon]");
      const tick = btn.querySelector("[data-copy-tick]");
      if (icon && tick) {
        icon.style.display = "none";
        tick.style.display = "inline-flex";
        setTimeout(() => {
          icon.style.display = "inline-flex";
          tick.style.display = "none";
        }, 1200);
      }
    } catch (_) {}
  };
  return <div className="not-prose rounded-3xl border border-[#E1DFDA] bg-white p-6 md:p-8 dark:border-zinc-800 dark:bg-zinc-900">
      <div>
        <h3 className="m-0 text-2xl leading-tight font-semibold text-zinc-900 dark:text-zinc-100">
          {title}
        </h3>
        <p className="mt-3 text-[16px] leading-7 text-zinc-800 dark:text-zinc-200">
          {description}
        </p>
        <div className="quickstart-code mt-6 min-w-0">{children}</div>
      </div>

      {promptText ? <div className="mt-6">
          <div className="my-4 flex items-center gap-3">
            <div className="h-px flex-1 bg-zinc-200 dark:bg-white/10"></div>
            <span className="font-mono text-xs text-zinc-500 dark:text-zinc-400">OR</span>
            <div className="h-px flex-1 bg-zinc-200 dark:bg-white/10"></div>
          </div>
          <p className="m-0 mb-2 text-[16px] text-zinc-800 dark:text-zinc-200">
            Tell your coding agent to:
          </p>
          <div className="group relative overflow-hidden rounded-xl border border-zinc-200 dark:border-white/10" style={{
    backgroundColor: "#FAFAFA"
  }}>
            <div className="dark-bg pointer-events-none absolute inset-0 hidden dark:block" style={{
    backgroundColor: "#0B0C0E"
  }} />
            <pre className="relative m-0 overflow-x-auto bg-transparent px-4 py-3 font-mono text-sm leading-6" style={{
    color: "#1F2328"
  }}>
              <code className="bg-transparent p-0 text-inherit dark:!text-[#D4D4D4]">
                <span>Read </span>
                <a href={`https://${promptCfg.skillUrl}`} target="_blank" rel="noopener noreferrer" className="text-inherit underline decoration-zinc-400 underline-offset-2 hover:decoration-zinc-700 dark:decoration-zinc-500 dark:hover:decoration-zinc-200">
                  {promptCfg.skillUrl}
                </a>
                <span>{` and add ${promptCfg.productName} to my app`}</span>
              </code>
            </pre>
            <button type="button" aria-label="Copy" onClick={onCopy(promptText)} className="absolute right-2 top-2 inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-zinc-500 transition-colors hover:bg-gray-600/5 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-gray-200/5 dark:hover:text-zinc-200">
              <span data-copy-icon className="inline-flex">{copyIcon}</span>
              <span data-copy-tick style={{
    display: "none"
  }} className="text-emerald-600 dark:text-emerald-400">✓</span>
            </button>
          </div>
        </div> : null}

      <div className="mt-6 md:mt-4">
        <a href={buttonHref} className="inline-flex items-center justify-center rounded-full border border-transparent bg-zinc-950 px-6 py-3 text-[16px] font-medium !text-white no-underline transition-colors hover:bg-black dark:border-zinc-700 dark:bg-zinc-800 dark:!text-zinc-100 dark:hover:bg-zinc-700">
          {buttonLabel}
        </a>
      </div>
    </div>;
};

## World ID

World ID is a privacy-preserving protocol that lets people prove they are real and unique online without sharing personal information.

It gives developers a high-assurance trust layer to stop bots, duplicate accounts, and abuse — while keeping onboarding fast and user data off your servers.

Through credentials like Proof of Human, Document, and Selfie Check, World ID extends that trust layer with additional proofs without exposing underlying user data.

<Quickstart title="Developer Quickstart" description="Add proof of human to your app with one React widget." buttonHref="/world-id/idkit/integrate" buttonLabel="Open integration guide" agentPrompt={{ skillUrl: "world.id/SKILL.md", productName: "World ID" }}>
  ```tsx theme={"system"}
  import { IDKitRequestWidget } from "@worldcoin/idkit";
  const rpContext = await getRpContext("verify-account");
  <IDKitRequestWidget
    app_id="app_xxxxx"
    action="verify-account"
    rp_context={rpContext}
    // verify proof + nullifier on your backend
    handleVerify={verifyOnBackend}
    onSuccess={unlockFeature}
  />
  ```
</Quickstart>

## Credentials

<div className="not-prose mt-5">
  <div className="grid gap-10 md:grid-cols-3">
    <a href="/world-id/credentials/1" className="block no-underline transition-transform duration-200 hover:-translate-y-0.5">
      <img noZoom src="https://mintcdn.com/tfh-takis-document-selfie-check-4/VoWPbBxNbYeH5OiZ/images/docs/credential-card-human.png?fit=max&auto=format&n=VoWPbBxNbYeH5OiZ&q=85&s=af347a5037aa7fd0f51adb43df92c5b7" alt="Proof of Human credential card" className="w-full h-auto" width="690" height="440" data-path="images/docs/credential-card-human.png" />

      <h3 className="mt-5 mb-0 text-xl font-medium text-zinc-900 dark:text-zinc-100">Proof of Human</h3>
      <p className="mt-2 text-base text-zinc-800 dark:text-zinc-300">Highest-assurance uniqueness signal from Orb verification. Best for one-person-one-action flows and strong Sybil resistance.</p>
    </a>

    <a href="/world-id/credentials/9303" className="block no-underline transition-transform duration-200 hover:-translate-y-0.5">
      <img noZoom src="https://mintcdn.com/tfh-takis-document-selfie-check-4/VoWPbBxNbYeH5OiZ/images/docs/credential-card-document.png?fit=max&auto=format&n=VoWPbBxNbYeH5OiZ&q=85&s=0e41f2db49681bb3e2bf69ba191f7361" alt="Document credential card" className="w-full h-auto" width="690" height="439" data-path="images/docs/credential-card-document.png" />

      <h3 className="mt-5 mb-0 text-xl font-medium text-zinc-900 dark:text-zinc-100">Document</h3>
      <p className="mt-2 text-base text-zinc-800 dark:text-zinc-300">Proves possession of a unique government document through NFC checks. Useful for proof of age and document-backed access flows.</p>
    </a>

    <a href="/world-id/credentials/11" className="block no-underline transition-transform duration-200 hover:-translate-y-0.5">
      <img noZoom src="https://mintcdn.com/tfh-takis-document-selfie-check-4/VoWPbBxNbYeH5OiZ/images/docs/credential-card-face.png?fit=max&auto=format&n=VoWPbBxNbYeH5OiZ&q=85&s=ada5d957c819b5ffe0abba02b0f7479e" alt="Selfie Check credential card" className="w-full h-auto" width="690" height="440" data-path="images/docs/credential-card-face.png" />

      <h3 className="mt-5 mb-0 flex items-center gap-2 text-xl font-medium text-zinc-900 dark:text-zinc-100">Selfie Check</h3>
      <p className="mt-2 text-base text-zinc-800 dark:text-zinc-300">Low-friction liveness and uniqueness signal from a selfie flow. Best for sign-up and bot defense where speed matters most.</p>
    </a>
  </div>
</div>

## Start building

<FeatureBlocks
  items={[
{
  icon: "user",
  title: "Stop bots and duplicate accounts",
  body: "Use proof of human to enforce one human per account and reduce Sybil abuse in rewards, referrals, governance, and account creation.",
},
{
  icon: "shield-check",
  title: "Protect conversion and user privacy",
  body: "Replace CAPTCHA-heavy or document-heavy gating with reusable proof flows. Relying parties receive proofs, not personal data.",
},
]}
/>

## Privacy by architecture

<FeatureBlocks
  items={[
{
  icon: "eye",
  title: "Zero-knowledge proofs",
  body: "Users prove what is true without revealing personal information. Proofs are unlinkable across apps.",
},
{
  icon: "community",
  title: "Multi-party computation",
  body: "Matching and uniqueness checks are split across independent nodes so no single party holds complete sensitive data.",
},
{
  icon: "shield",
  title: "Self-custodial",
  body: "Proof generation happens on the user’s device. Your app receives a proof, not raw personal data.",
},
]}
/>
