fashn-logo

FASHNAI

Back to Blog

How to Integrate FASHN SDK into Your React Router Application

Learn to integrate FASHN SDK with React Router v7. This step-by-step tutorial covers SDK installation, secure API key management, server action implementation, and working with FASHN's async generation API, complete with production-ready code examples.

Renan FerreiraAuthor
October 30, 2025
How to Integrate FASHN SDK into Your React Router Application cover image

React Router powers millions of web applications, from indie projects to enterprise platforms. It's the go-to framework for building Shopify apps, making it an ideal choice for e-commerce developers looking to add cutting-edge features like virtual try-on.

In this guide, you'll learn how to integrate the FASHN SDK into a React Router application. We'll build a complete virtual try-on feature that lets customers visualize garments on models in real-time, a game-changer for online fashion retailers.

What you'll build: A production-ready web application that displays model and garment images, then generates photorealistic try-on results showing the model wearing the selected garment.

Tech stack: React Router v7, TypeScript, and the FASHN SDK.

By the end of this tutorial, you'll have a solid foundation for adding FASHN's AI-powered virtual try-on to your e-commerce applications and Shopify apps.

Prerequisites

Before diving in, you'll need a FASHN API key to authenticate your requests. Getting started is straightforward:

  1. Head to the Developer API dashboard and click "Create new API key"
  2. Copy your key immediately, it's only shown once
  3. Store it securely (use a password manager or your team's secrets vault)

Security note: API keys should always stay server-side. React Router's server actions make this easy. We'll configure your key as an environment variable that never touches the browser.

Step 1: Create Your React Router Project

Let's scaffold a new React Router application with all the modern tooling configured out of the box, Vite for lightning-fast builds, TypeScript for type safety, and Tailwind CSS for styling.

npx create-react-router@latest my-rr-fashn-app

cd my-rr-fashn-app

npm run dev

Visit http://localhost:5173 to confirm everything's running. You should see the React Router welcome screen.

Step 2: Add the FASHN SDK

The FASHN TypeScript SDK eliminates boilerplate by handling authentication, polling, and error management automatically. It's built specifically for server-side environments, keeping your API credentials secure.

Install it with npm:

npm i fashn

Architecture note: The SDK must only be called from server actions or backend routes, never from client components. This server-side-only design is intentional and protects your API key from exposure.

Step 3: Set Up Environment Variables

Create a .env.local in your project root:

FASHN_API_KEY=your_api_key_here

Replace your_api_key_here with your actual key.

Important reminders:

  • Restart your dev server after adding environment variables
  • Verify .env.local is in your .gitignore (it should be by default)
  • Never commit API keys to version control

Step 4: Create the Try-On Interface

Now for the fun part: building the UI. We'll create a clean interface that showcases the before and after, making the virtual try-on transformation clear to users.

Replace the contents of app/routes/home.tsx with this code:

This interface includes:

  • Side-by-side layout showing the original garment and model
  • One-click generation with a clear call-to-action button
  • Real-time feedback through loading states
  • Results display that highlights the transformation

Step 5: Implement the Server Action

Create app/actions.ts to handle the FASHN SDK integration:

How it works:

  • Initializes the FASHN client with your API key from the environment
  • Calls the subscribe method, which creates a generation job using the tryon-v1.6 model and automatically polls until the result is ready
  • Returns the final image URL to display in your UI
  • Handles errors gracefully, providing meaningful feedback if something goes wrong

The subscribe method is the secret sauce here. It turns a complex async workflow into a single awaitable function call.

Step 6: Test Your Integration

With everything wired up, let's see the result:

  • Restart your dev server (npm run dev)
  • Open http://localhost:5173
  • Review the pre-selected model and garment images
  • Click "Virtual Try-On"
  • Watch as the AI generates a photorealistic result

The entire process typically takes 5-15 seconds. The FASHN SDK manages everything behind the scenes, job creation, status polling, and result retrieval.

Taking It Further

You've built a working virtual try-on feature! This tutorial uses pre-selected images for simplicity, but for production you would typically need:

  • User management - Track usage, prevent abuse, and implement rate limiting
  • File upload - Let customers upload their own photos or choose from a catalog
  • Image preprocessing - Validate dimensions, format, and quality before processing
  • Enhanced UX - User-friendly messages, retry logic and progress bars

Resources to Explore

Built something cool? Share it with the FASHN community or reach out to our team. We love seeing what developers create!

FASHN Blog | How to Integrate FASHN SDK into Your React Router Application