{"id":1491,"date":"2026-03-29T17:20:32","date_gmt":"2026-03-29T17:20:32","guid":{"rendered":"https:\/\/digitwaves.com\/?p=1491"},"modified":"2026-03-29T21:41:54","modified_gmt":"2026-03-29T21:41:54","slug":"fastapi-react-rag-app","status":"publish","type":"post","link":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/","title":{"rendered":"Build a FastAPI Layer for Your RAG System (LangGraph + Pinecone API Guide)"},"content":{"rendered":"<p data-start=\"736\" data-end=\"919\">You already have a RAG pipeline using <span class=\"hover:entity-accent entity-underline inline cursor-pointer align-baseline\"><span class=\"whitespace-normal\">LangGraph<\/span><\/span> and <span class=\"hover:entity-accent entity-underline inline cursor-pointer align-baseline\"><span class=\"whitespace-normal\">Pinecone<\/span><\/span>. Now we\u2019re turning it into a real backend your frontend can call.<\/p>\n<p data-start=\"921\" data-end=\"934\">You\u2019ll build:<\/p>\n<ul data-start=\"935\" data-end=\"1041\">\n<li data-section-id=\"120w0sr\" data-start=\"935\" data-end=\"970\">Data ingestion (your AI memory)<\/li>\n<li data-section-id=\"1nsd1ro\" data-start=\"971\" data-end=\"990\">FastAPI backend<\/li>\n<li data-section-id=\"jq8fg\" data-start=\"991\" data-end=\"1015\">React-ready endpoint<\/li>\n<li data-section-id=\"345g1z\" data-start=\"1016\" data-end=\"1041\">Full local test setup<\/li>\n<\/ul>\n<hr data-start=\"1043\" data-end=\"1046\" \/>\n<h2 data-section-id=\"fquin9\" data-start=\"1048\" data-end=\"1068\">Project Structure<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">rag-project\/<br \/>\n\u2502\u2500\u2500 api.py<br \/>\n\u2502\u2500\u2500 lgdemo.py<br \/>\n\u2502\u2500\u2500 ingest_docs.py<br \/>\n\u2502\u2500\u2500 requirements.txt<br \/>\n\u2502\u2500\u2500 .env<br \/>\n\u2502\u2500\u2500 data\/<br \/>\n\u2502\u2500\u2500 .gitignore<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"1195\" data-end=\"1198\" \/>\n<h2 data-section-id=\"hmm47a\" data-start=\"1206\" data-end=\"1253\">Step 1 \u2013 Set Up VS Code + Virtual Environment<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\"><span class=\"\u037cd\">mkdir<\/span> rag-project<br \/>\n<span class=\"\u037cd\">cd<\/span> rag-project<br \/>\ncode .<br \/>\npython <span class=\"\u037cf\">-m<\/span> venv venv<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 data-section-id=\"dqwao8\" data-start=\"1328\" data-end=\"1359\">Activate Virtual Environment<\/h2>\n<h5 data-section-id=\"1yrhquf\" data-start=\"1361\" data-end=\"1375\">PowerShell<\/h5>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">venv\\Scripts\\Activate.ps1<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h5 data-section-id=\"1xxf8mk\" data-start=\"1415\" data-end=\"1422\">CMD<\/h5>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">venv\\Scripts\\activate<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h5 data-section-id=\"grieh9\" data-start=\"1458\" data-end=\"1480\">Mac\/Linux\/Git Bash<\/h5>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\"><span class=\"\u037cd\">source<\/span> venv\/bin\/activate<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 data-section-id=\"16px00l\" data-start=\"1524\" data-end=\"1551\">Common Errors (Fix Fast)<\/h2>\n<h5 data-section-id=\"aivev9\" data-start=\"1553\" data-end=\"1574\">PowerShell error:<\/h5>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">Running scripts is disabled on this system<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"1627\" data-end=\"1631\">Fix:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">Set-ExecutionPolicy <span class=\"\u037cf\">-ExecutionPolicy<\/span> RemoteSigned <span class=\"\u037cf\">-Scope<\/span> CurrentUser<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"1714\" data-end=\"1719\">Then:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">venv\\Scripts\\Activate.ps1<\/div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\">\u26a0\ufe0f <strong data-start=\"667\" data-end=\"681\">IMPORTANT:<\/strong><br data-start=\"681\" data-end=\"684\" \/>Do NOT press anything \u2014 wait until it fully completes.\u00a0 It will take a couple of minutes to complete.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-section-id=\"rkopwn\" data-start=\"1764\" data-end=\"1789\">Python not recognized<\/h3>\n<ul data-start=\"1790\" data-end=\"1834\">\n<li data-section-id=\"v33jje\" data-start=\"1790\" data-end=\"1810\">Reinstall Python<\/li>\n<li data-section-id=\"19dfjs\" data-start=\"1811\" data-end=\"1834\">Check \u201cAdd to PATH\u201d<\/li>\n<\/ul>\n<h2 data-section-id=\"v1ueui\" data-start=\"1841\" data-end=\"1861\">Confirm It Worked<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">(venv) C:\\your-folder&gt;<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"1895\" data-end=\"1898\" \/>\n<h2 data-section-id=\"nuafwp\" data-start=\"1906\" data-end=\"1940\">Step 2 \u2013 Initialize Git + GitHub<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\"><span class=\"\u037cd\">git<\/span> init<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"1964\" data-end=\"1984\">Create <code class=\"\" data-line=\"\">.gitignore<\/code>:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">venv\/<br \/>\n.env<br \/>\n__pycache__\/<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\"><span class=\"\u037cd\">git<\/span> add .<br \/>\n<span class=\"\u037cd\">git<\/span> commit <span class=\"\u037cf\">-m<\/span> <span class=\"\u037cc\">&#8220;Initial RAG FastAPI setup&#8221;<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2084\" data-end=\"2142\">Create repo on <span class=\"hover:entity-accent entity-underline inline cursor-pointer align-baseline\"><span class=\"whitespace-normal\">GitHub<\/span><\/span> then:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\"><span class=\"\u037cd\">git<\/span> remote add origin https:\/\/github.com\/YOUR_USERNAME\/rag-project.git<br \/>\n<span class=\"\u037cd\">git<\/span> branch <span class=\"\u037cf\">-M<\/span> main<br \/>\n<span class=\"\u037cd\">git<\/span> push <span class=\"\u037cf\">-u<\/span> origin main<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"2271\" data-end=\"2274\" \/>\n<h2 data-section-id=\"1dy6zil\" data-start=\"2282\" data-end=\"2332\">Step 3 \u2013 Install Dependencies + requirements.txt<\/h2>\n<p data-start=\"2334\" data-end=\"2342\">Install:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">pip install fastapi uvicorn openai pinecone python-dotenv langgraph pypdf<\/div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\"><strong>Note: the download will take some time, maybe 5 minutes!<\/strong><\/div>\n<\/div>\n<\/div>\n<p data-start=\"2438\" data-end=\"2465\">Generate requirements file:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">pip freeze &gt; requirements.txt<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2510\" data-end=\"2576\">\ud83d\udc49 This allows you (or your server) to reinstall everything later:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">pip install <span class=\"\u037cf\">-r<\/span> requirements.txt<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"2623\" data-end=\"2626\" \/>\n<h2 data-section-id=\"1nz71f7\" data-start=\"2634\" data-end=\"2666\">Step 4 \u2013 Environment Variables<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\">Add environmental API Keys to the environmental variables located in .\/.env file.<\/div>\n<div><\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">OPENAI_API_KEY=your_key<br \/>\nPINECONE_API_KEY=your_key<br \/>\nPINECONE_INDEX_NAME=rag-index<br \/>\nPINECONE_ENV=us-east-1<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"2780\" data-end=\"2783\" \/>\n<h2 data-section-id=\"2hol1u\" data-start=\"2791\" data-end=\"2827\">Step 5 \u2013 Add Your Data (TXT + PDF)<\/h2>\n<h2 data-section-id=\"2plbmv\" data-start=\"2829\" data-end=\"2850\">Create data folder<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\"><span class=\"\u037cd\">mkdir<\/span> data<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 data-section-id=\"i7nwm3\" data-start=\"2881\" data-end=\"2909\">Create TXT file (Notepad)<\/h2>\n<ol data-start=\"2911\" data-end=\"2965\">\n<li data-section-id=\"19pdyl3\" data-start=\"2911\" data-end=\"2949\">Right-click \u2192 New \u2192 Text Document<\/li>\n<li data-section-id=\"k4phn\" data-start=\"2950\" data-end=\"2965\">Add content:<\/li>\n<\/ol>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">LangGraph is a framework for building AI workflows.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<ol start=\"3\" data-start=\"3028\" data-end=\"3039\">\n<li data-section-id=\"1g16ohd\" data-start=\"3028\" data-end=\"3039\">Save as:<\/li>\n<\/ol>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">langgraph.txt<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 data-section-id=\"1xbeae9\" data-start=\"3068\" data-end=\"3096\">Create PDF (from Notepad)<\/h2>\n<ol data-start=\"3098\" data-end=\"3201\">\n<li data-section-id=\"14evwmj\" data-start=\"3098\" data-end=\"3115\">Open Notepad<\/li>\n<li data-section-id=\"igbdap\" data-start=\"3116\" data-end=\"3132\">Add content<\/li>\n<li data-section-id=\"bt6z5p\" data-start=\"3133\" data-end=\"3150\">File \u2192 Print<\/li>\n<li data-section-id=\"p8yshn\" data-start=\"3151\" data-end=\"3189\">Select <strong data-start=\"3161\" data-end=\"3187\">Microsoft Print to PDF<\/strong><\/li>\n<li data-section-id=\"pyhcaf\" data-start=\"3190\" data-end=\"3201\">Save as:<\/li>\n<\/ol>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">ai_notes.pdf<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3224\" data-end=\"3247\">Move files into <code class=\"\" data-line=\"\">\/data<\/code><\/p>\n<h2 data-section-id=\"baja8k\" data-start=\"3254\" data-end=\"3271\">What This Does<\/h2>\n<p data-start=\"3273\" data-end=\"3314\">This becomes your AI\u2019s <strong data-start=\"3296\" data-end=\"3314\">knowledge base<\/strong><\/p>\n<p>&nbsp;<\/p>\n<hr data-start=\"1378\" data-end=\"1381\" \/>\n<h2 data-section-id=\"451af8\" data-start=\"1383\" data-end=\"1434\">Step 6 \u2013 Update ingest_docs.py (Make It API-Friendly)<\/h2>\n<p><strong>File: <\/strong>ingest_docs.py<\/p>\n<pre id=\"code-snippet-source-18\" class=\"code-snippet-source linkable-line-numbers\"><code class=\"language-php line-numbers\">&lt;?php\n\n# Loads documents \u2192 converts to embeddings \u2192 stores in Pinecone\n\nimport os\nimport uuid\nfrom dotenv import load_dotenv\nfrom openai import OpenAI\nfrom pinecone import Pinecone\nfrom pypdf import PdfReader\n\nload_dotenv()\n\nclient = OpenAI(api_key=os.getenv(&quot;OPENAI_API_KEY&quot;))\npc = Pinecone(api_key=os.getenv(&quot;PINECONE_API_KEY&quot;))\nindex = pc.Index(os.getenv(&quot;PINECONE_INDEX_NAME&quot;))\n\nDATA_FOLDER = &quot;data&quot;\n\ndef load_txt(path):\n    with open(path, &quot;r&quot;, encoding=&quot;utf-8&quot;) as f:\n        return f.read()\n\ndef load_pdf(path):\n    reader = PdfReader(path)\n    text = &quot;&quot;\n    for page in reader.pages:\n        t = page.extract_text()\n        if t:\n            text += t + &quot;\\n&quot;\n    return text\n\ndef chunk_text(text, chunk_size=500, overlap=100):\n    chunks, start = [], 0\n    while start &lt; len(text):\n        chunk = text[start:start + chunk_size].strip()\n        if chunk:\n            chunks.append(chunk)\n        start += chunk_size - overlap\n    return chunks\n\ndef embed_batch(texts):\n    res = client.embeddings.create(\n        model=&quot;text-embedding-3-small&quot;,\n        input=texts\n    )\n    return [d.embedding for d in res.data]\n\ndef process_file(file_path):\n    if file_path.endswith(&quot;.txt&quot;):\n        text = load_txt(file_path)\n    elif file_path.endswith(&quot;.pdf&quot;):\n        text = load_pdf(file_path)\n    else:\n        return\n\n    if not text.strip():\n        return\n\n    chunks = chunk_text(text)\n    embeddings = embed_batch(chunks)\n\n    vectors = []\n    for i, chunk in enumerate(chunks):\n        vectors.append({\n            &quot;id&quot;: str(uuid.uuid4()),\n            &quot;values&quot;: embeddings[i],\n            &quot;metadata&quot;: {&quot;text&quot;: chunk}\n        })\n\n    index.upsert(vectors)\n    print(f&quot;Inserted {len(vectors)} chunks&quot;)\n\ndef ingest_all():\n    for f in os.listdir(DATA_FOLDER):\n        process_file(os.path.join(DATA_FOLDER, f))\n\nif __name__ == &quot;__main__&quot;:\n    ingest_all()<\/code><\/pre>\n<h5 data-start=\"5227\" data-end=\"5243\" data-section-id=\"294eva\">Run Ingestion<\/h5>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">python ingest_docs.py<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"5280\" data-end=\"5341\">\ud83d\udc49 Loads your data into <span class=\"hover:entity-accent entity-underline inline cursor-pointer align-baseline\"><span class=\"whitespace-normal\">Pinecone<\/span><\/span><\/p>\n<hr data-start=\"1378\" data-end=\"1381\" \/>\n<h2 data-section-id=\"451af8\" data-start=\"1383\" data-end=\"1434\">Step 7 \u2013 Update lgdemo.py (Make It API-Friendly)<\/h2>\n<h3 data-section-id=\"1ys7wx\" data-start=\"1436\" data-end=\"1455\">\u2705 What changed:<\/h3>\n<ul data-start=\"1456\" data-end=\"1545\">\n<li data-section-id=\"1ic1c4d\" data-start=\"1456\" data-end=\"1477\">Removed <code class=\"\" data-line=\"\">input()<\/code><\/li>\n<li data-section-id=\"1ljwb21\" data-start=\"1478\" data-end=\"1507\">Accept query as parameter<\/li>\n<li data-section-id=\"1c4d406\" data-start=\"1508\" data-end=\"1545\">Return answer instead of printing<\/li>\n<\/ul>\n<p><strong>File:<\/strong> lgdemo.py<\/p>\n<pre id=\"code-snippet-source-16\" class=\"code-snippet-source linkable-line-numbers\"><code class=\"language-php line-numbers\">&lt;?php\n\n# ============================================\n# RAG PIPELINE (API VERSION)\n# ============================================\n\nimport os\nfrom typing import TypedDict, List\nfrom dotenv import load_dotenv\nfrom openai import OpenAI\nfrom pinecone import Pinecone, ServerlessSpec\nfrom langgraph.graph import StateGraph, END\n\nload_dotenv()\n\nclass GraphState(TypedDict):\n    query: str\n    embedding: List[float]\n    results: list\n    answer: str\n\nclass EmbeddingService:\n    def __init__(self, client):\n        self.client = client\n\n    def embed(self, text):\n        res = self.client.embeddings.create(\n            model=&quot;text-embedding-3-small&quot;,\n            input=text\n        )\n        return res.data[0].embedding\n\nclass PineconeService:\n    def __init__(self):\n        self.pc = Pinecone(api_key=os.getenv(&quot;PINECONE_API_KEY&quot;))\n        self.index_name = os.getenv(&quot;PINECONE_INDEX_NAME&quot;)\n\n        existing = [i.name for i in self.pc.list_indexes()]\n\n        if self.index_name not in existing:\n            self.pc.create_index(\n                name=self.index_name,\n                dimension=1536,\n                metric=&quot;cosine&quot;,\n                spec=ServerlessSpec(\n                    cloud=&quot;aws&quot;,\n                    region=os.getenv(&quot;PINECONE_ENV&quot;)\n                )\n            )\n\n        self.index = self.pc.Index(self.index_name)\n\n    def query(self, vector):\n        return self.index.query(\n            vector=vector,\n            top_k=3,\n            include_metadata=True\n        ).matches\n\nclass LLMService:\n    def __init__(self):\n        self.client = OpenAI(api_key=os.getenv(&quot;OPENAI_API_KEY&quot;))\n\n    def generate(self, query, context):\n        prompt = f&quot;&quot;&quot;\nUse the context below to answer the question.\n\nContext:\n{context}\n\nQuestion:\n{query}\n&quot;&quot;&quot;\n        res = self.client.chat.completions.create(\n            model=&quot;gpt-4o-mini&quot;,\n            messages=[{&quot;role&quot;: &quot;user&quot;, &quot;content&quot;: prompt}]\n        )\n\n        return res.choices[0].message.content\n\nclass LangGraphService:\n    def __init__(self):\n        client = OpenAI(api_key=os.getenv(&quot;OPENAI_API_KEY&quot;))\n\n        self.embedder = EmbeddingService(client)\n        self.vector = PineconeService()\n        self.llm = LLMService()\n\n        self.graph = StateGraph(GraphState)\n        self._build()\n        self.app = self.graph.compile()\n\n    def embed_query(self, state):\n        return {&quot;embedding&quot;: self.embedder.embed(state[&quot;query&quot;])}\n\n    def vector_search(self, state):\n        return {&quot;results&quot;: self.vector.query(state[&quot;embedding&quot;])}\n\n    def generate_answer(self, state):\n        context = &quot;\\n&quot;.join([r.metadata[&quot;text&quot;] for r in state[&quot;results&quot;]])\n        answer = self.llm.generate(state[&quot;query&quot;], context)\n        return {&quot;answer&quot;: answer}\n\n    def _build(self):\n        self.graph.add_node(&quot;embed&quot;, self.embed_query)\n        self.graph.add_node(&quot;search&quot;, self.vector_search)\n        self.graph.add_node(&quot;answer&quot;, self.generate_answer)\n\n        self.graph.set_entry_point(&quot;embed&quot;)\n        self.graph.add_edge(&quot;embed&quot;, &quot;search&quot;)\n        self.graph.add_edge(&quot;search&quot;, &quot;answer&quot;)\n        self.graph.add_edge(&quot;answer&quot;, END)\n\n    def ask(self, query: str):\n        result = self.app.invoke({&quot;query&quot;: query})\n        return result[&quot;answer&quot;]<\/code><\/pre>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"4819\" data-end=\"4822\" \/>\n<h2 data-section-id=\"1ejxjbj\" data-start=\"4824\" data-end=\"4858\">Step 8 \u2013 Create FastAPI Backend<\/h2>\n<p data-section-id=\"1miheh1\" data-start=\"4865\" data-end=\"4879\"><strong>File:<\/strong> api.py<\/p>\n<pre id=\"code-snippet-source-17\" class=\"code-snippet-source linkable-line-numbers\"><code class=\"language-php line-numbers\">&lt;?php\n\n# ============================================\n# FASTAPI LAYER FOR RAG SYSTEM\n# ============================================\nfrom fastapi.middleware.cors import CORSMiddleware\nfrom fastapi import FastAPI\nfrom pydantic import BaseModel\nfrom lgdemo import LangGraphService\n\n# Create FastAPI app\napp = FastAPI()\n\n# Initialize RAG service (runs once)\nrag = LangGraphService()\n\n# Request format\nclass QueryRequest(BaseModel):\n    question: str\n\t\t\n# Allow React to connect\napp.add_middleware(\n    CORSMiddleware,\n    allow_origins=[&quot;*&quot;],  # allow React\n    allow_credentials=True,\n    allow_methods=[&quot;*&quot;],\n    allow_headers=[&quot;*&quot;],\n)\n\n#use this for production with specific origins\n#allow_origins=[\n#    &quot;http:\/\/localhost:3000&quot;,\n#    &quot;https:\/\/yourdomain.com&quot;\n#]\n\n# Root test endpoint\n@app.get(&quot;\/&quot;)\ndef home():\n    return {&quot;message&quot;: &quot;RAG API is running&quot;}\n\n# Main endpoint\n@app.post(&quot;\/ask&quot;)\ndef ask_question(request: QueryRequest):\n    answer = rag.ask(request.question)\n\n    return {\n        &quot;question&quot;: request.question,\n        &quot;answer&quot;: answer\n    }<\/code><\/pre>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"4819\" data-end=\"4822\" \/>\n<h2 data-start=\"5590\" data-end=\"5620\" data-section-id=\"w75vvh\">Step 9 \u2013 Run the API Server<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">uvicorn api:app <span class=\"\u037cf\">&#8211; -reload<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"5669\" data-end=\"5688\">\ud83d\udc49 Open in browser:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">http:\/\/127.0.0.1:8000<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"5720\" data-end=\"5745\">\ud83d\udc49 API docs (Swagger UI):<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">http:\/\/127.0.0.1:8000\/docs<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"5782\" data-end=\"5785\" \/>\n<h2 data-start=\"5787\" data-end=\"5807\" data-section-id=\"z3qfz3\">Step 10 \u2013 Test API<\/h2>\n<h3 data-start=\"5809\" data-end=\"5833\" data-section-id=\"dvfwp3\">Example POST request<\/h3>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">{<br \/>\n&#8220;question&#8221;: &#8220;What is LangGraph?&#8221;<br \/>\n}<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-start=\"5896\" data-end=\"5916\" data-section-id=\"a6fiwd\">Example response<\/h3>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">{<br \/>\n&#8220;question&#8221;: <span class=\"\u037cc\">&#8220;What is LangGraph?&#8221;<\/span>,<br \/>\n&#8220;answer&#8221;: <span class=\"\u037cc\">&#8220;LangGraph is a framework&#8230;&#8221;<\/span><br \/>\n}<\/div>\n<\/div>\n<div>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"5782\" data-end=\"5785\" \/>\n<h2 data-start=\"5787\" data-end=\"5807\" data-section-id=\"z3qfz3\"><\/h2>\n<\/div>\n<\/div>\n<div>\n<h2 data-section-id=\"ruxd5x\" data-start=\"143\" data-end=\"196\">Step 11 \u2013 Install React (If You Don\u2019t Have It Yet)<\/h2>\n<h4 data-section-id=\"1cznm1q\" data-start=\"198\" data-end=\"240\">1. Install Node.js (Required for React)<\/h4>\n<p data-start=\"242\" data-end=\"286\">React runs on <strong data-start=\"256\" data-end=\"264\">Node<\/strong>, so install it first:<\/p>\n<p data-start=\"288\" data-end=\"345\">\ud83d\udc49 Download from: <span class=\"hover:entity-accent entity-underline inline cursor-pointer align-baseline\"><span class=\"whitespace-normal\">Node.js<\/span><\/span><\/p>\n<h3 data-section-id=\"z3ii7s\" data-start=\"347\" data-end=\"374\">Install Steps (Windows)<\/h3>\n<ol data-start=\"375\" data-end=\"476\">\n<li data-section-id=\"sr7d2e\" data-start=\"375\" data-end=\"406\">Download the <strong data-start=\"391\" data-end=\"406\">LTS version<\/strong><\/li>\n<li data-section-id=\"3z4huu\" data-start=\"407\" data-end=\"423\">Run installer<\/li>\n<li data-section-id=\"s2jhmf\" data-start=\"424\" data-end=\"453\">\u2705 Check: <strong data-start=\"436\" data-end=\"453\">\u201cAdd to PATH\u201d<\/strong><\/li>\n<li data-section-id=\"1isqprr\" data-start=\"454\" data-end=\"476\">Click Next \u2192 Finish<\/li>\n<\/ol>\n<h4 data-section-id=\"7dsc42\" data-start=\"483\" data-end=\"508\">2. Verify Installation<\/h4>\n<p data-start=\"510\" data-end=\"553\">Open a <strong data-start=\"517\" data-end=\"544\">new terminal in VS Code<\/strong> and run:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\"><span class=\"\u037cd\">node<\/span> <span class=\"\u037cf\">-v<\/span><br \/>\n<span class=\"\u037cd\">npm<\/span> <span class=\"\u037cf\">-v<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"583\" data-end=\"622\">\ud83d\udc49 You should see version numbers like:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">v20.x.x<br \/>\n10.x.x<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"647\" data-end=\"710\">If you see \u201cnot recognized\u201d \u2192 restart VS Code or your computer.<\/p>\n<h4 data-section-id=\"1j8gzjn\" data-start=\"717\" data-end=\"750\">3. Create React App (Frontend)<\/h4>\n<p data-start=\"752\" data-end=\"793\">Inside your project root (<code class=\"\" data-line=\"\">rag-project<\/code>):<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">npx create-react-app frontend<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-section-id=\"pd3iy5\" data-start=\"838\" data-end=\"857\">What this does:<\/h3>\n<ul data-start=\"858\" data-end=\"941\">\n<li data-section-id=\"d1qva3\" data-start=\"858\" data-end=\"874\">Installs React<\/li>\n<li data-section-id=\"cnleqf\" data-start=\"875\" data-end=\"906\">Creates full frontend project<\/li>\n<li data-section-id=\"135plbs\" data-start=\"907\" data-end=\"941\">Sets up everything automatically<\/li>\n<\/ul>\n<h4 data-section-id=\"179v5fg\" data-start=\"948\" data-end=\"974\">4. Go into the React Folder<\/h4>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\"><span class=\"\u037cd\">cd<\/span> frontend<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h4 data-section-id=\"78dtp8\" data-start=\"1006\" data-end=\"1047\">5. Install Dependencies (just in case)<\/h4>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\"><span class=\"\u037cd\">npm<\/span> install<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h4 data-section-id=\"1j3vyhp\" data-start=\"1079\" data-end=\"1100\">6. Start React App<\/h4>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\"><span class=\"\u037cd\">npm<\/span> <span class=\"\u037cd\">start<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"1125\" data-end=\"1138\">\ud83d\udc49 This will:<\/p>\n<ul data-start=\"1139\" data-end=\"1181\">\n<li data-section-id=\"1gr0m9o\" data-start=\"1139\" data-end=\"1171\">Launch browser automatically<\/li>\n<li data-section-id=\"7hydt2\" data-start=\"1172\" data-end=\"1181\">Open:<\/li>\n<\/ul>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">http:\/\/localhost:3000<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h4 data-section-id=\"1a8tt6p\" data-start=\"1218\" data-end=\"1240\">7. Confirm It Works<\/h4>\n<p data-start=\"1242\" data-end=\"1303\">You should see:<br \/>\n\ud83d\udc49 React logo spinning<br data-start=\"1280\" data-end=\"1283\" \/>\ud83d\udc49 \u201cEdit src\/App.js\u201d<\/p>\n<h4 data-section-id=\"1ojmonz\" data-start=\"1750\" data-end=\"1779\">9. Folder You Just Created<\/h4>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\">frontend\/<br \/>\n\u2502\u2500\u2500 src\/<br \/>\n\u2502\u2500\u2500 public\/<br \/>\n\u2502\u2500\u2500 package.json<\/div>\n<\/div>\n<\/div>\n<div>\n<h1 data-section-id=\"1ftronk\" data-start=\"326\" data-end=\"357\"><span role=\"text\"><code class=\"\" data-line=\"\"><\/code><\/span><\/h1>\n<p>Install Required Package (Markdown)<\/p>\n<p data-start=\"5252\" data-end=\"5280\">Run this inside <code class=\"\" data-line=\"\">\/frontend<\/code>:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037c5 \u037cj\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<div class=\"cm-content q9tKkq_readonly\"><span class=\"\u037cd\">npm<\/span> install react-markdown<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"5322\" data-end=\"5325\" \/>\n<h2 data-section-id=\"ruxd5x\" data-start=\"143\" data-end=\"196\">Step 12 \u2013 Replace App.js with a custom React script to create a Chatbot UI:<\/h2>\n<p><strong>File:<\/strong> \/download\/src\/App.js<\/p>\n<p data-section-id=\"1pa0e5f\" data-start=\"5327\" data-end=\"5351\"><pre id=\"code-snippet-source-19\" class=\"code-snippet-source linkable-line-numbers\"><code class=\"language-php line-numbers\">frontend\/src\/App.js\n\n\nimport { useState, useEffect, useRef } from &quot;react&quot;;\nimport ReactMarkdown from &quot;react-markdown&quot;;function App() {\nconst [messages, setMessages] = useState(() =&gt; {\nconst saved = localStorage.getItem(&quot;chat_history&quot;);\nreturn saved ? JSON.parse(saved) : [];\n});\n\nconst [input, setInput] = useState(&quot;&quot;);\nconst [loading, setLoading] = useState(false);\nconst bottomRef = useRef(null);\n\n\/\/ Save chat history\nuseEffect(() =&gt; {\nlocalStorage.setItem(&quot;chat_history&quot;, JSON.stringify(messages));\nbottomRef.current?.scrollIntoView({ behavior: &quot;smooth&quot; });\n}, [messages]);\n\n\/\/ Fake streaming effect\nfunction streamText(text, callback) {\nlet index = 0;\nlet current = &quot;&quot;;\n\nconst interval = setInterval(() =&gt; {\ncurrent += text[index];\nindex++;\n\ncallback(current);\n\nif (index &gt;= text.length) {\nclearInterval(interval);\n}\n}, 15); \/\/ speed (lower = faster)\n}\n\nasync function sendMessage() {\nif (!input.trim() || loading) return;\n\nconst userMessage = { role: &quot;user&quot;, content: input };\nsetMessages((prev) =&gt; [...prev, userMessage]);\n\nconst question = input;\nsetInput(&quot;&quot;);\nsetLoading(true);\n\ntry {\nconst res = await fetch(&quot;http:\/\/127.0.0.1:8000\/ask&quot;, {\nmethod: &quot;POST&quot;,\nheaders: {\n&quot;Content-Type&quot;: &quot;application\/json&quot;\n},\nbody: JSON.stringify({ question })\n});\n\nconst data = await res.json();\n\n\/\/ Add empty assistant message first\nsetMessages((prev) =&gt; [\n...prev,\n{ role: &quot;assistant&quot;, content: &quot;&quot; }\n]);\n\n\/\/ Stream into last message\nstreamText(data.answer, (partial) =&gt; {\nsetMessages((prev) =&gt; {\nconst updated = [...prev];\nupdated[updated.length - 1].content = partial;\nreturn updated;\n});\n});\n\n} catch (err) {\nsetMessages((prev) =&gt; [\n...prev,\n{ role: &quot;assistant&quot;, content: &quot;Error connecting to API.&quot; }\n]);\n}\n\nsetLoading(false);\n}\n\nfunction handleKeyPress(e) {\nif (e.key === &quot;Enter&quot; &amp;&amp; !e.shiftKey) {\ne.preventDefault();\nsendMessage();\n}\n}\n\nfunction clearChat() {\nlocalStorage.removeItem(&quot;chat_history&quot;);\nsetMessages([]);\n}\n\nreturn (\n&lt;div style={styles.container}&gt;\n&lt;div style={styles.header}&gt;\n&lt;h1&gt;RAG AI Chat&lt;\/h1&gt;\n&lt;button onClick={clearChat} style={styles.clearBtn}&gt;\nClear\n&lt;\/button&gt;\n&lt;\/div&gt;\n\n&lt;div style={styles.chatBox}&gt;\n{messages.map((msg, index) =&gt; (\n&lt;div\nkey={index}\nstyle={{\n...styles.message,\nalignSelf:\nmsg.role === &quot;user&quot; ? &quot;flex-end&quot; : &quot;flex-start&quot;,\nbackground:\nmsg.role === &quot;user&quot; ? &quot;#6366f1&quot; : &quot;#1f2937&quot;,\ncolor: &quot;#fff&quot;\n}}\n&gt;\n&lt;ReactMarkdown&gt;{msg.content}&lt;\/ReactMarkdown&gt;\n&lt;\/div&gt;\n))}\n\n{loading &amp;&amp; &lt;div style={styles.loading}&gt;Thinking...&lt;\/div&gt;}\n&lt;div ref={bottomRef} \/&gt;\n&lt;\/div&gt;\n\n&lt;div style={styles.inputArea}&gt;\n&lt;textarea\nvalue={input}\nonChange={(e) =&gt; setInput(e.target.value)}\nonKeyDown={handleKeyPress}\nplaceholder=&quot;Ask something...&quot;\nstyle={styles.input}\nrows={2}\n\/&gt;\n\n&lt;button\nonClick={sendMessage}\nstyle={styles.button}\ndisabled={loading}\n&gt;\n{loading ? &quot;...&quot; : &quot;Send&quot;}\n&lt;\/button&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n);\n}\n\nconst styles = {\ncontainer: {\nmaxWidth: &quot;800px&quot;,\nmargin: &quot;0 auto&quot;,\npadding: &quot;20px&quot;,\nfontFamily: &quot;Arial&quot;,\ncolor: &quot;#fff&quot;,\nbackground: &quot;#111827&quot;,\nminHeight: &quot;100vh&quot;\n},\nheader: {\ndisplay: &quot;flex&quot;,\njustifyContent: &quot;space-between&quot;,\nalignItems: &quot;center&quot;\n},\nclearBtn: {\nbackground: &quot;#ef4444&quot;,\ncolor: &quot;#fff&quot;,\nborder: &quot;none&quot;,\npadding: &quot;6px 10px&quot;,\nborderRadius: &quot;5px&quot;,\ncursor: &quot;pointer&quot;\n},\nchatBox: {\ndisplay: &quot;flex&quot;,\nflexDirection: &quot;column&quot;,\nheight: &quot;500px&quot;,\noverflowY: &quot;auto&quot;,\nborder: &quot;1px solid #374151&quot;,\npadding: &quot;10px&quot;,\nborderRadius: &quot;10px&quot;,\nmarginBottom: &quot;10px&quot;,\nbackground: &quot;#111827&quot;\n},\nmessage: {\npadding: &quot;10px&quot;,\nmargin: &quot;5px 0&quot;,\nborderRadius: &quot;10px&quot;,\nmaxWidth: &quot;75%&quot;,\nlineHeight: &quot;1.4&quot;\n},\ninputArea: {\ndisplay: &quot;flex&quot;,\ngap: &quot;10px&quot;\n},\ninput: {\nflex: 1,\npadding: &quot;10px&quot;,\nborderRadius: &quot;5px&quot;,\nborder: &quot;1px solid #374151&quot;,\nbackground: &quot;#1f2937&quot;,\ncolor: &quot;#fff&quot;\n},\nbutton: {\npadding: &quot;10px 15px&quot;,\nbackground: &quot;#6366f1&quot;,\ncolor: &quot;#fff&quot;,\nborder: &quot;none&quot;,\nborderRadius: &quot;5px&quot;,\ncursor: &quot;pointer&quot;\n},\nloading: {\nfontStyle: &quot;italic&quot;,\ncolor: &quot;#9ca3af&quot;\n}\n};\n\nexport default App;<\/code><\/pre><\/p>\n<p data-section-id=\"1pa0e5f\" data-start=\"5327\" data-end=\"5351\">Run the script: npm start<\/p>\n<p data-section-id=\"1pa0e5f\" data-start=\"5327\" data-end=\"5351\">Tip: Make sure to ask a question that was put on one of the docs digested by Pinecone to confirm the RAG part works!<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\">\n<!--\n\n<div class=\"next-session-box\"><strong>Next Session:<\/strong> <a href=\"\/dockerize-your-rag-fastapi-app-for-vps-deployment\">Dockerize Your RAG + FastAPI App for VPS Deployment<\/a><\/div>\n\n--><\/p>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>You already have a RAG pipeline using LangGraph and Pinecone. Now we\u2019re turning it into a real backend your frontend can call. You\u2019ll build: Data [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1493,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48,34,47,33],"tags":[43,46,38,40,44,41,42,39,45],"class_list":["post-1491","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fastapi","category-langgraph","category-pinecone","category-rag","tag-ai-api","tag-ai-chatbot-backend","tag-fastapi-tutorial","tag-langgraph-api","tag-llm-backend","tag-pinecone-api","tag-python-backend","tag-rag-api","tag-react-api-integration"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Build and Deploy with LangGraph and Pinecone<\/title>\n<meta name=\"description\" content=\"Learn how to build a complete RAG app with FastAPI backend and React frontend using LangGraph and Pinecone.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build and Deploy with LangGraph and Pinecone\" \/>\n<meta property=\"og:description\" content=\"Learn how to build a complete RAG app with FastAPI backend and React frontend using LangGraph and Pinecone.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Digit Waves\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-29T17:20:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-29T21:41:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/digitwaves.com\/wp-content\/uploads\/2026\/03\/universal_upscale_0_33a133ee-be0d-4645-8981-98b6d1886d26_0-1024x572.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"572\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cmartin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cmartin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/fastapi-react-rag-app\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/fastapi-react-rag-app\\\/\"},\"author\":{\"name\":\"cmartin\",\"@id\":\"https:\\\/\\\/digitwaves.com\\\/#\\\/schema\\\/person\\\/223d018061f352913b760bf9b09a8097\"},\"headline\":\"Build a FastAPI Layer for Your RAG System (LangGraph + Pinecone API Guide)\",\"datePublished\":\"2026-03-29T17:20:32+00:00\",\"dateModified\":\"2026-03-29T21:41:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/fastapi-react-rag-app\\\/\"},\"wordCount\":685,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/fastapi-react-rag-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/digitwaves.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/universal_upscale_0_33a133ee-be0d-4645-8981-98b6d1886d26_0.jpg\",\"keywords\":[\"ai api\",\"ai chatbot backend\",\"fastapi tutorial\",\"langgraph api\",\"llm backend\",\"pinecone api\",\"python backend\",\"rag api\",\"react api integration\"],\"articleSection\":[\"FastAPI\",\"Langgraph\",\"Pinecone\",\"RAG\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/fastapi-react-rag-app\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/fastapi-react-rag-app\\\/\",\"url\":\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/fastapi-react-rag-app\\\/\",\"name\":\"Build and Deploy with LangGraph and Pinecone\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/digitwaves.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/fastapi-react-rag-app\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/fastapi-react-rag-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/digitwaves.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/universal_upscale_0_33a133ee-be0d-4645-8981-98b6d1886d26_0.jpg\",\"datePublished\":\"2026-03-29T17:20:32+00:00\",\"dateModified\":\"2026-03-29T21:41:54+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/digitwaves.com\\\/#\\\/schema\\\/person\\\/223d018061f352913b760bf9b09a8097\"},\"description\":\"Learn how to build a complete RAG app with FastAPI backend and React frontend using LangGraph and Pinecone.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/fastapi-react-rag-app\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/fastapi-react-rag-app\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/fastapi-react-rag-app\\\/#primaryimage\",\"url\":\"https:\\\/\\\/digitwaves.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/universal_upscale_0_33a133ee-be0d-4645-8981-98b6d1886d26_0.jpg\",\"contentUrl\":\"https:\\\/\\\/digitwaves.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/universal_upscale_0_33a133ee-be0d-4645-8981-98b6d1886d26_0.jpg\",\"width\":2752,\"height\":1536,\"caption\":\"fastapi react rag app\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/fastapi-react-rag-app\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/digitwaves.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build a FastAPI Layer for Your RAG System (LangGraph + Pinecone API Guide)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/digitwaves.com\\\/#website\",\"url\":\"https:\\\/\\\/digitwaves.com\\\/\",\"name\":\"Digit Waves\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/digitwaves.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/digitwaves.com\\\/#\\\/schema\\\/person\\\/223d018061f352913b760bf9b09a8097\",\"name\":\"cmartin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2aa893c0e8a64727fc5308b3b422801ee1f800294e70ee6ac57fd6b86a104eb2?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2aa893c0e8a64727fc5308b3b422801ee1f800294e70ee6ac57fd6b86a104eb2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2aa893c0e8a64727fc5308b3b422801ee1f800294e70ee6ac57fd6b86a104eb2?s=96&d=mm&r=g\",\"caption\":\"cmartin\"},\"sameAs\":[\"http:\\\/\\\/digitwaves.com\"],\"url\":\"https:\\\/\\\/digitwaves.com\\\/index.php\\\/author\\\/cmartin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build and Deploy with LangGraph and Pinecone","description":"Learn how to build a complete RAG app with FastAPI backend and React frontend using LangGraph and Pinecone.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/","og_locale":"en_US","og_type":"article","og_title":"Build and Deploy with LangGraph and Pinecone","og_description":"Learn how to build a complete RAG app with FastAPI backend and React frontend using LangGraph and Pinecone.","og_url":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/","og_site_name":"Digit Waves","article_published_time":"2026-03-29T17:20:32+00:00","article_modified_time":"2026-03-29T21:41:54+00:00","og_image":[{"width":1024,"height":572,"url":"https:\/\/digitwaves.com\/wp-content\/uploads\/2026\/03\/universal_upscale_0_33a133ee-be0d-4645-8981-98b6d1886d26_0-1024x572.jpg","type":"image\/jpeg"}],"author":"cmartin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cmartin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/#article","isPartOf":{"@id":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/"},"author":{"name":"cmartin","@id":"https:\/\/digitwaves.com\/#\/schema\/person\/223d018061f352913b760bf9b09a8097"},"headline":"Build a FastAPI Layer for Your RAG System (LangGraph + Pinecone API Guide)","datePublished":"2026-03-29T17:20:32+00:00","dateModified":"2026-03-29T21:41:54+00:00","mainEntityOfPage":{"@id":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/"},"wordCount":685,"commentCount":0,"image":{"@id":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/#primaryimage"},"thumbnailUrl":"https:\/\/digitwaves.com\/wp-content\/uploads\/2026\/03\/universal_upscale_0_33a133ee-be0d-4645-8981-98b6d1886d26_0.jpg","keywords":["ai api","ai chatbot backend","fastapi tutorial","langgraph api","llm backend","pinecone api","python backend","rag api","react api integration"],"articleSection":["FastAPI","Langgraph","Pinecone","RAG"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/","url":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/","name":"Build and Deploy with LangGraph and Pinecone","isPartOf":{"@id":"https:\/\/digitwaves.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/#primaryimage"},"image":{"@id":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/#primaryimage"},"thumbnailUrl":"https:\/\/digitwaves.com\/wp-content\/uploads\/2026\/03\/universal_upscale_0_33a133ee-be0d-4645-8981-98b6d1886d26_0.jpg","datePublished":"2026-03-29T17:20:32+00:00","dateModified":"2026-03-29T21:41:54+00:00","author":{"@id":"https:\/\/digitwaves.com\/#\/schema\/person\/223d018061f352913b760bf9b09a8097"},"description":"Learn how to build a complete RAG app with FastAPI backend and React frontend using LangGraph and Pinecone.","breadcrumb":{"@id":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/#primaryimage","url":"https:\/\/digitwaves.com\/wp-content\/uploads\/2026\/03\/universal_upscale_0_33a133ee-be0d-4645-8981-98b6d1886d26_0.jpg","contentUrl":"https:\/\/digitwaves.com\/wp-content\/uploads\/2026\/03\/universal_upscale_0_33a133ee-be0d-4645-8981-98b6d1886d26_0.jpg","width":2752,"height":1536,"caption":"fastapi react rag app"},{"@type":"BreadcrumbList","@id":"https:\/\/digitwaves.com\/index.php\/fastapi-react-rag-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digitwaves.com\/"},{"@type":"ListItem","position":2,"name":"Build a FastAPI Layer for Your RAG System (LangGraph + Pinecone API Guide)"}]},{"@type":"WebSite","@id":"https:\/\/digitwaves.com\/#website","url":"https:\/\/digitwaves.com\/","name":"Digit Waves","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digitwaves.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/digitwaves.com\/#\/schema\/person\/223d018061f352913b760bf9b09a8097","name":"cmartin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2aa893c0e8a64727fc5308b3b422801ee1f800294e70ee6ac57fd6b86a104eb2?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2aa893c0e8a64727fc5308b3b422801ee1f800294e70ee6ac57fd6b86a104eb2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2aa893c0e8a64727fc5308b3b422801ee1f800294e70ee6ac57fd6b86a104eb2?s=96&d=mm&r=g","caption":"cmartin"},"sameAs":["http:\/\/digitwaves.com"],"url":"https:\/\/digitwaves.com\/index.php\/author\/cmartin\/"}]}},"_links":{"self":[{"href":"https:\/\/digitwaves.com\/index.php\/wp-json\/wp\/v2\/posts\/1491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitwaves.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitwaves.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitwaves.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitwaves.com\/index.php\/wp-json\/wp\/v2\/comments?post=1491"}],"version-history":[{"count":38,"href":"https:\/\/digitwaves.com\/index.php\/wp-json\/wp\/v2\/posts\/1491\/revisions"}],"predecessor-version":[{"id":1544,"href":"https:\/\/digitwaves.com\/index.php\/wp-json\/wp\/v2\/posts\/1491\/revisions\/1544"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digitwaves.com\/index.php\/wp-json\/wp\/v2\/media\/1493"}],"wp:attachment":[{"href":"https:\/\/digitwaves.com\/index.php\/wp-json\/wp\/v2\/media?parent=1491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitwaves.com\/index.php\/wp-json\/wp\/v2\/categories?post=1491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitwaves.com\/index.php\/wp-json\/wp\/v2\/tags?post=1491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}