Apakah kamu merasa FOMO dengan perkembangan AI saat ini? Mau belajar ai tapi bingung mulai dari mana? Sebagai mahasiswa IT, langkah pertama yang bisa kamu lakukan adalah dengan membuat aplikasi AI. Sambil belajar AI kamu juga sambil belajar bagaimana backend bekerja

https://www.kdnuggets.com/how-to-learn-ai-the-lazy-way

Ai integration on webstite (generated via Napkin)

Di artikel ini, saya akan berbagi cara bagaimana membuat fitur ai yaitu chatbot menggunakan model AI, lengkap beserta praktik, implementasi, dan source code nya. Dan tentunya kamu bisa memulainya dengan gratis modal laptop, vscode ama eepiswlan.

How we get started with ai?

AI yang biasa kamu kenal, seperti ChatGPT adalah website atau aplikasi yang didukung oleh Large Language Models (LLMs). Contohnya Anthropic dengan model Claude 3.5 Sonnet, Google dengan model Gemini 1.5 Pro, Meta dengan model Llama, BERT model, dan masih banyak lagi. So popularitas AI saat ini sebagian besar didorong oleh kemajuan dalam teknologi LLM.

Large Language Model (LLM) adalah sistem kecerdasan buatan yang dirancang untuk memahami, menghasilkan, dan memanipulasi bahasa manusia dalam skala besar. LLM menggunakan teknik machine learning tingkat lanjut, khususnya arsitektur jaringan saraf yang dikenal sebagai transformers, untuk memproses dan menghasilkan teks yang mirip dengan cara manusia berkomunikasi

Untuk mempelajari lebih lanjut tentang LLM lebih lengkapnya, kamu bisa artikel berikut ini

https://www.cloudflare.com/learning/ai/what-is-large-language-model/ https://bbycroft.net/llm

So how to use LLMs on the website?

Open source vs closed sources

Untuk menggunakan LLMs (Large Language Models) cukup mudah kamu bisa memanfaatkan API Provider untuk mengintegrasikan dengan cepat. Yang menjadi tantangan adalah bagaimana memilih LLM yang tepat dan sesuai. Ada berbagai pertimbangan dalam memilih model seperti menggunakan open source atau closed source LLM. Open source vs Closed source LLMNamun selain 2 jenis model, memilih LLM (Large Language Model) yang tepat juga melibatkan beberapa pertimbangan tambahan, seperti biaya dan kontrol, kamu bisa menggunakan API provider seperti openai atau untuk enterprise production ada opsi lain seperti mendeploy model di server sendiri dan biayanya sendiri cukup mahal :3.

https://www.datacamp.com/tutorial/deploying-llm-applications-with-langserve

Getting started with Next js project

Note: This section doesn't cover the entire codebase. We'll focus on crucial parts of the project to clarify implementation details. For example, we won't discuss design and UI details but will focus on the more functional aspects of the project. For those interested in these details, you can examine the source code

Why Next js?

Next JS adalah modern react framework yang menawarkan lebih banyak fitur untuk pengembangan aplikasi web modern. Framework ini yang sangat populer karena menawarkan berbagai fitur yang memudahkan pengembangan aplikasi web modern, seperti server-side rendering (SSR) dan static site generation (SSG). Selain karena terkenal karena kecepatannya web ini juga sangat SEO-friendly dan cocok untuk full stack developer yang ingin mengembagkan gen ai apps dengan cepat.

#Create new project, you can choose between js or ts  
npx create-next-app@latest nextjs-ai --tailwind --no-src-dir --eslint --app --import-alias "@/*"

Folder structure

The concept involves using an AI backend to handle API calls with an instructor, while the frontend displays the response to users.

nextjs-app-folder-structure
├── app/                    # App Router  
│   ├── api/                # Backend  
│   │   ├── chat/             
│   │   │   └── route.tsx   # File route untuk API chat  
│   ├── layout.tsx          # Layout global  
│   └── page.tsx            # Halaman utama (/)  
├── components/             # Folder untuk komponen reusable  
├── public/                 # Folder untuk file statis (gambar, font, dll.)  
├── next.config.mjs         # File konfigurasi Next.js  
├── tsconfig.json           # File konfigurasi TypeScript  
└── .env                    # Menyimpan API KEY

