### React Native Setup for YourGPT Chatbot SDK

Source: https://context7.com/yourgpt/docs/llms.txt

Guides the setup process for integrating the YourGPT chatbot SDK into a React Native project. It includes installing necessary npm packages (@yourgpt/chatbot-reactnative and react-native-webview) and performing the iOS pod install. This enables cross-platform mobile chatbot functionality.

```bash
# Install packages
npm i @yourgpt/chatbot-reactnative
npm i react-native-webview

# iOS setup
cd ios && pod install
```

--------------------------------

### Links to YourGPT Agent Training Resources

Source: https://github.com/yourgpt/docs/blob/main/chatbot/docs/getting-started/setup.md

Directs users to guides and resources for training their AI agent. This includes general training guides and specific information on available training data sources.

```HTML
<Card title="Training Guide" href="/chatbot/training/guide" />
<Card title="Training Sources" href="/chatbot/training/sources" />
```

--------------------------------

### Setup and Build Project with npm

Source: https://github.com/yourgpt/docs/blob/main/chatbot/developer-guide/web-sdks/npm-package.md

Instructions for setting up the development environment by cloning the repository, installing dependencies, and building the project. This process ensures all necessary files are prepared for development and testing.

```bash
git clone https://github.com/YourGPT/web-sdk
cd web-sdk
npm install
npm run build
```

--------------------------------

### Embed YourGPT Setup Tour Video

Source: https://github.com/yourgpt/docs/blob/main/chatbot/docs/getting-started/setup.md

Embeds an instructional video tour for setting up YourGPT AI agents. This uses an iframe to display the video content, allowing users to follow along with the setup process visually. Ensure the iframe `src` points to a valid video URL.

```HTML
<div style="
  position: 'relative',
  paddingBottom: '56.25%',
  height: 0,
  overflow: 'hidden',
  borderRadius: '8px'
">
  <iframe
    style="
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      border: 0
    "
    src="https://guide.yourgpt.ai/e/clyrji3q60048ld0c5bxwz3rj/tour"
    title="YourGPT Setup Tour"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowFullScreen
  />
</div>
```

--------------------------------

### Sample Support Agent Instructions for YourGPT AI

Source: https://github.com/yourgpt/docs/blob/main/chatbot/docs/getting-started/best-practices.md

Provides a comprehensive example of instructions for an AI customer support assistant. This includes defining the agent's persona, guidelines for communication, availability, user information handling, and example responses. It aims to guide the AI to provide accurate, empathetic, and well-formatted support.

```text
You are AI Customer Support Assistant for Acme. Your role is to help users with Acme-related questions, troubleshoot issues, and guide them in a clear, friendly, and professional way — always aiming to feel like a top-tier human support agent.  

**Guidelines**  

- Communicate in a warm, empathetic, conversational tone  
- Keep answers concise (under 30 words) by default; expand only if the user asks or when needed for clarity  
- Never guess; if information is missing, politely ask for details (e.g., error message, steps taken, screenshot)  
- Confirm understanding with the user and avoid repetition  
- Never repeat the same response multiple times  
- If a question is outside Acme scope, politely decline in max 2 sentences and steer back to Acme topics  
- Share relevant links in Markdown only when directly useful or requested  
- Use clear Markdown formatting for lists and links  

---

**Availability**  
Support hours: Monday–Friday, 10 am–8 pm IST  
Current time: {{date format='dddd, MMMM Do YYYY, h:mm:ss a' timezone='Asia/Calcutta'}}  

---

**User Information**  
{{#isset CONTACT.name}}  
Name: {{CONTACT.name}}  
{{/isset}}  

---

**Examples**  

- If missing details:  
> I understand this is frustrating. Could you please share the exact error message or describe what you see?  

- Team not available:  
> Our team is currently unavailable. They'll be back during our support hours: [Support hour]. But I'm here to help you!

**Goal**  
Provide accurate, empathetic, and well-formatted support that makes every Acme user feel heard and helped like from a customer support agent.
```

--------------------------------

### JavaScript - Migrate from Script Integration

Source: https://github.com/yourgpt/docs/blob/main/llms-full.txt

