Getting Started

This guide will help you integrate Open Hangul AI into your React application quickly and efficiently.

Step 1: Installation

Install Open Hangul AI using your preferred package manager:

npm install open-hangul-ai

or with yarn:

yarn add open-hangul-ai

Step 2: Import Components and Styles

Import the necessary components and styles in your React application:

                import { HWPXViewer } from 'open-hangul-ai';
import 'open-hangul-ai/css';
            

Step 3: Basic Implementation

Create a basic HWPX viewer component:

                import React, { useState } from 'react';
import { HWPXViewer } from 'open-hangul-ai';
import 'open-hangul-ai/css';

function App() {
  const [file, setFile] = useState(null);

  const handleFileSelect = (e) => {
    const selectedFile = e.target.files?.[0];
    if (selectedFile) {
      setFile(selectedFile);
    }
  };

  return (
    <div style={{ height: '100vh' }}>
      <input
        type="file"
        accept=".hwpx"
        onChange={handleFileSelect}
      />
      <HWPXViewer
        file={file}
        enableAI={true}
        onDocumentLoad={(viewer) => {
          console.log('Document loaded successfully!');
        }}
        onError={(error) => {
          console.error('Error loading document:', error);
        }}
      />
    </div>
  );
}

export default App;
            

Step 4: Configuration (Optional)

You can customize the viewer with additional props:

                <HWPXViewer
  file={file}
  enableAI={true}
  theme="dark"
  showToolbar={true}
  allowEdit={true}
  className="custom-viewer"
  onDocumentLoad={(viewer) => {
    // Document loaded callback
  }}
  onContentChange={(content) => {
    // Content changed callback
  }}
  onError={(error) => {
    // Error handling
  }}
/>
            

Step 5: AI Integration

To use AI features, you need to configure the AI provider:

                import { AIProvider } from 'open-hangul-ai';

// Wrap your app with AIProvider
function App() {
  return (
    <AIProvider
      provider="openai"
      apiKey={process.env.REACT_APP_OPENAI_API_KEY}
    >
      <YourComponent />
    </AIProvider>
  );
}
            

Next Steps

Common Issues

File Loading Issues

If you're having trouble loading HWPX files, make sure:

The file is a valid HWPX format
The file is not corrupted
Your browser supports the necessary APIs

Styling Issues

Make sure to import the CSS file:

import 'open-hangul-ai/css';

TypeScript Support

Open Hangul AI comes with built-in TypeScript definitions. If you're using TypeScript, you'll get full type safety out of the box.