Implement LLM

Pertama kamu perlu buat file json terlebih dahulu yang semakin banyak kamu memberi konteks tentang diri kamu, semakin mengerti chatbot personalisasi

// knowledge_base.json  
  
{  
    "nama": "Sam Altman",  
    "tanggal lahir": "1945-08-15",  
    "hobi": [  
          "Menggambar",  
          "Ngoding"  
        ],  
    "target pekerjaan": [  
      "data scientist",  
      "AI Engineer"  
    ],  
    "bahasa pemrograman": [  
          "Typescript",  
          "Python"  
        ],  
    // more personal data   
}

Tips: kamu bisa buatkan chatgpt buat mengekstrak resume yang kamu miliki ke json sebagai knowledge base

Setelah itu kamu bisa set up backend yang menerima response dan mereturn output. Disini kita memakai groq karena gratis, alternatifnya kamu bisa make gemini dan together

#First install groq typescript library  
npm i groq-sdk

Buat file API Route menggunakan next server dan set up model dari groq terlebih dahulu

// app/api/chat/route.ts  
import { NextResponse } from "next/server";  
import { Groq } from "groq-sdk";  
import knowledge_base from '@/data/knowledge_base.json';  
  
const groq = new Groq({  
  apiKey: process.env.GROQ_API_KEY,  
});  
  
// Salin GROQ API KEY di .env/.env.local

Support Model on Groq

Ada berbagai model open source yang bisa kita pakai. Karena chatbot yang akan kita buat dirancang untuk memberikan jawaban yang sederhana, kita tidak memerlukan output yang terlalu besar. Namun, mengingat data JSON yang akan digunakan cukup panjang, sehingga diperlukan model dengan context window yang panjang, seperti Llama 3.1, Llama 3.3, atau Mixtral 8x7b?(Ndak rekomen hasil outputnya jelek :v). Selain itu, perlu juga mempertimbangkan limit token dari masing-masing model agar sesuai dengan kebutuhan kita.

Selanjutnya kita akan menangkap informasi dari data json dan membuat instruksi prompt yang efektif. Tujuannya adalah supaya si model dapat menghasilkan output yang relevan dan sesuai dengan konteks.

// prompt engineer cuy  
const knowledgeBaseContent = knowledge_base ? JSON.stringify(knowledge_base) : "";  
  
const chatCompletion = await groq.chat.completions.create({  
  messages: [  
    {  
      role: "system",  
      content: `  
        Anda adalah chatbot virtual assistant yang menggantikan Wahyu untuk menjawab pertanyaan dari orang lain.  
        Wahyu lebih menyukai jawaban yang singkat, padat, jelas, namun tetap ramah. Berikut adalah beberapa aturan penting yang harus Anda ikuti:  
  
        1. Jawablah berdasarkan informasi yang tersedia di knowledge base berikut:  
           \n\n${knowledgeBaseContent}  
  
        2. Jika tidak mengetahui jawaban, katakan dengan sopan: "Maaf, saya tidak tahu."  
  
        3. Jika pertanyaan bersifat terlalu pribadi, sensitif, atau toxic, balas dengan: "Maaf, saya tidak bisa menjawab pertanyaan seperti itu."  
  
        Pastikan Anda:  
        - Menyapa pengguna dengan hangat di awal.  
        - Memberikan jawaban yang membantu.  
        - Menutup percakapan dengan ramah.  
      `,  
    },  
    { role: "user", content: message },  
  ],  
  model: "llama-3.1-8b-instant",  
});

Berikut code lengkapnya dengan penambahan get request, validasi input, dan error handling

// app/api/chat/route.ts  
  
import { NextResponse } from "next/server";  
import { Groq } from "groq-sdk";  
import knowledge_base from '@/data/knowledge_base.json';  
  
const groq = new Groq({  
  apiKey: process.env.GROQ_API_KEY,  
});  
  