Demonstrates the migration from an older script-based integration to the modern YourGPT Web SDK using JavaScript. Shows how to initialize the SDK, get an instance, and set up event listeners.

```javascript
await YourGPT.init({ widgetId: "your-widget-id" });
const sdk = YourGPT.getInstance();
sdk.open();
sdk.onMessageReceived(handleMessage);
```

--------------------------------

### Link to YourGPT AI Studio

Source: https://github.com/yourgpt/docs/blob/main/chatbot/docs/getting-started/setup.md

Navigates users to the AI Studio, a tool for advanced agent configuration, including building structured flows, connecting tools, and designing complex behaviors.

```HTML
<Card title="AI Studio" href="/chatbot/studio/elements" />
```

--------------------------------

### Install WebView Dependency for React Native

Source: https://github.com/yourgpt/docs/blob/main/llms-full.txt

Installs the `react-native-webview` package, which is a required dependency for the YourGPT Chatbot SDK in React Native projects. Detailed installation instructions can be found in the `react-native-webview` documentation.

```bash
$ npm install react-native-webview
```

--------------------------------

### React - Class Component Example (Before Hooks)

Source: https://github.com/yourgpt/docs/blob/main/llms-full.txt

An example of a React class component that interacts with the YourGPT chatbot. This demonstrates the older pattern of using `componentDidMount` to trigger widget actions.

```javascript
class ChatComponent extends React.Component {
  componentDidMount() {
    window.YourGPTChatbot.execute("widget:open");
  }
  
  render() {
    return <div>Chat Widget</div>;
  }
}
```

--------------------------------

### Set up and Use YourGPT Widget in React

Source: https://github.com/yourgpt/docs/blob/main/chatbot/developer-guide/web-sdks/npm-package.md

This example shows how to initialize the YourGPT SDK in a React application's main file and then use custom hooks (`useYourGPTChatbot`, `useAIActions`) within components to control the widget and register custom AI actions. It assumes the SDK is installed and initialized globally.

```javascript
// Initialize in your main app file (main.tsx or App.tsx)
YourGPT.init({
  widgetId: "your-widget-id",
});

// Use in your React components
function ChatButton() {
  const chatbot = useYourGPTChatbot(); // Hook to control the widget
  const aiActions = useAIActions(); // Hook to manage AI actions

  // Register custom AI actions that your chatbot can trigger
  useEffect(() => {
    aiActions.registerAction("get_location", async (data, helpers) => {
      // Ask user for permission to access location
      const confirmed = await helpers.confirm({
        title: "Location Access",
        description: "Allow location access?",
      });
      
      if (confirmed) {
        // Get user's location and respond to the chatbot
        helpers.respond("Location: 40.7128, -74.0060");
      }
    });
  }, [aiActions]);

  return (
    <div>
      <button onClick={chatbot.open}>Open Chat</button>
      <p>Status: {chatbot.isConnected ? "Connected" : "Disconnected"}</p>
    </div>
  );
}
```

--------------------------------

### HTML - Old Script Integration Example

Source: https://github.com/yourgpt/docs/blob/main/llms-full.txt

An example of the legacy script-based integration for the YourGPT chatbot widget. This shows how to embed the script and interact with the chatbot using global methods.

```html
<script src="/script.js" id="yourgpt-chatbot" widget="your-widget-id"></script>
<script>
  window.YourGPTChatbot.execute("widget:open");
  window.YourGPTChatbot.on("message:received", handleMessage);
</script>
```

--------------------------------

### Install YourGPT Web SDK using npm

Source: https://github.com/yourgpt/docs/blob/main/chatbot/developer-guide/web-sdks/npm-package.md

This command installs the YourGPT Web SDK package from npm, making it available for use in your project. Ensure you have Node.js and npm installed.

```bash
npm install @yourgpt/widget-web-sdk
```

--------------------------------

### Manual Condition: Combining Expressions with OR Logic

Source: https://github.com/yourgpt/docs/blob/main/llms-full.txt

Provides an example of a Manual Condition that uses a 'Logic Group' with 'OR' operators to check if a variable meets either of two specified criteria.

