NG Connect SDK
NG Connect SDK enables any web app or dApp to integrate with NG Desktop.
It communicates via the browser's postMessage API — no backend required.
Include one script tag, call NG.ready(), and your app gains access to
login, notifications, cloud storage, social features, and more.
Installation
Add the following script tag to your HTML file. The SDK is hosted on the NG CDN and is always kept up to date.
<script src="https://ng.net/sdk/ng-connect.js"></script>After loading, the SDK exposes a global NG object with all platform capabilities.
You can also use it as an ES module if you prefer:
// Download: https://ng.net/sdk/ng-connect.js
import NG from './ng-connect.js';Quick Start
The following example shows a complete integration that detects NG Desktop, logs in the user, reads their stored preferences, and sends a notification.
<script src="https://ng.net/sdk/ng-connect.js"></script>
<script>
(async () => {
// Step 1: Verify running inside NG Desktop
try {
await NG.ready();
} catch (e) {
// E001: app opened directly in browser, not via App Store
console.warn(e.message);
return;
}
// Step 2: Login / get user identity
const user = await NG.auth.login();
console.log('Hello,', user.display_name);
// Step 3: Cloud storage
const count = await NG.storage.get('visit_count') ?? '0';
await NG.storage.set('visit_count', String(+count + 1));
// Step 4: Adapt to system theme
const theme = await NG.theme.get(); // 'dark' | 'light'
document.body.dataset.theme = theme;
// Step 5: Send a notification
await NG.notify.send({
title: 'Welcome back!',
body: `You've visited ${+count + 1} times.`
});
})();
</script>NG.ready()
Use NG.ready() as the entry point for any NG Connect integration.
It detects whether your app is running inside NG Desktop. If not, it rejects with
error code E001, allowing you to handle the fallback gracefully.
NG.ready() → Promise<true>try {
await NG.ready();
// Safe to use NG APIs here
} catch (e) {
// E001: not running inside NG Desktop
console.warn(e.message);
}
// Or synchronously:
if (NG.isAvailable()) {
// inside NG Desktop
}Also available as a synchronous check: NG.isAvailable() returns boolean.
NG.auth — User Authentication
The NG.auth module lets users sign in to your app using their NG Desktop account.
No password or OAuth flow needed — the user simply approves your app's authorization request
once, and subsequent calls return their identity silently.
NG.auth.login()→ Promise<User>Prompt the user to authorize your app. If already authorized, resolves immediately without showing a dialog. Returns the user's NG identity.
const user = await NG.auth.login();
console.log(user.display_name, user.email);NG.auth.getUser()→ Promise<User | null>Silently retrieve the current user without triggering an authorization dialog. Returns null if the user has not yet authorized your app.
NG.auth.logout()→ Promise<void>Revoke your app's authorization for the current user. The next call to NG.auth.login() will show the authorization dialog again.
NG.notify — Desktop Notifications
Send desktop-level notifications to the user via NG Desktop's notification system. Notifications appear in the NG Desktop interface even when the user is in another app.
NG.notify.send(options)→ Promise<void>titlestring (required)- Notification title shown in bold.
bodystring (optional)- Notification body text.
iconstring (optional)- URL of an icon image to show alongside the notification.
await NG.notify.send({
title: 'Upload complete',
body: 'Your file has been saved successfully.',
icon: 'https://myapp.com/icon.png'
});NG.storage — Cloud Key-Value Storage
Per-app, per-user key-value cloud storage backed by Cloudflare D1. Use it to persist user preferences, app state, or any string data without building your own backend. Storage is isolated per app and per user.
NG.storage.get(key)→ Promise<string | null>Read a stored value by key. Returns null if the key does not exist.
NG.storage.set(key, value)→ Promise<void>Write a string value. If the key already exists, it is overwritten. Pass JSON.stringify(obj) to store objects.
NG.storage.del(key)→ Promise<void>Delete a key-value pair. Has no effect if the key does not exist.
await NG.storage.set('theme', 'dark');
const theme = await NG.storage.get('theme'); // 'dark'
await NG.storage.del('theme');NG.apps — App Management
Interact with the NG App Store from within your app. Open other apps or check what the user has installed.
NG.apps.open(slug)→ Promise<void>Open another installed app in NG Desktop by its App Store slug. Useful for cross-app workflows.
NG.apps.getInstalled()→ Promise<AppInfo[]>Returns the list of apps the current user has installed.
NG.theme / locale / clipboard
Read system-level settings from NG Desktop to adapt your app's look and behavior.
NG.theme.get()→ Promise<'light' | 'dark'>Get the current NG Desktop theme. Use this to switch your app between light and dark mode automatically.
const theme = await NG.theme.get();
document.body.classList.toggle('dark', theme === 'dark');NG.locale.get()→ Promise<string>Get the desktop locale (e.g. 'zh-CN', 'en-US'). Use to display content in the user's preferred language.
NG.clipboard.write(text)→ Promise<void>Write text to the system clipboard via NG Desktop.
NG.ipc — Cross-App Communication
IPC (Inter-Process Communication) lets apps send and receive messages from each other within NG Desktop. Build ecosystems of cooperating apps — for example, a file picker app that sends selected files to another app.
NG.ipc.send(appSlug, event, data)→ Promise<void>Send a named event with data to another installed app identified by its slug.
NG.ipc.on(event, handler)→ voidListen for IPC messages from other apps. The handler(data, fromApp) receives the event data and the sender's app slug.
// App A: send
await NG.ipc.send('file-picker', 'files:selected', { urls: ['...'] });
// App B: receive
NG.ipc.on('files:selected', (data, fromApp) => {
console.log('Files from', fromApp, data.urls);
});TypeScript Types
NG Connect SDK ships with the following core types:
interface User {
id: string; // NG user ID
display_name: string; // User's display name
email: string; // User's email address
avatar_url: string; // Profile picture URL
}
interface AppInfo {
slug: string; // App Store slug
name: string; // App display name
}
// All SDK methods return Promises:
// NG.auth.login() → Promise<User>
// NG.auth.getUser() → Promise<User | null>
// NG.auth.logout() → Promise<void>
// NG.notify.send(opts) → Promise<void>
// NG.storage.get(key) → Promise<string | null>
// NG.storage.set(k, v) → Promise<void>
// NG.storage.del(key) → Promise<void>
// NG.social.getFriends() → Promise<User[]>
// NG.social.follow(id) → Promise<void>
// NG.social.unfollow(id) → Promise<void>
// NG.apps.open(slug) → Promise<void>
// NG.apps.getInstalled() → Promise<AppInfo[]>
// NG.theme.get() → Promise<'light' | 'dark'>
// NG.locale.get() → Promise<string>
// NG.clipboard.write(text) → Promise<void>
// NG.ipc.send(slug, ev, d) → Promise<void>
// NG.ipc.on(ev, handler) → voidError Codes
SDK errors follow the format [NG Connect E001] Description.
| Code | Description | When It Occurs |
|---|---|---|
E001 | Not running inside NG Desktop | Thrown by NG.ready() and all API calls when the app is opened directly in a browser tab, not via NG Desktop App Store. |
E002 | Request timed out | NG Desktop did not respond within 30 seconds. Check network connectivity or try again. |
Frequently Asked Questions
What is NG Connect SDK?
NG Connect SDK is a JavaScript library that allows web apps and dApps to integrate
with NG Desktop's platform features — including one-click login, cloud storage,
push notifications, social graph, and cross-app communication — using a simple API
over postMessage.
Does my app need a backend to use NG Connect?
No. The SDK communicates directly with NG Desktop via postMessage.
All data (storage, user info, notifications) is handled by NG Desktop's backend
on your behalf. Your app only needs the frontend SDK.
How is NG Connect SDK different from calling the REST API directly?
The REST API is for server-side access (CLI, scripts, dashboards) to NG platform data. The SDK runs in the browser inside NG Desktop and exposes real-time platform capabilities that require a live NG Desktop session, like login dialogs, notifications, and IPC.
How do I integrate NG login into my existing app?
Add the SDK script tag, call await NG.ready() to check if you're in NG Desktop,
then call await NG.auth.login() to get the user's identity.
Store the user.id in your own backend if needed for server-side user records.
Can I use NG Connect in a PWA or dApp?
Yes. Any web app that can run in an iframe can use NG Connect. PWAs and dApps are fully supported. For dApps, wallet connections (MetaMask, WalletConnect) work inside NG Desktop's iframe environment as long as the wallet extension is installed.
What happens if my app is opened outside NG Desktop?
NG.ready() will reject with error E001. You should catch this
and either show a message directing users to install your app via NG App Store, or
fall back to your app's normal behavior without NG features.