@sira-screen-share/support

v0.1.14

Published

12 days ago

Drop-in support SDK for Sira. Customer enters a 6-digit code; agent sees their screen via metered.ca screen-share.

0High
0Medium
0Low

kali-abe

jity01

support screen-sharing webrtc customer-support rrweb react sira

@sira-screen-share/support

Drop-in support SDK. A customer clicks Help, enters a 6-digit code your agent gave them over the phone, and the agent instantly sees their screen and can draw on it. WebRTC peer-to-peer, no permission prompts, ~20KB gzipped.

Install

npm install @sira-screen-share/support

Let your AI pair do the integration

Paste this prompt into Cursor, Claude Code, Copilot Chat, Cline, Windsurf, or any coding agent. It has everything the agent needs to wire the SDK into your codebase cleanly — no back-and-forth, no regressions.

I want to integrate the npm package `@sira-screen-share/support` into this codebase.
It's a drop-in SDK that lets our support team view and annotate a customer's
screen via a 6-digit code the customer enters from a Help menu.

Reference docs + source (fetch these if anything below is ambiguous):
- npm:    https://www.npmjs.com/package/@sira-screen-share/support
- GitHub: https://github.com/Jity01/sira-sdk

Please do the full integration. Follow these rules carefully:

1. INSTALL the package with the right package manager for this repo
   (npm / pnpm / yarn / bun — infer from lockfiles):
     @sira-screen-share/support

2. MOUNT the provider once at the very top of the app tree, as a sibling of
   {children}, not wrapping them. The SDK defaults to Sira's production
   public key + API URL, so production needs no props.

   • Next.js App Router → add it to `app/layout.tsx` inside <body>, after {children}
   • Next.js Pages Router → add it to `pages/_app.tsx` next to <Component />
   • Vite / CRA / plain React → add it to the root component (App.tsx, main.tsx)

   ```tsx
   import { SiraSupport } from "@sira-screen-share/support/react";
   // production (sira.team)
   <SiraSupport />
   // localhost dev / testing — use the shared test key
   <SiraSupport publicKey="pk_test" />
   ```

   **Public keys at a glance** (pass via the `publicKey` prop):
   - `pk_live_sira` → production (https://sira.team). This is the default, no prop needed.
   - `pk_test` / `pk_demo` → accept any origin; use for localhost, preview deploys, staging, or quick trials.
   - Custom live keys tied to a specific domain are provisioned server-side; ask before inventing new keys.

3. FIND the existing Help affordance in this codebase — it's usually one of:
   a "Help" button in the top nav, a "?" icon, a support/contact link in the
   footer, or a menu item inside a user/account dropdown. Search for terms like
   "help", "support", "contact", "assistance".

4. ADD a new item/button called "Enter support code" next to whatever you
   found. The click handler opens the SDK's modal via the `useSiraSupport()`
   hook. A full minimal example:

   ```tsx
   "use client"; // add this at the top if it's not already a client component
                 // (Next.js App Router requires it — hooks can't run on server)
   import { useSiraSupport } from "@sira-screen-share/support/react";

   function SupportCodeButton() {
     const { openCodeEntry } = useSiraSupport();
     return (
       <button onClick={() => openCodeEntry()}>
         Enter support code
       </button>
     );
   }
   ```

   Integrate it into the existing Help UI:
   - If you found a menu (e.g. dropdown, popover, sheet), add a new item
     whose click handler calls `openCodeEntry()`. Match the existing
     menu-item component — do not invent a new one.
   - If you found a single Help button that opens a dialog, add a new
     button or link INSIDE that dialog.
   - If the Help control just opens a chatbot / external link / Intercom
     widget, add this NEW button NEXT TO it (same container, same styling
     pattern) — don't try to hijack the existing one.

   Match the existing component/styling patterns exactly — if the project uses
   Tailwind, use Tailwind; if it uses Chakra/Mantine/Radix, use that; if there
   are CSS modules, use those. DO NOT introduce a new styling approach.

5. If the codebase has NO Help UI at all, add a single unstyled `<button>` in
   the main layout's header that calls `openCodeEntry()`. Keep it minimal —
   the user can style it later. Remember to include `"use client"` at the top
   of the file if it's a Next.js App Router file.

6. DON'T DO THESE THINGS:
   • Don't wrap <SiraSupport> in Suspense, ErrorBoundary, or dynamic()
   • Don't add any CSS to style the SDK's modal — it uses shadow DOM and
     styles itself
   • Don't add env vars, API routes, or backend wiring — the SDK talks to
     Sira's hosted server
   • Don't add loading states, skeletons, or placeholders around the SDK
   • Don't pass a custom `serverUrl` unless I tell you to
   • Don't refactor the existing Help UI — only add one new entry point

7. After the edits, tell me:
   • Which file you added <SiraSupport> to
   • Which file you added the trigger to and how it looks in context
   • Whether you used the default production key or passed publicKey="pk_test"
     (default = production; use pk_test if the user's dev server is on localhost)

That's it. The SDK is SSR-safe, has no peer deps beyond React, and adds
~27KB gzipped to the bundle.

Use it

Mount the provider once in your root layout:

// app/layout.tsx
import { SiraSupport } from "@sira-screen-share/support/react";

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SiraSupport />
      </body>
    </html>
  );
}