```json
{
  "name": "Check Payment Status",
  "expressions": [
    {
      "logicGroup": "OR",
      "expressions": [
        {
          "variableType": "PAYMENT.status",
          "operator": "Equals to",
          "value": "pending"
        },
        {
          "variableType": "PAYMENT.status",
          "operator": "Equals to",
          "value": "processing"
        }
      ]
    }
  ]
}
```

--------------------------------

### GET /v3/wx/conditions/current - Weather API

Source: https://github.com/yourgpt/docs/blob/main/llms-full.txt

Retrieves the current weather information based on longitude and latitude.

```APIDOC
## GET https://api.weather.com/v3/wx/conditions/current

### Description
Retrieves the current weather information based on longitude and latitude.

### Method
GET

### Endpoint
https://api.weather.com/v3/wx/conditions/current

### Parameters
#### Query Parameters
- **longitude** (string) - Required - The longitude coordinate.
- **latitude** (string) - Required - The latitude coordinate.

#### Headers
- **Authorization** (string) - Required - Bearer YOUR_API_KEY

### Request Example
```json
{
  "longitude": "-74.0060",
  "latitude": "40.7128"
}
```

### Response
#### Success Response (200)
- **temperature** (number) - The current temperature.
- **condition** (string) - The current weather condition (e.g., "Clear", "Cloudy").
- **location** (string) - The name of the location.

#### Response Example
```json
{
  "temperature": 72,
  "condition": "Clear",
  "location": "New York"
}
```
```

--------------------------------

### Run Test Suite with npm

Source: https://github.com/yourgpt/docs/blob/main/chatbot/developer-guide/web-sdks/npm-package.md

Commands to execute the test suite using npm. Includes options for running all tests, in watch mode, or with coverage reporting. These commands are essential for verifying the SDK's functionality and ensuring code quality.

```bash
npm test               # Run all tests
npm run test:watch     # Run tests in watch mode
npm run test:coverage  # Run tests with coverage report
```

--------------------------------

### Using Variables in AI Conditions (Example)

Source: https://github.com/yourgpt/docs/blob/main/llms-full.txt

Demonstrates how to use variables within an AI Condition's 'Input' context type. This allows the AI to analyze custom logic and provided variable values to determine the conversation path.

```json
{
  "context": {
    "type": "Input",
    "value": "{{FLOW.custom_variable}}"
  }
}
```

--------------------------------

### Available npm Scripts for Development

Source: https://github.com/yourgpt/docs/blob/main/chatbot/developer-guide/web-sdks/npm-package.md

A list of npm scripts available for various development tasks. These scripts automate common operations like building packages, running in development mode, serving examples, type checking, linting, and cleaning build artifacts.

```bash
npm run build              # Build both core and React packages
npm run build:core         # Build core SDK only
npm run build:react        # Build React package only
npm run dev                # Development mode with watch
npm run dev:examples       # Build and serve examples
npm run serve              # Serve examples on port 3000
npm run type-check         # TypeScript type checking
npm run lint               # Strict code linting
npm run lint:fix           # Fix strict issues
npm run test               # Run test suite
npm run clean              # Clear build artifacts
```

--------------------------------

### Manual Condition: Greater Than Operator

Source: https://github.com/yourgpt/docs/blob/main/llms-full.txt

Demonstrates setting up a Manual Condition to check if a numerical variable is greater than a specified value. This is useful for numerical comparisons.

```json
{
  "name": "Check User Age",
  "expressions": [
    {
      "variableType": "USER.age",
      "operator": "Greater than",
      "value": 18
    }
  ]
}
```

--------------------------------

### Initialize YourGPT SDK in Swift ViewController

Source: https://github.com/yourgpt/docs/blob/main/chatbot/developer-guide/mobile-sdks/ios-sdk.md

This Swift code demonstrates how to initialize the YourGPT SDK in a ViewController. It includes setting up UI elements, observing SDK state changes, and handling connection status updates. The initialization requires a widget UID and performs asynchronous operations, with error handling for potential exceptions. Dependencies include UIKit and YourGPTSDK.

