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

# Integrar com IA

> Escolha como levar a documentação técnica da Delfinance para o seu fluxo.

<div className="min-h-screen bg-white px-4 py-6 sm:px-6 lg:px-12">
  <div className="space-y-7">
    <section className="relative overflow-hidden rounded-2xl border border-[#1A941A]/20 bg-[#1A941A]/5 p-7 md:p-10">
      {/* grid de fundo */}

      <div className="absolute inset-0 opacity-40 pointer-events-none bg-[linear-gradient(to_right,rgba(26,148,26,0.22)_1px,transparent_1px),linear-gradient(to_bottom,rgba(26,148,26,0.22)_1px,transparent_1px)] bg-[size:24px_24px]" />

      {/* glow suave */}

      <div className="absolute right-0 top-0 h-full w-1/2 bg-[radial-gradient(circle_at_center,rgba(26,148,26,0.18),transparent_65%)] pointer-events-none" />

      <div className="relative grid grid-cols-1 lg:grid-cols-[1fr_0.85fr] gap-10 items-center">
        {/* Conteúdo esquerdo */}

        <div>
          <span className="mb-5 inline-flex items-center gap-2 rounded-full border border-[#1A941A]/30 bg-[#1A941A]/10 px-4 py-2 text-xs font-bold text-[#1A941A]">
            🤖 Hub de IA
          </span>

          <h1 className="mb-5 max-w-3xl text-4xl md:text-6xl font-extrabold tracking-tight leading-[1.05] text-gray-950">
            Documentação pensada para <span className="text-[#1A941A]">IA</span>
          </h1>

          <p className="max-w-2xl text-base md:text-lg leading-8 text-gray-600">
            Use a documentação da Delfinance no seu assistente favorito para gerar código,
            entender endpoints e acelerar sua integração com mais segurança.
          </p>

          <div className="mt-8 flex flex-col sm:flex-row gap-3">
            <label htmlFor="assistant-modal-toggle" className="inline-flex h-12 cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#1A941A] px-5 text-sm font-bold text-white no-underline hover:bg-[#147814] transition-colors">
              Gerar prompt guiado
              <span className="text-lg leading-none">›</span>
            </label>

            <label htmlFor="llms-modal-toggle" className="inline-flex h-12 cursor-pointer items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white px-5 text-sm font-bold text-gray-950 no-underline hover:bg-gray-50 transition-colors">
              ↓ Baixar contexto para IA
            </label>
          </div>
        </div>

        {/* Preview direito */}

        <div className="hidden lg:block relative">
          {/* cards flutuantes */}

          <div className="absolute -left-10 top-28 z-10 flex h-16 w-16 items-center justify-center rounded-2xl border border-[#1A941A]/20 bg-white shadow-lg text-2xl">
            🤖
          </div>

          <div className="absolute -right-5 top-10 z-10 flex h-16 w-16 items-center justify-center rounded-2xl border border-[#1A941A]/20 bg-white shadow-lg text-2xl text-[#1A941A]">
            AI
          </div>

          <div className="absolute -right-8 bottom-12 z-10 flex h-16 w-16 items-center justify-center rounded-2xl border border-[#1A941A]/20 bg-white shadow-lg text-2xl">
            {"</>"}
          </div>

          <div className="rounded-2xl border border-gray-200 bg-white p-4 shadow-xl shadow-[#1A941A]/10">
            <div className="mb-4 flex items-center justify-between">
              <div className="flex items-center gap-2 text-sm font-bold text-gray-950">
                <span className="text-gray-500">▤</span>
                prompt.md
              </div>

              <div className="flex items-center gap-2">
                <span className="h-2.5 w-2.5 rounded-full bg-[#1A941A]" />

                <span className="h-2.5 w-2.5 rounded-full bg-gray-300" />

                <span className="h-2.5 w-2.5 rounded-full bg-gray-300" />
              </div>
            </div>

            <div className="rounded-xl bg-gray-950 p-5 font-mono text-sm leading-7 text-gray-100 shadow-inner">
              <div>
                <span className="text-gray-500">1</span>
                <span className="ml-4 text-[#6EE76E]"># Integração Delfinance</span>
              </div>

              <div className="mt-3">
                <span className="text-gray-500">2</span>
                <span className="ml-4 text-[#6EE76E]">## Objetivo</span>
              </div>

              <div>
                <span className="text-gray-500">3</span>

                <span className="ml-4 text-gray-200">
                  Você é um assistente especializado
                </span>
              </div>

              <div>
                <span className="text-gray-500">4</span>

                <span className="ml-4 text-gray-200">
                  na API da Delfinance.
                </span>
              </div>

              <div className="mt-3">
                <span className="text-gray-500">5</span>
                <span className="ml-4 text-[#6EE76E]">## Contexto</span>
              </div>

              <div>
                <span className="text-gray-500">6</span>

                <span className="ml-4 text-gray-200">
                  API: Delfinance v1
                </span>
              </div>

              <div>
                <span className="text-gray-500">7</span>

                <span className="ml-4 text-gray-200">
                  Authentication: x-delbank-api-key
                </span>
              </div>

              <div>
                <span className="text-gray-500">8</span>

                <span className="ml-4 text-gray-200">
                  Recursos: Pix, webhooks e consultas
                </span>
              </div>

              <div className="mt-3">
                <span className="text-gray-500">9</span>
                <span className="ml-4 text-[#6EE76E]">## Instruções</span>
              </div>

              <div>
                <span className="text-gray-500">10</span>

                <span className="ml-4 text-gray-200">
                  Gere exemplos práticos e seguros.
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
      <div className="relative h-full">
        <input id="llms-modal-toggle" type="checkbox" className="peer hidden" />

        <label htmlFor="llms-modal-toggle" className="group flex flex-col h-full cursor-pointer rounded-2xl border border-gray-200 bg-white p-6 md:p-7 no-underline hover:border-gray-300 hover:shadow-lg transition-all overflow-hidden relative">
          <div className="absolute inset-0 opacity-30 pointer-events-none bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:24px_24px]" />

          <div className="relative flex flex-col gap-3 h-full">
            <div className="flex items-center gap-3">
              <img src="https://mintcdn.com/delfinance/6c4zggVo6CPdlBpC/icons/context.png?fit=max&auto=format&n=6c4zggVo6CPdlBpC&q=85&s=5b70ddaeac6f542bd2a5a3893f2dcfd2" className="w-8 h-8 object-contain shrink-0" alt="" width="64" height="64" data-path="icons/context.png" />

              <h2 className="text-xl font-bold tracking-tight text-gray-950">
                Baixar contexto para IA
              </h2>
            </div>

            <p className="flex-1 text-sm leading-6 text-gray-500">
              Leve a documentação da Delfinance em um formato pronto para usar
              no ChatGPT, Claude, Cursor ou Copilot, com APIs, exemplos e boas práticas.
            </p>

            <div className="mt-7 flex items-center gap-2 text-sm font-bold text-[#1A941A]">
              Continuar <span>›</span>
            </div>
          </div>
        </label>

        <div className="fixed inset-0 z-[9999] hidden peer-checked:flex items-center justify-center px-4">
          <label htmlFor="llms-modal-toggle" className="absolute inset-0 bg-gray-950/50 cursor-pointer" />

          <div className="relative z-10 w-full max-w-xl overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl">
            <div className="absolute inset-0 opacity-30 pointer-events-none bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:24px_24px]" />

            <div className="relative p-6 md:p-7">
              <div className="mb-5 flex items-start justify-between gap-4">
                <div className="flex items-center gap-3">
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-[#1A941A]/20 bg-[#1A941A]/10 text-xl">
                    ↓
                  </div>

                  <div>
                    <h3 className="text-xl font-extrabold tracking-tight text-gray-950">
                      Contexto para IA
                    </h3>

                    <p className="mt-1 text-sm text-gray-500">
                      Use este arquivo no seu assistente favorito.
                    </p>
                  </div>
                </div>

                <label htmlFor="llms-modal-toggle" className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-500 hover:bg-gray-50" aria-label="Fechar modal">
                  ×
                </label>
              </div>

              <p className="mb-4 text-sm leading-6 text-gray-500">
                Escolha o arquivo conforme o seu caso de uso e importe no ChatGPT, Claude, Cursor ou Copilot.
              </p>

              <div className="rounded-xl border border-gray-200 overflow-hidden divide-y divide-gray-200">
                <div className="flex items-center gap-4 p-4">
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <span className="font-mono text-sm font-bold text-gray-950">llms.txt</span>
                      <span className="rounded-full border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs font-medium text-gray-500">Resumido</span>
                    </div>

                    <p className="text-sm text-gray-500">Índice de links para todas as páginas da documentação. Ideal para assistentes que navegam a docs em tempo real.</p>
                  </div>

                  <a href="/llms.txt" target="_blank" rel="noopener noreferrer" className="shrink-0 inline-flex h-9 items-center justify-center rounded-lg border border-gray-200 bg-white px-4 text-sm font-bold text-gray-950 no-underline hover:bg-gray-50 transition-colors">
                    Abrir ↗
                  </a>
                </div>

                <div className="flex items-center gap-4 p-4">
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <span className="font-mono text-sm font-bold text-gray-950">llms-full.txt</span>
                      <span className="rounded-full border border-[#1A941A]/30 bg-[#1A941A]/10 px-2 py-0.5 text-xs font-medium text-[#1A941A]">Completo</span>
                    </div>

                    <p className="text-sm text-gray-500">Toda a API reference em texto puro, com endpoints, parâmetros e exemplos. Cole direto no chat ou use como contexto de projeto.</p>
                  </div>

                  <a href="/llms-full.txt" target="_blank" rel="noopener noreferrer" className="shrink-0 inline-flex h-9 items-center justify-center rounded-lg bg-[#1A941A] px-4 text-sm font-bold text-white no-underline hover:bg-[#147814] transition-colors">
                    Abrir ↗
                  </a>
                </div>
              </div>

              <div className="mt-5 flex justify-end">
                <label htmlFor="llms-modal-toggle" className="inline-flex h-9 cursor-pointer items-center justify-center rounded-lg border border-gray-200 bg-white px-4 text-sm font-bold text-gray-950 hover:bg-gray-50 transition-colors">
                  Fechar
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="relative h-full">
        <input id="assistant-modal-toggle" type="checkbox" className="peer hidden" />

        <label htmlFor="assistant-modal-toggle" className="group flex flex-col h-full cursor-pointer rounded-2xl border border-gray-200 bg-white p-6 md:p-7 no-underline hover:border-gray-300 hover:shadow-lg transition-all overflow-hidden relative">
          <div className="absolute inset-0 opacity-30 pointer-events-none bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:24px_24px]" />

          <div className="relative flex flex-col gap-3 h-full">
            <div className="flex items-center gap-3">
              <img src="https://mintcdn.com/delfinance/6c4zggVo6CPdlBpC/icons/prompt.png?fit=max&auto=format&n=6c4zggVo6CPdlBpC&q=85&s=96ced8710896374ae3ad0999dca37530" className="w-8 h-8 object-contain shrink-0" alt="" width="512" height="512" data-path="icons/prompt.png" />

              <h2 className="text-xl font-bold tracking-tight text-gray-950">
                Montar prompt de integração
              </h2>
            </div>

            <p className="flex-1 text-sm leading-6 text-gray-500">
              Converse com um assistente guiado, informe seu objetivo, sua stack e gere
              um prompt pronto para usar com IA.
            </p>

            <div className="mt-7 flex items-center gap-2 text-sm font-bold text-[#1A941A]">
              Abrir assistente <span>›</span>
            </div>
          </div>
        </label>

        <div className="fixed inset-0 z-[9999] hidden peer-checked:flex items-center justify-center px-4 py-6">
          <label htmlFor="assistant-modal-toggle" className="absolute inset-0 bg-gray-950/50 cursor-pointer" />

          <div className="relative z-10 flex max-h-[88vh] w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl">
            <div className="absolute inset-0 opacity-30 pointer-events-none bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:24px_24px]" />

            <div className="relative flex items-start justify-between gap-4 border-b border-gray-200 bg-white/90 px-6 py-5 backdrop-blur">
              <div className="flex items-center gap-3">
                <div>
                  <h3 className="text-xl font-extrabold tracking-tight text-gray-950">
                    Assistente de Integração
                  </h3>

                  <p className="mt-1 text-sm text-gray-500">
                    Monte um plano de integração e um prompt personalizado para IA.
                  </p>
                </div>
              </div>

              <label htmlFor="assistant-modal-toggle" className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-500 hover:bg-gray-50" aria-label="Fechar modal">
                ×
              </label>
            </div>

            <div className="relative overflow-y-auto p-6 md:p-7">
              <div className="space-y-5">
                <div className="rounded-2xl border border-gray-200 bg-gray-50 p-5">
                  <div className="mb-3 flex items-center gap-3">
                    <div className="flex h-9 w-9 items-center justify-center rounded-full bg-white border border-gray-200 text-sm font-bold text-[#1A941A]">
                      D
                    </div>

                    <div>
                      <p className="text-sm font-bold text-gray-950">
                        Como o assistente funciona?
                      </p>

                      <p className="text-xs text-gray-500">
                        Ele faz algumas perguntas e gera um plano recomendado.
                      </p>
                    </div>
                  </div>

                  <div className="space-y-3 text-sm leading-6 text-gray-600">
                    <p>
                      O assistente coleta informações sobre o que você quer integrar,
                      onde a integração será usada, qual tecnologia seu backend utiliza
                      e se você já possui uma API Key sandbox.
                    </p>

                    <p>
                      Com base nessas respostas, ele monta um caminho de integração
                      recomendado e um prompt pronto para usar no ChatGPT, Claude, Cursor
                      ou Copilot.
                    </p>
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <div className="rounded-xl border border-gray-200 bg-white p-4">
                    <span className="mb-2 block text-xs font-bold uppercase tracking-wide text-[#1A941A]">
                      Etapa 1
                    </span>

                    <h4 className="mb-1 text-sm font-bold text-gray-950">
                      Escolha o objetivo
                    </h4>

                    <p className="text-sm leading-6 text-gray-500">
                      Pix QR Code, webhooks, consulta de cobranças ou produção.
                    </p>
                  </div>

                  <div className="rounded-xl border border-gray-200 bg-white p-4">
                    <span className="mb-2 block text-xs font-bold uppercase tracking-wide text-[#1A941A]">
                      Etapa 2
                    </span>

                    <h4 className="mb-1 text-sm font-bold text-gray-950">
                      Informe o contexto
                    </h4>

                    <p className="text-sm leading-6 text-gray-500">
                      E-commerce, ERP, gateway, SaaS ou sistema interno.
                    </p>
                  </div>

                  <div className="rounded-xl border border-gray-200 bg-white p-4">
                    <span className="mb-2 block text-xs font-bold uppercase tracking-wide text-[#1A941A]">
                      Etapa 3
                    </span>

                    <h4 className="mb-1 text-sm font-bold text-gray-950">
                      Selecione sua stack
                    </h4>

                    <p className="text-sm leading-6 text-gray-500">
                      Node.js, C#, PHP, Python, Java ou outra tecnologia.
                    </p>
                  </div>

                  <div className="rounded-xl border border-gray-200 bg-white p-4">
                    <span className="mb-2 block text-xs font-bold uppercase tracking-wide text-[#1A941A]">
                      Etapa 4
                    </span>

                    <h4 className="mb-1 text-sm font-bold text-gray-950">
                      Receba o prompt
                    </h4>

                    <p className="text-sm leading-6 text-gray-500">
                      Copie o prompt gerado e use no seu assistente de IA.
                    </p>
                  </div>
                </div>

                <div className="rounded-2xl border border-[#1A941A]/10 bg-[#1A941A]/5 p-5">
                  <h4 className="mb-2 text-sm font-bold text-gray-950">
                    O que o prompt inclui?
                  </h4>

                  <ul className="space-y-2 text-sm leading-6 text-gray-600">
                    <li>• Autenticação com API Key</li>
                    <li>• Ambiente sandbox</li>
                    <li>• Fluxo de Pix, QR Code ou webhooks</li>
                    <li>• Tratamento de status e erros</li>
                    <li>• Idempotência e boas práticas</li>
                    <li>• Checklist para homologação</li>
                    <li>• Exemplo de código conforme sua stack</li>
                  </ul>
                </div>
              </div>

              <div className="mt-7 flex flex-col sm:flex-row gap-3">
                <a href="/guias/assistente-integracao" target="_blank" rel="noopener noreferrer" className="inline-flex h-11 items-center justify-center rounded-xl bg-[#1A941A] px-5 text-sm font-bold text-white no-underline hover:bg-[#147814] transition-colors">
                  Abrir assistente completo
                </a>

                <label htmlFor="assistant-modal-toggle" className="inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border border-gray-200 bg-white px-5 text-sm font-bold text-gray-950 hover:bg-gray-50 transition-colors">
                  Voltar
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>