> ## Documentation Index
> Fetch the complete documentation index at: https://docs.suada.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# SDKs Overview

> Choose the right SDK for your tech stack and get started with Suada

Suada provides official SDKs for multiple platforms and frameworks to help you integrate business analytics into your applications. Choose the SDK that best matches your tech stack:

## Available SDKs

### Frontend SDKs

<CardGroup cols={2}>
  <Card title="React SDK" icon="react" href="/sdks/react">
    Build interactive analytics interfaces in React applications

    <ul className="mt-2">
      <li>React 18+ support</li>
      <li>Custom hooks</li>
      <li>LangChain integration</li>
    </ul>
  </Card>

  <Card title="Next.js SDK" icon={<img src="/images/nextjs.svg" />} href="/sdks/next">
    Server-side rendering and App Router support

    <ul className="mt-2">
      <li>Next.js 13+ support</li>
      <li>Server Components</li>
      <li>API route handlers</li>
    </ul>
  </Card>

  <Card title="Angular SDK" icon="angular" href="/sdks/angular">
    Create powerful analytics components in Angular applications

    <ul className="mt-2">
      <li>Angular 17.3+ support</li>
      <li>Injectable services</li>
      <li>Standalone components</li>
    </ul>
  </Card>

  <Card title="Vue SDK" icon="vuejs" href="/sdks/vue">
    Integrate analytics seamlessly in Vue 3 applications

    <ul className="mt-2">
      <li>Vue 3.0+ support</li>
      <li>Composition API</li>
      <li>Vite integration</li>
    </ul>
  </Card>

  <Card title="React Native SDK" icon="mobile" href="/sdks/react-native">
    Add analytics to your iOS and Android applications

    <ul className="mt-2">
      <li>React Native 0.73+ support</li>
      <li>Native components</li>
      <li>Deep linking</li>
    </ul>
  </Card>

  <Card title="Vanilla JavaScript SDK" icon="js" href="/sdks/vanilla">
    Use Suada with plain JavaScript or any web framework

    <ul className="mt-2">
      <li>Framework agnostic</li>
      <li>CDN support</li>
      <li>UMD/ESM formats</li>
    </ul>
  </Card>
</CardGroup>

### Backend SDKs

<CardGroup cols={2}>
  <Card title="Node.js SDK" icon="node-js" href="/sdks/node">
    Integrate with Node.js applications and LangChain agents

    <ul className="mt-2">
      <li>Node.js 18+ support</li>
      <li>LangChain integration</li>
      <li>TypeScript support</li>
    </ul>
  </Card>

  <Card title="Python SDK" icon="python" href="/sdks/python">
    Build analytics solutions with Python and LangChain

    <ul className="mt-2">
      <li>Python 3.8+ support</li>
      <li>LangChain integration</li>
      <li>Type hints</li>
    </ul>
  </Card>
</CardGroup>

## Quick Comparison

Choose the right SDK based on your needs:

| SDK          | Best For                        | Key Features                                 | Requirements       |
| ------------ | ------------------------------- | -------------------------------------------- | ------------------ |
| React        | Web applications using React    | Component library, hooks, TypeScript support | React 18+          |
| Next.js      | Server-side rendered React apps | Server Components, API routes, App Router    | Next.js 13+        |
| Angular      | Enterprise Angular applications | Injectable services, components, TypeScript  | Angular 17.3+      |
| Vue          | Vue.js applications             | Composables, components, TypeScript          | Vue 3.0+           |
| React Native | Mobile applications             | Native components, deep linking support      | React Native 0.73+ |
| Vanilla JS   | Any web application             | Framework agnostic, CDN support              | Modern browsers    |
| Node.js      | Backend services, LangChain     | LangChain integration, async support         | Node.js 18+        |
| Python       | Data analysis, LangChain        | LangChain integration, type hints            | Python 3.8+        |

## Core Features

### 🔒 OAuth Integration

All SDKs provide secure OAuth integration:

<Frame>
  <img src="https://mintcdn.com/suada/Z5N2Gi_GHKmDYt5h/images/oauth-preview.png?fit=max&auto=format&n=Z5N2Gi_GHKmDYt5h&q=85&s=12d8fcb91a2c8c8922fc3b0cf0fe5d9c" alt="OAuth Integration Flow" width="3678" height="2758" data-path="images/oauth-preview.png" />
</Frame>

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

### 🛠️ Common Features

All SDKs share these core features:

* **Type Safety**: Built-in TypeScript/type hints support
* **Error Handling**: Comprehensive error types and handling
* **API Consistency**: Similar patterns across all SDKs
* **LangChain Support**: Integration with LangChain (Node.js and Python)
* **Passthrough Mode**: Support for using with external user identifiers

## Getting Started

### Prerequisites

Before you begin, ensure you have:

* A Suada API key
* Node.js 16.0.0 or higher (for JavaScript/TypeScript SDKs)
* Python 3.8+ (for Python SDK)
* Your preferred package manager

### Installation

Each SDK can be installed via its respective package manager:

<CodeGroup>
  ```bash npm theme={null}
  # React/Next.js/Angular/Vue/React Native/Node.js
  npm install @suada/[sdk-name] @suada/core
  ```

  ```bash pip theme={null}
  # Python
  pip install suada
  ```
</CodeGroup>

### Environment Setup

Set up your environment variables based on your framework:

```env theme={null}
# 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

# Node.js/Python
SUADA_API_KEY=your-api-key
SUADA_BASE_URL=https://api.suada.ai
```

### Basic Integration

1. **Install SDK**
   ```bash theme={null}
   npm install @suada/react @suada/core
   ```

2. **Configure Provider**
   ```typescript theme={null}
   import { SuadaProvider } from '@suada/react';

   function App() {
     return (
       <SuadaProvider config={{
         apiKey: process.env.SUADA_API_KEY
       }}>
         <YourApp />
       </SuadaProvider>
     );
   }
   ```

3. **Add Components**
   ```jsx theme={null}
   <IntegrationButton provider="notion" />
   ```

## 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

* Initialize SDK instances once and reuse them
* Implement proper cleanup
* Handle offline scenarios
* Optimize network requests
* Use proper caching

### Development

* Use TypeScript/type hints when available
* Follow framework best practices
* Write unit tests
* Keep dependencies updated
* Use proper error boundaries

## 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

```typescript theme={null}
// Example callback handler
const handleCallback = async (code: string) => {
  try {
    await suada.handleOAuthCallback(code);
    // Handle success
  } catch (error) {
    // Handle error
  }
};
```

### How do I manage user sessions?

1. Use the built-in session management
2. Implement proper cleanup
3. Handle token refresh

```typescript theme={null}
// Example session management
const { session, refreshToken } = useSession();

// Refresh token when needed
await refreshToken();
```

### How do I debug integration issues?

1. Enable debug mode
2. Check network requests
3. Validate OAuth flow

```typescript theme={null}
// 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

```typescript theme={null}
// 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](/api-reference)
* [Component Library](/components)
* [Integration Guides](/guides)
* [Framework Best Practices](/best-practices)
* [Performance Guide](/performance)

### Support

* Email Support: [hello@suada.ai](mailto:hello@suada.ai)