```swift
import UIKit
import YourGPTSDK

@available(iOS 13.0, *)
class ViewController: UIViewController {
    
    @IBOutlet weak var statusLabel: UILabel?
    @IBOutlet weak var openChatButton: UIButton?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
        setupSDKObserver()
        initializeSDK()
    }
    
    private func setupUI() {
        title = "YourGPT iOS SDK Demo"
        view.backgroundColor = .systemBackground
        
        // Configure button
        openChatButton?.layer.cornerRadius = 8
        openChatButton?.isEnabled = false
        updateStatus("Initializing...")
    }
    
    private func setupSDKObserver() {
        YourGPTWrapper.shared.onStateChange = { [weak self] state in
            self?.updateUIForSDKState(state)
        }
    }
    
    private func initializeSDK() {
        Task {
            do {
                try await YourGPTWrapper.shared.initializeSDK(widgetUid: "your-widget-uid")
            } catch {
                await MainActor.run {
                    self.showAlert(title: "SDK Error", message: error.localizedDescription)
                }
            }
        }
    }
    
    private func updateUIForSDKState(_ state: YourGPTSDKState) {
        switch state.connectionState {
        case .connected:
            statusLabel?.textColor = .systemGreen
            openChatButton?.isEnabled = true
            updateStatus("Ready - SDK Connected!", color: .systemGreen)
        case .connecting:
            statusLabel?.textColor = .systemOrange
            openChatButton?.isEnabled = false
            updateStatus("Connecting...", color: .systemOrange)
        case .error:
            statusLabel?.textColor = .systemRed
            openChatButton?.isEnabled = false
            if let error = state.error {
                updateStatus("Error: \(error)", color: .systemRed)
            }
        case .disconnected:
            statusLabel?.textColor = .systemGray
            openChatButton?.isEnabled = false
            updateStatus("Disconnected", color: .systemGray)
        }
    }
    
    private func updateStatus(_ text: String, color: UIColor = .systemOrange) {
        statusLabel?.text = "SDK Status: \(text)"
        statusLabel?.textColor = color
    }
    
    @IBAction func openChatTapped(_ sender: UIButton? = nil) {
        YourGPTWrapper.shared.openChatbot(from: self, delegate: self)
    }
    
    private func showAlert(title: String, message: String) {
        let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        present(alert, animated: true)
    }
}
```

--------------------------------

### Install iOS Chatbot SDK with CocoaPods

Source: https://github.com/yourgpt/docs/blob/main/llms-full.txt

Add the YourGPT iOS SDK as a dependency to your project's Podfile using CocoaPods. Specify the desired version for integration.

```bash
$ pod 'YourGPTSDK', '~> 1.0'
```

--------------------------------

### Weather API Example

Source: https://github.com/yourgpt/docs/blob/main/chatbot/docs/studio/elements/advanced/api-calling.md

Example of configuring the API Call component to fetch current weather data.

```APIDOC
## GET /v1/current.json

### Description
Fetches the current weather conditions for a specified city.

### Method
GET

### Endpoint
`https://api.weatherapi.com/v1/current.json`

### Parameters

#### Query Parameters

- **q** (string) - Required - The city name to search for. Can be dynamically provided (e.g., `{{FLOW.City}}`).
- **key** (string) - Required - Your API key. This should be added as a header.

#### Headers

- **key** (string) - Required - Your API key.

### Request Example

*Note: The request body is typically empty for GET requests. Parameters are passed via URL or headers.*

```json
{
  "url": "https://api.weatherapi.com/v1/current.json",
  "queryParams": {
    "q": "{{FLOW.City}}"
  },
  "headers": {
    "key": "YOUR_API_KEY"
  }
}
```

### Response

#### Success Response (200)

- **location** (object) - Details about the location.
- **current** (object) - Current weather conditions.

#### Response Example

```json
{
  "location": {
    "name": "New York",
    "region": "New York",
    "country": "United States",
    "lat": 40.71,
    "lon": -74.01,
    "tz_id": "America/New_York",
    "localtime": "2023-10-27 10:30"
  },
  "current": {
    "temp_f": 65.0,
    "condition": {
      "text": "Partly cloudy",
      "icon": "//cdn.weatherapi.com/weather/64x64/day/116.png",
      "code": 1003
    },
    "wind_mph": 10.0,
    "humidity": 70
  }
}
```
```