Fastn AI React Core Example

🚀 Quick Start: Clone, install, configure, and run in minutes!

A production-ready example app using Fastn AI React Core with TypeScript, Tailwind CSS, and modern React patterns.

✨ Features

• 🔗 Connectors Management - Manage your Fastn AI connectors
• ⚙️ Configurations - Handle subscriptions and configurations
• 🎨 Modern UI - Clean, accessible interface with Tailwind CSS
• 🔒 Type Safe - Full TypeScript support
• ⚡ Fast Development - Hot reload with Vite

🚀 Quick Start (5 minutes)

1. Prerequisites

Make sure you have:

• Node.js (v18 or higher)
• npm (v9 or higher)

Check your versions:

node --version
npm --version

2. Get the Code

git clone https://github.com/fastnai/react-core-client.git
cd react-core-client

3. Install Dependencies

npm install

4. Configure Your Credentials

Open src/App.tsx and replace the placeholder values:

Note: This app uses Fastn custom authentication. Make sure your auth token is compatible with Fastn's custom auth system.

<FastnProvider
  config={{
    spaceId: "your-space-id-here",        // ← Replace with your space ID
    tenantId: "your-tenant-id-here",      // ← Replace with your tenant ID  
    authToken: "your-auth-token-here",    // ← Replace with your auth token
    customAuth: true,                     // ← Keep this as true for custom auth
  }}
  queryClient={queryClient}
>

Where to get your credentials:

• Space ID: Found in your Fastn AI dashboard or provided by your administrator
• Tenant ID: Your organization or user identifier in Fastn AI
• Auth Token: Your application authentication token (must be compatible with Fastn custom auth)
• Contact your Fastn AI administrator if you don't have these credentials

5. Start the App

npm run dev

🎉 Done! Your app is running at http://localhost:5173

---

📋 Detailed Setup

What You Need

• Fastn AI Account with access to:
  • Space ID (looks like: 26b22534-cd25-44dc-90e8-e1afd0a415f4)
  • Tenant ID (your organization or user identifier)
  • Auth Token (your application auth token that can be authenticated by fastn using fastn custom auth)

Step-by-Step Instructions

Step 1: Environment Setup

# Check Node.js version (should be 18+)
node --version

# Check npm version (should be 9+)
npm --version

Step 2: Project Setup

# Clone the repository
git clone https://github.com/fastnai/react-core-client.git

# Navigate to project directory
cd react-core-client

# Install all dependencies
npm install

Step 3: Configuration

1. Open src/App.tsx in your code editor
2. Find the FastnProvider component (around line 30)
3. Replace the configuration values:

// Before (example values)
spaceId: "26b22534-cd25-44dc-90e8-e1afd0a415f4",
tenantId: "sarmadfastn",
authToken: "this-is-a-test-auth-token",

// After (your real values)
spaceId: "your-actual-space-id",
tenantId: "your-actual-tenant-id", 
authToken: "your-actual-auth-token",

Step 4: Run the Application

# Start development server
npm run dev

The app will open automatically in your browser at http://localhost:5173

---

🛠️ Available Commands

Command	What it does
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Check code quality

---

📁 Project Structure

src/
├── components/          # All UI components
│   ├── ui/             # Reusable UI primitives
│   ├── connectors-list.tsx    # Connectors management
│   └── configurations-list.tsx # Configurations management
├── lib/                # Utility functions
├── App.tsx            # Main app with FastnProvider
└── main.tsx           # App entry point

---

🔧 Troubleshooting

Common Issues & Solutions

❌ "Port 5173 is already in use"

Solution: The app will automatically use the next available port. Check your terminal for the new URL.

❌ "Authentication failed"

Solution:

1. Double-check your spaceId, tenantId, and authToken
2. Ensure your credentials are valid and not expired
3. Contact your Fastn AI administrator

❌ "Module not found" errors

Solution:

# Reinstall dependencies
rm -rf node_modules package-lock.json
npm install

❌ "TypeScript errors"

Solution:

1. Make sure you're using Node.js v18+
2. Check that all dependencies are installed
3. Restart your development server

Still Having Issues?

1. Check the console for specific error messages
2. Verify your credentials are correct
3. Try a fresh install:

   rm -rf node_modules package-lock.json
   npm install

4. Contact support with your error details

---

📚 What's Inside

Key Components

• ConnectorsList - View and manage your Fastn AI connectors
• ConfigurationsList - Handle configurations and subscriptions
• TabNavigation - Switch between different sections
• FastnProvider - Provides Fastn AI context and authentication

Technologies Used

• React 18 - Modern React with hooks
• TypeScript - Type safety throughout
• Tailwind CSS - Utility-first styling
• Vite - Fast build tool and dev server
• Fastn AI SDK - Official Fastn AI React libraries

---

🎯 Next Steps

Once your app is running:

1. Explore the UI - Navigate between Connectors and Configurations tabs
2. Test functionality - Try creating and managing connectors
3. Customize - Modify components to fit your needs
4. Deploy - Build and deploy to your hosting platform

---

📄 License

MIT License - feel free to use this code in your projects!

---

Need help? Check the troubleshooting section above or reach out to the Fastn AI team.