{"id":39775,"date":"2026-02-04T07:00:00","date_gmt":"2026-02-04T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=39775"},"modified":"2026-02-04T11:00:11","modified_gmt":"2026-02-04T19:00:11","slug":"auto-inclusive-web-tanstack-start-and-cloudinary-ai","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/auto-inclusive-web-tanstack-start-and-cloudinary-ai","title":{"rendered":"Architecting an Auto-Inclusive Web With TanStack Start and Cloudinary AI"},"content":{"rendered":"

GitHub Repository<\/strong><\/a> | Live Demo<\/strong><\/a><\/p>\n

Imagine a web where every image is instantly understandable to everyone, including the 2.2 billion people globally with vision impairments. This is a massive engineering challenge. Developers often view writing descriptive alt text as a manual chore that slows down release cycles.<\/p>\n

This platform solves that crisis by integrating accessibility into your workflow, rather than a manual, extra step. Powered by a high-performance TanStack Start foundation and Cloudinary AI v5, it generates, saves, and streams accessible metadata for every asset the moment it hits the pipeline.<\/p>\n

In this tutorial, you\u2019ll architect a self-healing accessibility system that:<\/p>\n

    \n
  1. Bootstraps a type-safe foundation using TanStack Start\u2019s full-stack framework.<\/li>\n
  2. Ingests assets via a professional Pipeline Entry Point using the Cloudinary Upload Widget.<\/li>\n
  3. Uses server-side scripts to commit AI captions to permanent storage.<\/li>\n
  4. Orchestrates metadata via type-safe server functions to deliver a WCAG-compliant gallery.<\/li>\n<\/ol>\n

    Bootstrapping the Full-Stack Foundation<\/h2>\n

    To build an autonomous pipeline, we\u2019ll first need a type-safe, full-stack environment.<\/p>\n

    We\u2019ll use TanStack Start<\/strong><\/a>, a framework that allows us to move heavy metadata orchestration to the server while keeping the UI responsive and inclusive.<\/p>\n

    Initializing TanStack Start<\/h3>\n

    We\u2019ll start by scaffolding the project using the official CLI.<\/p>\n

    This gives us a structured environment with built-in support for server functions and advanced routing.<\/p>\n

    # Create<\/span> a<\/span> new<\/span> project<\/span> with<\/span> React<\/span> and<\/span> TypeScript<\/span>\nnpm<\/span> create<\/span> @tanstack<\/span>\/start@latest<\/span> auto-inclusive-web\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
    After choosing the default options, install the core dependencies for Cloudinary integration.<\/p>\n
    npm install cloudinary\n<\/code><\/span><\/pre>\n
    The Document Shell: Global SDK Injection<\/h3>\n
    Because we\u2019ll build a professional ingestion point, we\u2019ll need the Cloudinary Upload Widget available globally.<\/p>\n
    We\u2019ll inject the script directly into the head<\/code> of our src\/routes\/__root.tsx<\/code> file.<\/p>\n
    This ensures that every page in our app has the power to deploy inclusive assets.<\/p>\n
    \/\/ src\/routes\/__root.tsx (snippet)<\/span>\n\nexport<\/span> const<\/span> Route = createRootRoute({\n  head<\/span>: ()<\/span> =><\/span> ({\n    scripts<\/span>: [\n      {\n        src<\/span>: 'https:\/\/upload-widget.cloudinary.com\/latest\/global\/all.js'<\/span>,\n        type<\/span>: 'text\/javascript'<\/span>,\n      },\n    ],\n  }),\n  shellComponent<\/span>: RootDocument,\n});\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Environment Topology<\/h3>\n
    Managing secrets is a critical \u201cgotcha\u201d in full-stack apps.<\/p>\n
    We\u2019ll split our environment variables into two categories.<\/p>\n