Integration
From API key to production in four steps
Integration
Integrate the SDK, let your users generate professional headshots, and serve them globally.
Login and get your API key
Sign in at propicture.app to obtain your master API key. In your backend, initialize the SDK and generate short-lived keys per user — so your master key never touches the client. See the API Reference for the full list of endpoints.
import { GrascoSDK } from '@grasco/sdk';
const grasco = new GrascoSDK();
grasco.init({ apiKey: process.env.GRASCO_API_KEY });
// Generate a short-lived key for a specific user
const { apiKey } = await grasco.api.createShortLivedApiKey('user-123', {
permissions: ['images:generate:create', 'images:generate:read'],
expiresInDays: 1,
creditLimit: 10,
});Never expose your master API key on the client. Always generate short-lived session keys from your backend.
Open the editor via SDK
Pass the short-lived key to your frontend and call openProfilePictureEditor. The SDK opens a full-featured editor — your users handle the rest.
import { GrascoSDK } from '@grasco/sdk';
const grasco = new GrascoSDK();
grasco.init({ apiKey: shortLivedApiKey });
function EditAvatar() {
return (
<button onClick={() => grasco.openProfilePictureEditor(shortLivedApiKey)}>
Edit Profile Picture
</button>
);
}Users create their headshots
Your users get a full AI-powered editor — background swap, retouching, lighting, and style presets. Zero effort on your end.
Deliver
Two options to serve the finished headshots:
UI Component
Use the React component or the framework-agnostic web component. Supports presence indicators, rings, borders, and variant shapes out of the box.
import { ProfilePicture } from '@grasco/profile-picture';
<ProfilePicture
extCustomerId="user-123"
alt="Jane Smith"
size="lg"
variant="circle"
presence={{ status: 'online' }}
/><script type="module">
import '@grasco/profile-picture/standalone';
</script>
<profile-picture
ext-customer-id="user-123"
alt="Jane Smith"
size="lg"
variant="circle"
presence='{"status": "online"}'
></profile-picture>See the full ProfilePicture documentation for all available props, variants, and framework guides.
Direct CDN
Multiple sizes and a transparent version are generated automatically. Serve them from the global CDN in emails, OG images, native apps, or anywhere.
<!-- Original (480px) -->
<img src="https://api.propicture.app/profile-picture/cdn/user-123_480_original.webp" />
<!-- Transparent background (480px) -->
<img src="https://api.propicture.app/profile-picture/cdn/user-123_480_transparent.webp" />See the CDN Integration guide for available sizes, fallback behavior, and configuration.