From 339f7028105fdca80296974aeafa7beee59f1f11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebasti=C3=A1n=20Ram=C3=ADrez?= <tiangolo@gmail.com>
Date: Wed, 18 Feb 2026 07:26:13 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Add=20Kapa.ai=20widget=20(AI=20c?=
 =?UTF-8?q?hatbot)=20(#14938)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alejandra <alejsdev@gmail.com>
---
 docs/en/docs/css/custom.css         |  4 ++++
 docs/en/docs/js/init_kapa_widget.js | 29 +++++++++++++++++++++++++++++
 docs/en/mkdocs.yml                  |  1 +
 3 files changed, 34 insertions(+)
 create mode 100644 docs/en/docs/js/init_kapa_widget.js

diff --git a/docs/en/docs/css/custom.css b/docs/en/docs/css/custom.css
index 7c50dbd9b..dc9c7d63b 100644
--- a/docs/en/docs/css/custom.css
+++ b/docs/en/docs/css/custom.css
@@ -61,6 +61,10 @@ a.internal-link::after {
   padding-bottom: 2em;
 }
 
+.md-footer-meta .md-social {
+  padding-right: 4rem;
+}
+
 .user-list {
   display: flex;
   flex-wrap: wrap;
diff --git a/docs/en/docs/js/init_kapa_widget.js b/docs/en/docs/js/init_kapa_widget.js
new file mode 100644
index 000000000..eaf123bf3
--- /dev/null
+++ b/docs/en/docs/js/init_kapa_widget.js
@@ -0,0 +1,29 @@
+document.addEventListener("DOMContentLoaded", function () {
+  var script = document.createElement("script");
+  script.src = "https://widget.kapa.ai/kapa-widget.bundle.js";
+  script.setAttribute("data-website-id", "91f47f27-b405-4299-bf5f-a1c0ec07b3cc");
+  script.setAttribute("data-project-name", "FastAPI");
+  script.setAttribute("data-project-color", "#009485");
+  script.setAttribute("data-project-logo", "https://fastapi.tiangolo.com/img/favicon.png");
+  script.setAttribute("data-bot-protection-mechanism", "hcaptcha");
+  script.setAttribute("data-button-height", "3rem");
+  script.setAttribute("data-button-width", "3rem");
+  script.setAttribute("data-button-border-radius", "50%");
+  script.setAttribute("data-button-padding", "0");
+  script.setAttribute("data-button-image", "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E");
+  script.setAttribute("data-button-image-height", "20px");
+  script.setAttribute("data-button-image-width", "20px");
+  script.setAttribute("data-button-text", "Ask AI");
+  script.setAttribute("data-button-text-font-size", "0.5rem");
+  script.setAttribute("data-button-text-font-family", "Roboto, sans-serif");
+  script.setAttribute("data-button-text-color", "#FFFFFF");
+  script.setAttribute("data-modal-border-radius", "0.5rem");
+  script.setAttribute("data-modal-header-bg-color", "#009485");
+  script.setAttribute("data-modal-title", "FastAPI AI Assistant");
+  script.setAttribute("data-modal-title-color", "#FFFFFF");
+  script.setAttribute("data-modal-title-font-family", "Roboto, sans-serif");
+  script.setAttribute("data-modal-example-questions", "How to define a route?,How to validate models?,How to handle responses?,How to deploy FastAPI?");
+  script.setAttribute("data-modal-disclaimer", "AI-generated answers based on FastAPI [documentation](https://fastapi.tiangolo.com/) and [community discussions](https://github.com/fastapi/fastapi/discussions). Always verify important information.");
+  script.async = true;
+  document.head.appendChild(script);
+});
diff --git a/docs/en/mkdocs.yml b/docs/en/mkdocs.yml
index 66ad67e9d..96ed3d586 100644
--- a/docs/en/mkdocs.yml
+++ b/docs/en/mkdocs.yml
@@ -342,5 +342,6 @@ extra_css:
 extra_javascript:
 - js/termynal.js
 - js/custom.js
+- js/init_kapa_widget.js
 hooks:
 - ../../scripts/mkdocs_hooks.py