Web App to iOS

Plaud’s iOS SDK can be used through a Capacitor plugin to turn any web app into an iOS native app!

The PlaudPlugin for Capacitor implements the basic methods for:

Connecting to Plaud Devices
Syncing audio files
Transcription

For advanced usage of the Embedded SDK methods for use cases like WiFi fast transfers, we recommend adding more methods to this plugin or using the native Embedded iOS SDK directly

Video Walkthrough

How it works

Capacitor is a runtime to run web apps on native platforms. It works by wrapping your web app in a native shell, while Capacitor’s bridge sends data from your web app to native features like iOS APIs and BLE.

┌──────────────────────────────────────────┐
│           Web App (JavaScript)           │
│               PlaudSdk                   │
└──────────────────▲───────────────────────┘
                   │
            Capacitor Bridge
          (JavaScript ↔ IPC)
                   │
┌──────────────────▼───────────────────────┐
│       PlaudPlugin (Swift/Native)         │
│    BLE, Files, iOS APIs, Events          │
└──────────────────────────────────────────┘

Capacitor plugins like the PlaudPlugin still use native swift code (built on top of the Embedded iOS SDK), but these plugins can be called and listened to using the Capacitor bridge.

Running the Demo App

The demo app is included in the Plaud Embedded plugin as reference for implementing the plugin in your own app and seeing how everything works.

Clone the Embedded Capacitor repo

git clone https://github.com/Plaud-AI/embedded-capacitor.git

Install dependencies and set up env vars

cd nextjs-demo
npm i

Build and open in XCode

npx cap sync ios
npx cap open ios

In XCode, make sure to include your Apple developer credentials and certificate.

Then run on a physical device to test out the demo app with your Plaud devices.

Setting Up Plaud Embedded’s Capacitor Plugin

The Plaud Embedded Capacitor Skill has all of the context in these docs so your agent can immediately start wrapping your web app into a native iOS app with Plaud Embedded.

npx skills add Plaud-AI/embedded-capacitor

Step 1: Clone our Embedded Capacitor Repo

git clone https://github.com/Plaud-AI/embedded-capacitor.git

This repo includes:

PlaudPlugin for Capacitor runtime
Typescript interfaces and utility functions for the PlaudPlugin
A sample app with a NextJS application using the Capacitor wrapper to work as a native iOS app
Plaud Capacitor Wrapper Skill for agents to implement the Plaud Plugin and the Capacitor runtime wrapper

Step 2: Setup Capacitor

npm i @capacitor/core @capacitor/ios @capacitor-community/bluetooth-le
npm i -D @capacitor/cli

Then initialize Capacitor to setup your Capacitor configs

npx cap init

Lastly, add ios to your capacitor project and sync your web app

npx cap add ios
npx cap sync ios

Step 3: Setup the PlaudPlugin

Copy the ios/PlaudPlugin/ framework and paste into the ios/ directory.

Copy the ios/App/App/MainViewController.swift into your ios/App/App directory to register the PlaudPlugin.Your ios/ directory should look like this:

ios/
├── App/
│   ├── App/
│   │   └── MainViewController.swift
└── PlaudPlugin/
    ├── Package.swift
    ├── Frameworks/ 
    │   ├── PlaudBleSDK.xcframework
    │   ├── PlaudDeviceBasicSDK.xcframework
    │   └── PlaudWiFiSDK.xcframework
    └── Sources/
        └── PlaudPlugin/
            └── PlaudSdkPlugin.swift

Link PlaudPlugin into the App target in Xcode.Open the project (npx cap open ios), then File -> Add Package Dependencies -> Add Local,Select ios/PlaudPlugin, and add the PlaudPlugin library product to the App target (the same way CapApp-SPM is already linked).

Add the Bluetooth entitlement in ios/App/App/Info.plist

<dict>
  <key>CFBundleDevelopmentRegion</key>
  <string>en</string>
  ...
  <key>NSBluetoothAlwaysUsageDescription</key>
  <string>Uses Bluetooth to connect and interact with peripheral BLE devices.</string>
  <key>UIBackgroundModes</key>
  <array>
    <string>bluetooth-central</string>
  </array>
</dict>

Lastly, point the native shell at your web app’s URL. Set this in the root capacitor.config.ts — that’s the source of truth.

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'ai.plaud.capacitordemo',
  appName: 'Plaud Capacitor Demo',
  // Required by Capacitor even when loading a remote URL; its contents are
  // ignored at runtime because `server.url` is set below.
  webDir: 'public',
  server: {
    // The native shell loads your deployed site and Capacitor injects the
    // native bridge, so the plugin can reach iOS CoreBluetooth.
    url: 'https://plaud-capacitor-demo.vercel.app',
    cleartext: false,
  },
};

export default config;

Start Using Plaud Embedded in Your “Web App”

With Capacitor, your web app can stay a web app AND be a native iOS app!

The key is to have mobile specific logic execute when your users are using a native mobile platform:

if (Capacitor.isNativePlatform()){
  //Plaud SDK Logic
}

Use plaud-sdk.ts as a convenient typescript interface for interacting with the native iOS Plaud SDK, and write logic for connecting to devices, exporting audio, and triggering transcriptions directly from your web app.

import { Capacitor, type PluginListenerHandle } from "@capacitor/core";
import {
  PlaudSdk,
  readExportedFile,
  type PlaudScanDevice,
  type PlaudFile,
} from "@/lib/plaud-sdk";

const handleConnect = async (d: PlaudScanDevice) => {
    setError(null);
    if (!ensureNative()) return;
    try {
      setStatus(`connecting to ${d.name || d.serialNumber}…`);
      await PlaudSdk.stopScan();
      setScanning(false);
      await PlaudSdk.connectBleDevice({ uuid: d.uuid, serialNumber: d.serialNumber });
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    }
  };

For the full list of relevant SDK methods for interacting with Plaud devices, see our iOS SDK reference.

Overview

Embedded SDK Reference

API Reference

Starter Apps & Guides

Resources

Video Walkthrough

How it works

Running the Demo App

Setting Up Plaud Embedded’s Capacitor Plugin

Step 1: Clone our Embedded Capacitor Repo

Step 2: Setup Capacitor

Step 3: Setup the PlaudPlugin

Start Using Plaud Embedded in Your “Web App”

​Video Walkthrough

​How it works

​Running the Demo App

​Setting Up Plaud Embedded’s Capacitor Plugin

​Step 1: Clone our Embedded Capacitor Repo

​Step 2: Setup Capacitor

​Step 3: Setup the PlaudPlugin

​Start Using Plaud Embedded in Your “Web App”

Video Walkthrough

How it works

Running the Demo App

Setting Up Plaud Embedded’s Capacitor Plugin

Step 1: Clone our Embedded Capacitor Repo

Step 2: Setup Capacitor

Step 3: Setup the PlaudPlugin

Start Using Plaud Embedded in Your “Web App”