Warpway SDK

AI-powered actions and widgets for your website. Enable users to accomplish tasks through natural language.

The Warpway SDK enables you to add intelligent, AI-powered widgets to your website that help users accomplish tasks through natural language. It also provides developer tools for recording and testing user workflows.

Installation

Option 1: NPM (Recommended for bundled apps)

Install via npm:

npm install @warpway/sdk

Then import in your application:

// ES Module
import WarpwaySDK from '@warpway/sdk';

// CommonJS
const WarpwaySDK = require('@warpway/sdk');

Option 2: Script Tag (Recommended for static sites)

Add this script tag to your HTML:

<script
  async
  src="https://unpkg.com/@warpway/sdk@latest/dist/sdk.js"
  data-warp-site="YOUR_SITE_ID"
  data-warp-widget="on">
</script>

Or pin to a specific version:

<script
  async
  src="https://unpkg.com/@warpway/[email protected]/dist/sdk.js"
  data-warp-site="YOUR_SITE_ID"
  data-warp-widget="on">
</script>

Get your site ID from the Warpway dashboard.

Usage

Basic Setup

The SDK automatically initializes when loaded via script tag. For npm installations in modern frameworks:

import WarpwaySDK from '@warpway/sdk';

// SDK auto-initializes on import
// Access the instance via window.__warpway__ if needed

Configuration Options

Configure the SDK using data attributes (script tag) or programmatically:

Script Tag Configuration:

<script
  async
  src="https://unpkg.com/@warpway/sdk@latest/dist/sdk.js"
  data-warp-site="YOUR_SITE_ID"
  data-warp-dev="query:param:warpway=dev"
  data-warp-widget="on">
</script>

Data Attributes:

• data-warp-site - Your site ID from the Warpway dashboard
• data-warp-dev - Query param to enable dev mode (default: query:param:warpway=dev)
• data-warp-widget - Enable end-user widget: on or off (default: off)

Developer Mode

Add ?warpway=dev to your URL to activate the developer sidebar for recording user actions.

Press Alt+W (or ⌥+W on Mac) to toggle the sidebar open/close.

Programmatic API

Access the SDK instance for programmatic control:

// Access the global instance
const warpway = window.__warpway__;

// Open the widget
warpway.openWidget();

// Close the widget
warpway.closeWidget();

// Toggle the widget
warpway.toggleWidget();

// Get current configuration
const config = warpway.getConfig();

Features

• AI-powered widget for end users to accomplish tasks
• Developer mode for recording and testing workflows
• Customizable appearance and behavior
• Hotkey support for quick access
• TypeScript support with full type definitions

Examples

React/Next.js

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // SDK is loaded via script tag in _document.js or layout
    // Access it when needed
    if (window.__warpway__) {
      console.log('Warpway SDK loaded');
    }
  }, []);

  return (
    <div>
      <button onClick={() => window.__warpway__?.openWidget()}>
        Get Help
      </button>
    </div>
  );
}

Vue

<template>
  <button @click="openHelp">Get Help</button>
</template>

<script>
export default {
  methods: {
    openHelp() {
      window.__warpway__?.openWidget();
    }
  }
}
</script>

Support

• Website
• Documentation
• Dashboard
• GitHub Issues

License

MIT © Warpway