Frontend SDKs Overview

​

Available Frontend SDKs

​

Getting Started

​

Prerequisites

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

​

Installation

# 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

# 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

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

​

Integration Button

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

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

<suada-integration-button
  [provider]="'notion'"
  [redirectUri]="'https://your-app.com/callback'"
  (success)="handleSuccess($event)"
  (error)="handleError($event)">
  Connect Notion
</suada-integration-button>

<SuadaIntegrationButton
  provider="notion"
  redirect-uri="https://your-app.com/callback"
  @success="handleSuccess"
  @error="handleError"
>
  Connect Notion
</SuadaIntegrationButton>

​

Integration List

<IntegrationList
  filter={{ provider: 'notion' }}
  layout="grid"
  onSelect={handleSelect}
  onDelete={handleDelete}
/>

<IntegrationList
  filter={{ provider: 'notion' }}
  layout="grid"
  onSelect={handleSelect}
  onDelete={handleDelete}
/>

<suada-integration-list
  [filter]="{ provider: 'notion' }"
  [layout]="'grid'"
  (select)="handleSelect($event)"
  (delete)="handleDelete($event)">
</suada-integration-list>

<SuadaIntegrationList
  :filter="{ provider: 'notion' }"
  layout="grid"
  @select="handleSelect"
  @delete="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

• API Reference

​

Support

• Email Support: hello@suada.ai