export async function POST(req: Request) {  
  try {  
    const { message } = await req.json();  
  
    if (!message) {  
      return NextResponse.json(  
        { error: "Message is required" },  
        { status: 400 }  
      );  
    }  
  
    // Menggabungkan knowledge base ke dalam system message  
    const knowledgeBaseContent = knowledge_base ? JSON.stringify(knowledge_base) : "";  
  
    const chatCompletion = await groq.chat.completions.create({  
      messages: [  
        {  
          role: "system",  
          content: `  
            Anda adalah chatbot virtual assistant yang menggantikan Wahyu untuk menjawab pertanyaan dari orang lain.  
            Wahyu lebih menyukai jawaban yang singkat, padat, jelas, namun tetap ramah. Berikut adalah beberapa aturan penting yang harus Anda ikuti:  
      
            1. Jawablah berdasarkan informasi yang tersedia di knowledge base berikut:  
               \n\n${knowledgeBaseContent}  
      
            2. Jika tidak mengetahui jawaban, katakan dengan sopan: "Maaf, saya tidak tahu."  
      
            3. Jika pertanyaan bersifat terlalu pribadi, sensitif, atau toxic, balas dengan: "Maaf, saya tidak bisa menjawab pertanyaan seperti itu."  
      
            Pastikan Anda:  
            - Menyapa pengguna dengan hangat di awal.  
            - Memberikan jawaban yang membantu.  
            - Menutup percakapan dengan ramah.  
          `,  
        },  
        { role: "user", content: message },  
      ],  
      model: "llama-3.1-8b-instant",  
    });  
  
    const response = chatCompletion.choices[0].message.content;  
  
    return NextResponse.json({ response: response });  
  } catch (error) {  
    console.error("Error in chat API:", error);  
    return NextResponse.json(  
      { error: "Maaf bot sedang eror, coba lain kali" },  
      { status: 500 }  
    );  
  }  
}

How about Front-end?

Kamu perlu siapkan page baru baru untuk membuat halaman yang berisi interface chatbot. Sebelum itu kamu perlu mengambil data dari backend dan menyimpan response variable.

// app/ai-chat/page.tsx  
  
try {  
  // send request POST to endpoint /api/chat  
  const response = await fetch("/api/chat", {  
    method: "POST",  
    headers: { "Content-Type": "application/json" },  
    body: JSON.stringify({ message: sendMessage.text }),  
  });  
  
  // Get response data and format to JSON  
  const data = await response.json();  
  
} catch (error) {  
  // Error handling  
  console.error("Error:", error.message);  
}

Untuk interface nya kamu bisa menuju ke chat.com atau v0.dev untuk membuat ui sederhana dari kode yang anda buat. Jangan lupa lampirkan kode api supaya ai mengerti konteks dan dapat membuat ui yang dapat berjalan sesuai dengan backend

What’s next

Kamu bisa prefer menggunakan framework/sdk seperti AI SDK by Vercel, Langchain, Llamaindex. Framework ini memudahkan pembuatan pipeline, data ingest, dan penggantian model tanpa perlu mengubah terlalu banyak kode.
Kamu bisa menambahkan lebih banyak data, seperti project, resume, interest dan menerapkan teknik-teknik prompt, seperti Meta prompting dan Contextual priming untuk mendapatkan hasil respon yang lebih akurat dan lebih relevan. Pelajari https://www.promptingguide.ai
Untuk keamanan dan privasi data, kamu bisa menggunakan database nosql, atau sql dengan kolom json. Kalau dari project yang aku pakai aku memakai neon postgresql
Terus belajar dan jangan berhenti mencoba👍🏻

Jika kamu memiliki pertanyaan atau ingin berdiskusi lebih lanjut, jangan sungkan untuk menghubungi saya, atau bertanya lewat ai bot pribadi saya di https://www.wahyuikbal.web.id/chat-me . Untuk knowledge tambahan berikut referensi dan resources yang bisa kamu baca pas lagi gabud.

Resources

https://arxiv.org/abs/1706.03762

https://pub.towardsai.net/the-choice-for-businesses-between-open-source-and-proprietary-models-to-deploy-generative-ai-adcc336cfa41

https://github.com/wsxqaza12/Comparison-of-LLM-Specifications

https://www.scribbledata.io/blog/large-language-models-history-evolutions-and-future/