Suada provides official frontend SDKs with pre-built UI components to help you quickly add integration management to your applications. Choose the SDK that matches your frontend framework:

​
Available Frontend SDKs

React SDK

Modern React components with hooks and TypeScript support
  • React 18+ support
  • Custom hooks for state management
  • Styled components integration
  • LangChain integration

Next.js SDK

Server-side rendering and App Router support
  • Next.js 13+ support
  • Server Components
  • API route handlers
  • Tailwind CSS integration

Angular SDK

Enterprise-ready Angular components and services
  • Angular 17.3+ support
  • Injectable services
  • Standalone components
  • TypeScript support

Vue SDK

Vue 3 components with composables
  • Vue 3.0+ support
  • Composition API
  • TypeScript support
  • Vite integration

React Native SDK

Native mobile components for iOS and Android
  • React Native 0.73+ support
  • Deep linking support
  • Native UI components
  • Expo compatibility

Vanilla JS SDK

Framework-agnostic JavaScript implementation
  • No framework dependencies
  • Modern browser support
  • CDN availability
  • UMD/ESM formats

​
Getting Started

​
Prerequisites

Before you begin, ensure you have:
  • A Suada API key
  • Node.js 16.0.0 or higher
  • A modern web browser
  • Your preferred package manager (npm, yarn, or pnpm)

​
Installation

Choose your preferred SDK and install it: 
# React
npm install @suada/react @suada/core

# Next.js
npm install @suada/next @suada/core

# Angular
npm install @suada/angular @suada/core

# Vue
npm install @suada/vue @suada/core

# React Native
npm install @suada/react-native @suada/core

# Vanilla JS
npm install @suada/vanilla @suada/core

​
Environment Setup

Set up your environment variables based on your framework: 
# React/Vue/Angular
VITE_SUADA_API_KEY=your-api-key
VITE_SUADA_BASE_URL=https://api.suada.ai

# Next.js
NEXT_PUBLIC_SUADA_API_KEY=your-api-key
NEXT_PUBLIC_SUADA_BASE_URL=https://api.suada.ai

# React Native
SUADA_API_KEY=your-api-key
SUADA_BASE_URL=https://api.suada.ai

​
Core Features

​
🔒 OAuth Integration Flow

The SDKs provide a seamless OAuth integration experience:
OAuth Integration Flow
  1. Initialize Connection
    • User clicks connect button
    • SDK handles OAuth redirect
    • Secure token exchange
  2. Authorization
    • User authenticates with provider
    • Secure callback handling
    • Token management
  3. Integration Complete
    • Success confirmation
    • Ready to use

​
🎨 UI Components

All SDKs provide these core components:

​
Integration Button

A customizable button for connecting services: 
<IntegrationButton
  provider="notion"
  redirectUri="https://your-app.com/callback"
  onSuccess={handleSuccess}
  onError={handleError}
>
  Connect Notion
</IntegrationButton>

​
Integration List

Display and manage connected integrations: 
<IntegrationList
  filter={{ provider: 'notion' }}
  layout="grid"
  onSelect={handleSelect}
  onDelete={handleDelete}
/>

​
Best Practices

​
Security

  • Store API keys in environment variables
  • Use HTTPS for all API calls
  • Implement proper error handling
  • Secure OAuth callback endpoints
  • Validate user sessions

​
Performance

  • Lazy load components
  • Implement proper cleanup
  • Handle offline scenarios
  • Optimize network requests
  • Use proper caching

​
Development

  • Use TypeScript for type safety
  • Follow framework best practices
  • Write unit tests
  • Keep dependencies updated
  • Use proper error boundaries

​
Common Use Cases

​
Basic Integration Setup

  1. Install SDK 
    npm install @suada/react @suada/core
  2. Configure Provider 
    import { SuadaProvider } from '@suada/react';

function App() {
  return (
    <SuadaProvider config={{
      apiKey: process.env.SUADA_API_KEY
    }}>
      <YourApp />
    </SuadaProvider>
  );
}
  3. Add Components 
    <IntegrationButton provider="notion" />

​
Framework-Specific Features

​
Next.js

  • Server Components support
  • API route handlers
  • App Router compatibility
  • Tailwind CSS integration

​
React

  • Custom hooks
  • Context API integration
  • Styled components
  • LangChain support

​
Angular

  • Injectable services
  • Standalone components
  • Dependency injection
  • RxJS integration

​
Vue

  • Composition API
  • Vite integration
  • Vue Router support
  • Pinia integration

​
React Native

  • Native UI components
  • Deep linking
  • Platform-specific optimizations
  • Expo compatibility

​
FAQ

​
How do I handle OAuth callbacks?

  1. Set up your callback URL in the Suada dashboard
  2. Configure the redirect URI in your component
  3. Handle the callback in your application
// Example callback handler
const handleCallback = async (code: string) => {
  try {
    await suada.handleOAuthCallback(code);
    // Handle success
  } catch (error) {
    // Handle error
  }
};

​
How do I debug integration issues?

  1. Enable debug mode
  2. Check network requests
  3. Validate OAuth flow
// Enable debug mode
const suada = new Suada({
  debug: true,
  logger: console.log
});

​
How do I handle offline scenarios?

  1. Implement proper error handling
  2. Use retry mechanisms
  3. Cache responses
// Example offline handling
const handleRequest = async () => {
  try {
    return await suada.request();
  } catch (error) {
    if (error.code === 'OFFLINE') {
      // Handle offline scenario
    }
  }
};

​
Support & Resources

​
Documentation

​
Support