React.js: Membuat AI Sederhana Menggunakan Leon API

Leon API adalah platform open-source yang memungkinkan Anda membangun asisten pribadi (personal assistant) dengan berbagai fitur. Untuk menggunakan Leon API dalam aplikasi ReactJS, Anda perlu mengirim permintaan HTTP ke endpoint API Leon.

Persiapan Awal:

Pastikan Anda memiliki pengetahuan dasar tentang ReactJS, HTML, CSS, dan JavaScript.

Get Ahmad Fauzan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Pastikan Anda tahu bagaimana cara menggunakan API HTTP (misalnya, menggunakan fetch atau pustaka seperti axios).

Buat Proyek React:

Buat proyek React baru jika Anda belum memiliki satu. Anda dapat menggunakan perintah berikut di terminal:

npx create-react-app leon-app

Masuk ke direktori proyek yang baru dibuat:

cd leon-app

Instalasi Dependensi:

Instal pustaka axios untuk mengirim permintaan HTTP:

npm install axios

Menggunakan Leon API dalam Komponen:

Buka file src/App.js atau komponen yang sesuai dan buat kode berikut untuk mengintegrasikan Leon API:

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [inputText, setInputText] = useState('');
  const [outputText, setOutputText] = useState('');

  const handleInputChange = (event) => {
    setInputText(event.target.value);
  };

  const handleLeonRequest = async () => {
    const response = await axios.post(
      'https://api.leon.openai.rocks/api/query',
      {
        q: inputText,
      }
    );

    setOutputText(response.data.answer);
  };

  return (
    <div className="App">
      <h1>Leon API with React</h1>
      <textarea
        value={inputText}
        onChange={handleInputChange}
        placeholder="Ask your question"
      />
      <button onClick={handleLeonRequest}>Ask Leon</button>
      <div className="output">{outputText}</div>
    </div>
  );
}

export default App;

Uji Aplikasi:

Jalankan aplikasi dengan perintah:

npm start

Buka browser dan akses http://localhost:3000. Anda akan melihat antarmuka aplikasi yang memungkinkan Anda memasukkan pertanyaan dan menerima jawaban dari Leon API.

Pastikan Anda memahami dokumentasi Leon API dan menggunakan endpoint yang benar untuk permintaan. Juga, pastikan bahwa Anda telah mengganti endpoint dan rute API dengan informasi yang benar.

Perhatikan bahwa ini adalah contoh sederhana. Penggunaan yang lebih kompleks dan pengelolaan respons API yang lebih baik mungkin diperlukan dalam aplikasi yang lebih besar dan lebih nyata.

Documentation: https://docs.getleon.ai/