MyPlay SDK 📦

An elegant, developer-friendly client-side SDK for integrating short-form videos (Reels), shoppable storefronts (Video Commerce), and real-time AI Chatbots on any website or application.

Supports Vanilla JavaScript/HTML, React / Next.js wrappers, fully customizable Shadcn-style compound components, and a programmatic Core API (inspired by OpenAI's client design).

🚀 Quick Setup (React / Next.js / Vite)

Get started in seconds using our non-destructive companion setup CLI utility:

# 1. Install the SDK package
npm install myplay-sdk

# 2. Run the interactive setup utility
npx myplay-sdk init

The setup CLI automatically:

1. Parses your components.json or tsconfig.json to discover your Tailwind CSS and path alias mappings (e.g. @/lib/utils).
2. Creates or verifies a standard cn classnames utility (lib/utils.ts) safely without overwriting your custom settings.
3. Generates the client initialization singleton (lib/myplay.ts).
4. Installs the atomic Shadcn compound component templates into components/myplay/ (reels.tsx, store.tsx, chat.tsx), dynamically updating the utility path imports to match your project profile!

🛠️ API Client Initialization (OpenAI-style)

You can initialize the SDK as either a newable class constructor or a direct factory function. All keys are fully optional, allowing you to activate only the features you need.

import { MyplaySDK } from "myplay-sdk";

// Direct factory invocation (OpenAI & Axios style!)
const myplay = MyplaySDK({
  REEL_API_KEY: "your_reels_api_key",
  VC_API_KEY: "your_video_commerce_key",
  CHATBOT_API_KEY: "your_chatbot_key",
  baseUrl: "https://app.myplay.com/api" // Optional custom server endpoint
});

⚡ Integration Styles

🎨 Style A: Customizable Shadcn Compound Components (Recommended)

Take complete control over layout, styling, and transitions. The CLI installs lightweight, fully-stylable atomic React hooks and compound elements inside your local workspace.

1. Short Reels Feed

import { Reels, ReelsViewport, ReelsItem, ReelsVideo, ReelsMuteToggle, ReelsActions, ReelsLikeButton, ReelsCommentsButton, ReelsInfo, useReelsContext } from "@/components/myplay/reels";

export default function ReelsPage() {
  return (
    <Reels limit={5}>
      <ReelsMuteToggle />
      <ReelsViewport>
        <ReelsContent />
      </ReelsViewport>
    </Reels>
  );
}

// Map slides cleanly using atomic local sub-components
function ReelsContent() {
  const { videos } = useReelsContext();
  return (
    <>
      {videos.map((reel, idx) => (
        <ReelsItem key={reel.id} index={idx} videoUrl={reel.video_url} thumbnailUrl={reel.thumbnail_url}>
          <ReelsVideo index={idx} src={reel.video_url} poster={reel.thumbnail_url} />
          <ReelsActions>
            <ReelsLikeButton reelId={reel.id} count={reel.likes_count} isLiked={reel.isLiked} />
            <ReelsCommentsButton count={reel.comments_count || 0} />
          </ReelsActions>
          <ReelsInfo author={`@creator_${reel.id}`} title={reel.title} />
        </ReelsItem>
      ))}
    </>
  );
}

2. AI Chatbot Agent

import { Chat, ChatTrigger, ChatWindow, ChatHeader, ChatMessages, ChatInput } from "@/components/myplay/chat";

export default function SupportWidget() {
  return (
    <Chat>
      <ChatTrigger />
      <ChatWindow className="w-[380px] h-[550px] border border-zinc-800">
        <ChatHeader title="MyPlay Support AI" subtitle="Online Help Agent" />
        <ChatMessages />
        <ChatInput />
      </ChatWindow>
    </Chat>
  );
}

📦 Style B: Standard React Wrappers (Out-of-the-Box)

For zero-config deployment, import our pre-styled, responsive React components with full callback event hooks:

import { myplaySdk, ReelFeed, VideoCommerce, Chatbot } from "myplay-sdk";

// Initialize globally
myplaySdk.init({ apiKey: "YOUR_API_KEY" });

export default function SimpleDashboard() {
  return (
    <div className="flex flex-col gap-8">
      {/* 🎬 Reels Player */}
      <ReelFeed showCloseButton onClose={() => console.log("Feed Closed")} />
      
      {/* 🛍️ Shoppable Storefront Grid */}
      <VideoCommerce onProductClick={(prod) => console.log("Product clicked:", prod)} />
      
      {/* 💬 Support Chatbot Panel */}
      <Chatbot theme="dark" onSessionStarted={(session) => console.log("Chat active:", session)} />
    </div>
  );
}

🌐 Style C: Universal Web Components (Vanilla HTML / Multi-Framework)

Load the bundle from any CDN and render native browser elements with zero framework requirements:

<!-- Load UMD bundle -->
<script type="module" src="https://unpkg.com/myplay-sdk/dist/mtapis-sdk.es.js"></script>

<script type="module">
  import { myplaySdk } from "https://unpkg.com/myplay-sdk/dist/mtapis-sdk.es.js";
  
  // Set global credentials
  myplaySdk.init({ apiKey: "YOUR_API_KEY" });
</script>

<!-- Render anywhere natively -->
<myplay-reels show-close-button="true"></myplay-reels>
<myplay-video-commerce></myplay-video-commerce>
<myplay-chat></myplay-chat>

⚙️ Style D: Programmatic Core API (For Headless Builds)

Build bespoke user experiences from scratch by calling our headless core namespaces directly:

// 🎬 Reels Programmatic Listing & Likes Toggle
const feedRes = await myplay.reels.list({ limit: 10 });
if (feedRes.success) {
  console.log("Reels videos:", feedRes.data);
}
await myplay.reels.toggleLike(videoId, "user-device-fingerprint");

// 🛍️ Video Commerce Product Listing
const shopRes = await myplay.videoCommerce.list();
console.log("Shoppable items:", shopRes.data);

// 💬 AI Chatbot Messaging Sessions
const session = await myplay.chatbot.startSession();
const reply = await myplay.chatbot.sendMessage("What are your shipping rates?", session.session_id);
console.log("AI reply:", reply.message);

🔐 License

Proprietary Software. Created by MyPlay RaaS. All rights reserved.