@gr33n-ai/jade-sdk-client

TypeScript/React client for Jade AI - generate images, videos, and audio with AI.

Installation

npm install @gr33n-ai/jade-sdk-client
# or
yarn add @gr33n-ai/jade-sdk-client
# or
pnpm add @gr33n-ai/jade-sdk-client

Quick Start

import { JadeProvider, useJadeSession } from '@gr33n-ai/jade-sdk-client';

function App() {
  return (
    <JadeProvider
      config={{
        endpoint: 'https://api.jade.gr33n.ai',
        getAuthToken: () => 'your-api-key',
      }}
    >
      <Chat />
    </JadeProvider>
  );
}

function Chat() {
  const { processedConversation, sendMessage, media, isStreaming } = useJadeSession();

  return (
    <div>
      {processedConversation.map((entry, i) => (
        <div key={i}>
          {entry.entry.text}
          {entry.mediaUrls?.map(url => <img key={url} src={url} />)}
        </div>
      ))}
      <button onClick={() => sendMessage('Generate an image of a sunset')}>
        Generate
      </button>
    </div>
  );
}

Features

• Real-time Streaming: Server-sent events for instant feedback
• Media Generation: Generate images, videos, and audio
• Session Management: Persistent conversations with history
• Type-Safe: Full TypeScript support
• React Hooks: Easy integration with useJadeSession

Documentation

Full documentation available at docs.gr33n.ai

• TypeScript Quickstart
• React Hooks Reference
• API Reference

API

JadeProvider

Wrap your app with JadeProvider to enable Jade hooks:

<JadeProvider
  config={{
    endpoint: 'https://api.jade.gr33n.ai',
    getAuthToken: () => apiKey,
    organizationId: 'org_123', // optional
  }}
>
  <App />
</JadeProvider>

useJadeSession

Main hook for chat functionality:

const {
  // State
  processedConversation,  // Processed entries ready for display
  media,                   // All generated media
  isStreaming,             // Currently generating
  sessionId,               // Current session ID

  // Actions
  sendMessage,             // Send a message
  cancel,                  // Cancel streaming
  clear,                   // Clear conversation
  loadSession,             // Load previous session
  reconnect,               // Reconnect to session
} = useJadeSession();

useMedia

Extract media from conversation:

const media = useMedia(conversation);
// Returns: MediaInfo[] with url, type, prompt, model, etc.

Requirements

• React 18+
• Node.js 18+ (for SSE support)

License

MIT