Laravel 13 AI #5 Membangun Mentor AI & Sesi Diskusi

• Step 1 - Instalasi Renderer Markdown
• Step 2 - Membuat AI Agent (Mentor AI)
• Step 3 - Controller: Simpan & Ambil Chat
• Step 4 - UI: Render Markdown di Show.vue
• Kesimpulan

Halo semuanya! 👋

Di Part 5 ini, kita akan masuk ke bagian paling menarik: Kecerdasan Buatan. Kita akan membuat sistem yang bisa menganalisis skripsi secara kritis dan menyediakan chat interaktif yang persisten dengan tampilan Markdown yang rapi.

Step 1 - Instalasi Renderer Markdown

Agar pesan dari AI yang mengandung format (seperti tebal, miring, atau list) tampil cantik, kita butuh library markdown-it.

Jalankan di terminal:

npm install markdown-it

Step 2 - Membuat AI Agent (Mentor AI)

app/Ai/Agents/ThesisChatAgent.php

namespace App\Ai\Agents;

use Laravel\Ai\Contracts\Agent;
use Laravel\Ai\Promptable;
use Laravel\Ai\Concerns\RemembersConversations;

class ThesisChatAgent implements Agent, \Laravel\Ai\Contracts\Conversational
{
    use Promptable, RemembersConversations;

    public function __construct(
        protected ?string $title = null,
        protected ?string $section = 'umum'
    ) {}

    public function instructions(): string
    {
        return "Anda adalah Mentor Akademik Senior. Berikan jawaban dalam format Markdown yang rapi.";
    }
}

Step 3 - Controller: Simpan & Ambil Chat

app/Http/Controllers/DocumentController.php

use App\Models\AgentConversationMessage;

public function show(Thesis $thesis)
{
    $chatHistory = AgentConversationMessage::where('conversation_id', $thesis->conversation_id)
        ->orderBy('created_at', 'asc')
        ->get();

    return Inertia::render('Documents/Show', [
        'thesis' => $thesis->load('analyses'),
        'chatHistory' => $chatHistory
    ]);
}

public function chat(Request $request, Thesis $thesis)
{
    $agent = new ThesisChatAgent($thesis->title, $thesis->section);

    if ($thesis->conversation_id) {
        $response = $agent->continue($thesis->conversation_id, auth()->user())->prompt($request->message);
    } else {
        $response = $agent->forUser(auth()->user())->prompt($request->message);
        $thesis->update(['conversation_id' => $response->conversationId]);
    }

    return back();
}

Step 4 - UI: Render Markdown di Show.vue

Gunakan markdown-it di dalam Vue component untuk mengubah teks mentah menjadi HTML.

resources/js/Pages/Documents/Show.vue

<script setup>
import MarkdownIt from 'markdown-it';
const md = new MarkdownIt();

const renderMarkdown = (content) => {
    return md.render(content || '');
};
</script>

<template>
    <!-- Gunakan v-html untuk menampilkan hasil render -->
    <div class="prose-sm" v-html="renderMarkdown(msg.content)"></div>
</template>

<style scoped>
/* Tambahkan styling untuk list dan bold */
:deep(.prose-sm strong) { font-weight: 700; }
:deep(.prose-sm ul) { list-style-type: disc; padding-left: 1.25rem; }
</style>

Kesimpulan

Platform Mentorship AI Anda kini sudah sempurna! Chat terasa hidup, responsif (dengan polling), dan tampilannya sangat profesional berkat Markdown.