Then open the code-entry modal from your existing Help button:

import { useSiraSupport } from "@sira-screen-share/support/react";

function HelpMenu() {
  const { openCodeEntry } = useSiraSupport();
  return <button onClick={openCodeEntry}>Enter support code</button>;
}

That's it. When the customer connects, a consent banner ("Agent is viewing your screen") pins to the top and stays until one of you ends the session.

Where the agent logs in

The support agent generates codes and watches sessions from the hosted dashboard:

https://sira-support-dashboard-production.up.railway.app

Flow end to end:

Agent opens the dashboard, clicks Generate code, reads the 6-digit code to the customer (usually over the phone).
Customer clicks your Help button, pastes the code into the SDK modal, hits Connect.
Dashboard auto-switches from the waiting card to the live screen view.

Need agent credentials? They aren't self-service — ping me (@Jity01) and I'll set you up with a username + password.

Config

Everything below is optional — sensible defaults point at Sira's hosted API.

<SiraSupport
  publicKey="pk_test"            // see "Public keys" below; default: pk_live_sira
  serverUrl="https://..."         // override to point at a different API host
  mask={{
    selectors: [".account-number", "[data-private]"],
    inputTypes: ["password", "email"],   // password always masked
  }}
  onSessionStart={() => analytics.track("support_session_started")}
  onSessionEnd={(reason) => analytics.track("support_session_ended", { reason })}
/>

Public keys

The server cross-checks publicKey against the request's Origin. Shipping a production key to a non-allowlisted origin returns 403 forbidden_origin ("This site isn't authorized").

| Key | Allowed origins | Use when | | --- | --- | --- | | pk_live_sira (default) | https://sira.team | Running on Sira's production domain. | | pk_test / pk_demo | any origin | Local dev, preview deploys, staging, quick integration trials. |

pk_test and pk_demo skip the origin gate by design so you can drop the SDK into any URL without pre-registering it. Codes are still one-time, 5-minute TTL, and tied to a live agent session — the key doesn't grant anything by itself.

Want a dedicated live key for your production domain? Ping us.

How the masking works

Every <input type="password"> is masked by default — the agent sees bullets, not the characters. Add selectors or input types for anything else sensitive. Masking happens at the source; redacted content never leaves the browser.

What the agent can do

See the page live, move a pointer, and draw with pen / arrow / highlight. They cannot click, type, or remote-control — the SDK only streams out.

What it costs you

Bundle: ~20KB gzipped, shadow-DOM'd so no CSS leaks
Bandwidth during a session: ~20–50 kbps (rrweb DOM events, not video)
No permission prompts: the browser doesn't ask "share this window?"
Mobile web: works

Troubleshooting

"That code isn't valid" — codes expire after 5 minutes and are single-use. Ask the agent to generate a new one.

"This site isn't authorized" — the publicKey you passed isn't allowlisted for this page's origin. Use publicKey="pk_test" (or "pk_demo") — those accept any origin. For a dedicated production key tied to your domain, ask us.

Nothing happens when they enter the code — open DevTools. If you see CORS errors, the server doesn't recognize your origin yet; if the WebSocket to /rtc fails, your host is behind a proxy stripping Upgrade: websocket.

License

Private — internal to Sira.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@sira-screen-share/support

Install

Let your AI pair do the integration

Use it

Where the agent logs in

Config

Public keys

How the masking works

What the agent can do

What it costs you

Troubleshooting

License