Introduction

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

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

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

  return (
    <div>
      {processedConversation.map((entry, i) => (
        <div key={i}>{entry.title}</div>
      ))}
      <button onClick={() => sendMessage('Generate an image of a sunset')}>
        Generate
      </button>
      {media.map(m => <img key={m.url} src={m.url} alt="Generated" />)}
    </div>
  );
}