🎞️ Videos Build AI Agents with Agent Development Kit (ADK) and Gemini using JavaScript

Description

คุณบีท ปุณณ์สิริ บุณยเกียรติ Google Developer Expert และ LINE API Expert จะพาคุณไปรู้จักกับการสร้าง AI agent ด้วย JavaScript และ TypeScript ผ่านเครื่องมือ Agent Development Kit (ADK) จาก Google เซสชันนี้จะแสดงให้เห็นว่านักพัฒนาสาย web ไม่จำเป็นต้องพึ่งพาเพียงแค่ภาษา Python ในการสร้าง AI agent อีกต่อไป โดยเนื้อหาจะครอบคลุมตั้งแต่การจำลอง environment บน GitHub Codespaces การใช้งานโมเดลภาษา Gemini การกำหนดบทบาทของตัว agent ตลอดจนการเชื่อมต่อ tool ต่างๆ เพื่อเพิ่มความแม่นยำในการทำงาน เช่น ทำงานร่วมกับ Google Search และการดึงข้อมูลที่พักจาก Airbnb ผ่าน MCPToolset และยังครอบคลุมไปถึงการสาธิตวิธีเรียกใช้งาน agent ผ่าน REST API เพื่อให้นำไปปลั๊กเข้ากับแพลตฟอร์มต่างๆ ได้ง่ายขึ้น

Chapters

  • แนะนำเครื่องมือ Agent Development Kit (ADK) เปลี่ยนทุกคนให้สร้าง AI Agent ได้ 0:00
  • 4 ขั้นตอนหลักของการสร้าง AI: ใช้ JavaScript เชื่อมต่อได้ทุกแอปพลิเคชัน 1:11
  • องค์ประกอบของ AI Agent: โมเดลภาษา (LLM), เครื่องมือทำงาน (Tools), และคำสั่ง (Instruction) 2:02
  • ADK เป็น Framework แบบครบวงจร: ครอบคลุมตั้งแต่การสร้าง, Debug ไปจนถึง Deploy 3:03
  • สายงาน JS/TS เข้าถึงง่ายขึ้น: ไม่จำเป็นต้องพึ่งพาแค่ภาษา Python เสมอไป 4:01
  • เขียนโค้ดได้ทันทีไม่ต้องจำลอง Environment ด้วยเว็บคลิกเดียวอย่าง GitHub Codespaces 5:08
  • เริ่มต้นสร้างโปรเจกต์ด้วยการโหลดไลบรารีผ่านคำสั่ง npx @google/adk-devtools 6:28
  • คอนฟิกตั้งค่าก่อนรัน: เลือกโมเดล Gemini 2.5 และตั้งค่า GEMINI_API_KEY 9:07
  • สำรวจโค้ดที่สร้างอัตโนมัติ: การกำหนดบทบาทของ AI ลำดับขั้นตอนผ่าน instruction 11:22
  • ตรวจสอบการทำงานและรันแชตแอปพลิเคชันจำลองด้วยสคริปต์ npm run web 12:55
  • ทดสอบจำลองตอบคำถาม: กฎเหล็กคือถ้าเครื่องมือ (Tool) ไม่ดี AI ก็จะให้คำตอบที่ไม่ดีตามไปด้วย 15:02
  • อัปเกรดระบบเพื่ออุดช่องโหว่: แทนที่ฟังก์ชันแบบ Dummy ด้วย GOOGLE_SEARCH เพื่อดึงข้อมูลจริง 17:33
  • ทดสอบหลังการอัปเดต: สังเกตกระบวนการทำงานเมื่อ AI ควานหาความจริงเรื่องข่าวน้ำมัน 19:40
  • ดึงข้อมูลจากแพลตฟอร์มภายนอก: การต่อ MCPToolset ร่วมกับ Service นอกอย่าง Airbnb 20:54
  • เปลี่ยน Persona ใหม่: ปรับแก้โค้ดและคำสั่งให้กลายเป็นผู้ช่วยค้นหาที่พักเต็มรูปแบบ 22:34
  • สรุปผลลัพธ์ของ MCP Tool: AI สามารถลิสต์ที่พักน่าสนใจในสิงคโปร์พร้อมสรุปราคาได้ 23:34
  • ความสามารถด้าน REST API: สามารถนำ Endpoint ไปใช้ผ่าน curl หรือ Postman ได้เลย 25:18
  • บทส่งท้าย: เมื่อเทคโนโลยีพุ่งไปข้างหน้า เราต้องพยายามวิ่งให้ทันและไม่หยุดเรียนรู้ 28:23

Transcript

คำบรรยายต่อไปนี้อาจไม่ถูกต้องทั้งหมด หากคุณพบข้อผิดพลาดใดๆ คุณสามารถคลิกเมาส์ขวาบนข้อความเพื่อรายงานได้ทันที หรือ แก้ไขบน GitHub

แนะนำเครื่องมือ Agent Development Kit (ADK) เปลี่ยนทุกคนให้สร้าง AI Agent ได้0:00

สวัสดีค่า วันนี้ดีใจมากนะคะที่ได้มาอยู่ที่นี่กับทุกคน ปกติจะมานั่งฟังนะคะ

ชื่อบีทนะคะ ปุณณ์สิริ บุณยเกียรติ ปัจจุบันบีททำงานอยู่ที่ Central Food Retail ค่ะ และเป็น Google Developer Expert และ LINE API Expert ค่ะ

อันนี้ก็เป็นคำถามที่บีทถามในหัว ว่า "ทำไมถึงมาอยู่ที่นี่?" "ฉันมาทำอะไรตรงนี้?" เพราะว่าอันนี้คืองาน BKK.js แต่อย่างไรก็ดี รูปนี้บอกว่า AI มันสามารถเข้าไปอยู่ได้ทุกที่ ดังนั้นวันนี้บีทก็ขอเข้ามาอยู่กับทุกคนด้วยแล้วกันค่ะ

บีทจะพาทุกคน มารู้จักกับเครื่องมือ ที่ชื่อว่า Agent Development Kit ค่ะ เราจะมาสร้าง AI agent กันนะคะ หลายคนน่าจะใช้กันอยู่แล้วแหละ อย่างเช่นพวก ChatGPT Gemini มีใครใช้ OpenClaw ไหมคะ ฮอตฮิตมากช่วงนี้ วันนี้เราจะมาใช้เครื่องมือที่มาสร้าง เจ้า AI agent ที่เป็น chat application แบบนั้นนะคะ

4 ขั้นตอนหลักของการสร้าง AI: ใช้ JavaScript เชื่อมต่อได้ทุกแอปพลิเคชัน1:11

ซึ่งเราจะมี 4 step ด้วยกัน เดี๋ยวเราสร้าง AI agent ด้วย JavaScript กันนะคะ และลองใช้เครื่องมือต่างๆ อย่างเช่นเราให้เครื่องมือ AI ในการค้นหาต่างๆ หรือเราให้เครื่องมือ AI ในการเข้าถึง MCP tool นะคะ แล้วเราก็สามารถที่จะเอา AI ตัวนี้ไปต่อยอด โดยการที่เราเรียกมันผ่าน API

พอเราเรียกมันผ่าน API ได้เนี่ย แปลว่าเราสามารถเอาไปปลั๊กกับแอปพลิเคชันไหนๆ ก็ได้ จะเป็นหน้าเว็บก็ได้ จะเป็นแอปพลิเคชัน LINE ก็ได้ หรือจะเป็น chat messaging application อื่นๆ ก็ได้เหมือนกันค่ะ ทุกคนน่าจะรู้กันอยู่แล้วแหละ AI มันทำได้เยอะมากนะคะ แต่ว่าสิ่งที่เราจะใช้วันนี้ก็คือ เราจะใช้ในเรื่องของการ generate ข้อความตาม

หัวข้อโจทย์ที่เราอยากได้กันนะคะ

องค์ประกอบของ AI Agent: โมเดลภาษา (LLM), เครื่องมือทำงาน (Tools), และคำสั่ง (Instruction)2:02

ซึ่งจริงๆ แล้วคำว่า AI agent เนี่ย องค์ประกอบมันมีแค่ 2-3 อย่างหลักๆ แล้วกัน ก็คือเรื่องของโมเดลภาษา ที่อยู่ภายใต้แอปพลิเคชันนั้น อย่างเช่นตัวแอปพลิเคชัน ChatGPT ที่ทุกคนเข้าไปใช้กันทุกวันเนี่ย โมเดลมันก็มีแบบ ChatGPT 4o, 5o ใช่ไหม

Gemini เองก็มี Gemini 3.1, Gemini 2.5 อันนั้นก็คือตัวโมเดลภาษา ที่ทำให้ AI มันฉลาดนะคะ อันที่สองก็คือเครื่องมือต่างๆ ที่ AI สามารถหยิบไปใช้งานได้ อย่างเช่นเครื่องมือในการ generate รูปภาพ เครื่องมือในการเข้าถึง Google Sheets เครื่องมือในการเข้าถึงปฏิทินของเรา เพื่อเข้าไปเช็กตารางให้เรา หรือว่าเครื่องมือในการเข้าถึงไฟล์ในเครื่องเรา เพื่อไปจัดการไฟล์ให้เรา

สุดท้ายก็คือเรื่องของตัว reasoning ตัวคำสั่งที่เราป้อนไปให้กับตัว AI ว่ามันควรจะทำงานยังไง และเราจะไป deploy เขาอยู่ที่ไหนค่ะ

ADK เป็น Framework แบบครบวงจร: ครอบคลุมตั้งแต่การสร้าง, Debug ไปจนถึง Deploy3:03

เอาล่ะ อันนี้เป็นรูปของตัว framework ที่บีทจะมาแนะนำให้ทุกคนรู้จักกันวันนี้ ก็คือตัว Agent Development Kit นะคะ ซึ่งมันเป็น framework ที่เอาไว้ใช้พัฒนา AI agent เนาะ เราสามารถที่จะใช้ตัวนี้ได้ตั้งแต่เริ่มสร้างเลย และพอสร้างเสร็จแล้ว มีเครื่องมือเรียบร้อยแล้ว ก็สามารถที่จะใช้ในการ debug ได้ด้วย ว่าไอ้ตัว AI agent ที่เราทำมา มันตอบคำถามถูกผิดยังไง เรียกใช้เครื่องมือถูกต้องไหม เดี๋ยวบีทพาเดโม ทุกคนน่าจะเห็นภาพกันมากขึ้น แต่ว่าที่อยากจะบอกในรูปนี้ก็คือว่า framework ตัวนี้ วันนี้บีทอาจจะพอดูแค่เบสิกนะ แต่จริงๆ มันสามารถทำได้ตั้งแต่เริ่มสร้าง agent ทำ orchestrate agent แบบที่มี sub-agent หลายๆ ตัวทำงานร่วมกัน

รวมถึงการ debug การจัดการเรื่อง context memory การที่เราจะ deploy ขึ้นไปนะคะ

สายงาน JS/TS เข้าถึงง่ายขึ้น: ไม่จำเป็นต้องพึ่งพาแค่ภาษา Python เสมอไป4:01

ซึ่งอยากจะบอกว่า พอพูดถึง AI agent สิ่งที่ทุกคนจะนึกถึงคือ AI engineer ใช่ไหม data science แล้วคนเหล่านี้เขาจะใช้ภาษาหลักๆ ก็คือ Python ซึ่งบางทีนักพัฒนาหลายๆ คน อาจจะไม่คุ้นเคยกับ Python ทุกคนนะคะ ซึ่งอยากจะบอกว่า ตอนนี้ล่าสุดเลยก็คือเมื่อเดือน

ขออภัยด้วยนะคะ ไม่เป็นไรครับ ก่อนหน้านั้น อยากจะบอกว่าเดือนธันวาที่ผ่านมา เขามีออกภาษาของตัว TypeScript

ที่ทำงานอยู่บน JavaScript ให้เราได้ใช้งานกัน ซึ่งบีทว่า TypeScript อะไรแบบเนี้ย มันค่อนข้างที่จะเป็นภาษาที่เข้าถึงคนได้เยอะมาก หลายๆ คนน่าจะคุ้นเคย กับการ define ตัวแปรต่างๆ define ฟังก์ชันแบบ TypeScript ก็เลยอยากจะยกขึ้นมา ให้ทุกคนได้เรียนรู้ไปพร้อมๆ กันนะคะ โอเค ไม่พูดพร่ำทำเพลงมาก

เขียนโค้ดได้ทันทีไม่ต้องจำลอง Environment ด้วยเว็บคลิกเดียวอย่าง GitHub Codespaces5:08

อยากจะชวนหยิบมือถือขึ้นมานะคะ สแกน code lab อันนี้ ซึ่งเดี๋ยวจะเป็นแล็บที่บีทพาเดโม ไปทำด้วยกัน แล้วก็เพื่อนที่อยู่ทางบ้าน สมมติว่าถ้าอยากกลับไปทำต่อ ก็สามารถที่จะเอาไปทำตามได้นะคะ

ระหว่างที่ทำ code lab อันนี้ เดี๋ยวบีทจะอ้อนวอนต่อสิ่งศักดิ์สิทธิ์ ว่าเดโมไป ขอให้ไม่มีอะไรผิดพลาด โอเค วันนี้ code lab อันนี้ บีทจะทำบนเว็บที่ชื่อว่า GitHub Codespaces เพราะว่ามันจะช่วยอย่างมากเลย ในเรื่องของการที่เราจะสร้างพื้นที่เขียนโค้ดขึ้นมาใหม่ โดยที่เราไม่ต้องมาสร้าง environment มาลงโปรแกรมอะไรต่างๆ ให้มันวุ่นวาย GitHub Codespaces เนี่ย พอเราเปิดเข้ามาใช่ไหมคะ เราสามารถที่จะสร้างตัว virtual space ขึ้นมาในการเขียนโค้ดได้เลยนะคะ อันนี้บีทเลือก create blank ขึ้นมา มันก็จะได้เป็นหน้าตาโปรเจกต์แบบเนี้ย เหมือน VS Code เลย ทุกคนคุ้นเคยไหม หน้าตาแบบนี้ คุ้นเนาะ ด้านมุมซ้ายสุดก็จะเป็นพื้นที่ ในการที่เราเอาไว้ดูไฟล์นะคะ แล้วก็ตรงนี้ก็จะเป็นพื้นที่เขียนโค้ด แล้วก็ตรงนี้จะเป็น terminal นะคะ

เริ่มต้นสร้างโปรเจกต์ด้วยการโหลดไลบรารีผ่านคำสั่ง npx @google/adk-devtools6:28

โอเค สำหรับใน CodeLab นะคะ ที่บีทให้ทุกคนสแกนไปเมื่อกี้

จะเป็นสเตปที่เดี๋ยวบีทจะพาเดโมให้ทุกคนดูวันนี้เลยว่า เราจะสร้าง AI agent ด้วย TypeScript ได้ยังไงนะคะ ซึ่ง framework หลักใน runtime ที่จะสร้าง agent

ก็คือใช้ตัว Node.js นะคะ แล้วก็ใช้ npx เป็นตัวจัดการแพ็กเกจต่างๆ ของตัว Node นะคะ บีทจะเริ่มรันคำสั่งแรกเลยก็คือ npx @google/adk-devtools

ซึ่งอันนี้เป็นไลบรารีของ Agent Development Kit ที่พัฒนาโดย Google นะคะ แล้วเราจะห้อยคำสั่งสองคำสั่งไว้ข้างท้ายด้วยก็คือ create ตามด้วยชื่อโปรเจกต์ชื่อว่า create my_first_agent นะคะ เดี๋ยวบีทจะก๊อปปี้อันนี้ ไปรันใน Codespace

อันนี้ allow ให้ก๊อปปี้นะคะ สิ่งที่จะเกิดขึ้นก็คือ npm เขาจะถามเราว่า เราต้องการที่จะลงโปรแกรมที่ชื่อว่า

@google/adk-devtools หรือไม่นะคะ ก็ให้ตอบ yes ไปว่าโอเค ลงค่ะ ซึ่งถ้าเกิดว่าเพื่อนๆ อยากจะไปทำที่บ้าน เราจะต้องลง Node.js ก่อนนะคะ เราถึงจะสามารถที่จะทำตามสเตปอันนี้ได้นะคะ หลังจากนั้นเนี่ย ก็จะต้องรอสักพักหนึ่งนะคะ ให้ตัว npx ช่วยเราในการที่จะไปค้นหาไลบรารี

ของตัว ADK นี้มาลงใน environment

ที่เราจะใช้ในการเขียนโค้ดตรงนี้

ระหว่างที่รอ บีทก็กลับมาทวนสเตปแป๊บหนึ่งนะคะ

เมื่อกี้สิ่งที่เราทำก็คือ เราสร้าง Codespace จากนั้นเราลงแพ็กเกจที่ชื่อว่า @google/adk นะคะ

ซึ่งถ้าเราลงตัว @google/adk-devtools มันจะพ่วงตัว ADK มาให้เลยนะคะ ตัว devtools เหมือนเป็นแพ็กเกจที่เข้ามาช่วยให้เรา สามารถที่จะเรียกใช้งาน ADK ผ่านคำสั่งที่อยู่บน command line ได้ ก็คือเราสามารถพิมพ์สั่ง framework ของ ADK ให้รัน agent สร้าง agent ได้เหมือนที่เราสั่ง create my_first_agent นะคะ

คอนฟิกตั้งค่าก่อนรัน: เลือกโมเดล Gemini 2.5 และตั้งค่า GEMINI_API_KEY9:07

มาดูกันดีกว่า อันนี้คือรันเสร็จแล้วนะทุกคน ก็คือพอบีทสั่งว่า npx...

adk-devtools ใช่ไหมคะ @latest ก็คือเอาเวอร์ชันล่าสุด สั่งให้ create my_first_agent จะเห็นว่าสิ่งที่เกิดขึ้น ก็คือมันจะมีโฟลเดอร์ my_first_agent โผล่ขึ้นมาเนาะ แล้วก็ตรง terminal ตรงเนี้ย เขาถามบีทว่า บีทต้องการจะสร้าง agent ด้วยโมเดลภาษาแบบไหน อันนี้บีทจะเลือก Gemini 2.5

อ่ะ เห็นไหม มาและ ก็คือเขามีให้เลือกด้วยว่า โอเคนะคะ เราจะสร้าง agent ด้วยภาษาอะไรดีเอ่ย บีทจะเลือกเป็นภาษา JavaScript นะคะ แล้วก็ต้องการใช้ backend อะไร ในการที่จะประมวลผลของตัว agent นะคะ บีทจะเลือกเป็น Google AI คราวนี้ถ้าเลือกเป็น Google AI อ่ะ เราจะต้องเอาตัว API key ของ Google นะคะ มาให้กับตัว ADK framework นะคะ เพื่อที่จะให้ ADK framework อ่ะ สามารถเชื่อมต่อไปยัง Gemini ซึ่งเป็นโมเดลภาษาได้ บีทก็จะทำการ copy API key ตรงนี้นะคะ แล้วเดี๋ยวเอามาวางไว้ แบบนี้

โอเค พอบีท copy ไปแบบนี้นะคะ ทุกคนห้ามแคปจอนะ เดี๋ยวบีทลบ API key อันนี้ โอเค ก็จะเห็นว่าสิ่งที่เกิดขึ้นน่ะ มันจะมีการสร้างไฟล์เพิ่มขึ้นเนาะ สิ่งที่เกิดขึ้นคือ my_first_agent เนี่ย จะมีโฟลเดอร์ node_modules ก็คือเขาทำการลง library ที่เกี่ยวข้อง ในการสร้าง AI agent มาให้ แล้วก็มีตัว environment ด้วยนะคะ ซึ่งเดี๋ยวบีทขอเปลี่ยนตรงนี้เป็นคำว่า GEMINI_API_KEY

แล้วก็มีไฟล์ agent.js ก็คือเป็นไฟล์ที่บอกว่า agent ของเราอ่ะ มันจะทำงานอย่างไร เพื่อออกมาเป็นตัว chat agent แล้วก็สร้าง chat application ให้เราสามารถที่จะคุยกับ Gemini ได้นะคะ

สำรวจโค้ดที่สร้างอัตโนมัติ: การกำหนดบทบาทของ AI ลำดับขั้นตอนผ่าน instruction11:22

โอเค มาดูโค้ดที่มัน auto-gen ให้ดีกว่านะคะ ตัวโค้ดตัวนี้เขาจะ auto-gen มาให้เลยว่า มี class ที่เป็นสร้างตัว agent ขึ้นมา ซึ่งถ้าทุกคนสังเกตไส้ใน สิ่งที่จะเห็น ก็คือเห็นชื่อว่า agent ตัวนี้ชื่อว่า hello_time_agent นะคะ เห็นโมเดลว่าเขาตั้งชื่อโมเดลว่า Gemini 2.5 Flash นะคะ แล้วก็เห็นคำสั่งว่า agent เนี่ย ทำงานยังไงบ้าง

คุ้น ๆ กับไอ้รูปที่อธิบายความหมายของ agent ไหม มันคือคอนเซปต์เดียวกันเลยอะ คือเราสร้าง AI ขึ้นมาตัวหนึ่ง บอกว่า โอเค คุณชื่อ HR Agent นะ

ทำหน้าที่เป็นเจ้าหน้าที่ดูแลเรซูเม่ อะไรอย่างนี้ หรือว่าเราอยากจะให้ AI ไปทำงานแทน เป็นนักข่าว เขียนบทความ เราก็มาระบุว่า โอเค คุณชื่อคุณนักข่าวนะ มีหน้าที่ในการค้นหาข่าวล่าสุด แล้วมาสรุปเป็นบทความ แบบนี้นะคะ ก็คือเราสามารถที่จะสร้าง AI agent แบบไหนก็ได้เลยที่เราอยากจะได้นะคะ ซึ่งตัวเนี้ยที่เขาให้เรามาเป็นพื้นฐาน ก็คือชื่อว่า hello_time_agent สิ่งที่เห็นใน instruction ที่ให้มาก็คือว่า คุณสามารถที่จะบอกเวลาปัจจุบันได้นะคะ

ตรวจสอบการทำงานและรันแชตแอปพลิเคชันจำลองด้วยสคริปต์ npm run web12:55

วิธีการใช้งานเจ้า ADK นะคะ

พอเราลง npm package ที่มันเกี่ยวกับ

agent development kit เข้าไปแล้วเนี่ย เราสามารถที่จะเรียกใช้ ADK ผ่าน command line ใน terminal ได้ ซึ่งมันจะผ่าน npx นะคะ เราจะเรียก npx adk ซึ่งถ้า -h หรือ --help อย่างนี้ มันจะให้ดูใช่ไหมว่า เราเรียกใช้ command อะไรได้บ้าง อย่างเช่นว่า create agent, สั่ง run, สั่ง deploy, สั่งสร้างเป็น API server หรือว่าสั่ง integrate นะคะ เดี๋ยวเราจะมารันคำสั่งแรกกันเลยนะคะ

ก็คือ

เราต้อง cd เข้าไปก่อนเนาะ เข้าไปในโฟลเดอร์ my_first_agent นะคะ แล้วก็พิมพ์ว่า npx adk นะคะ

แล้วก็ --help อ่า อันนี้ก็คือสำหรับว่าเราอยากรู้ว่า ADK มันมีคำสั่งอะไรบ้างนะคะ มีใครคุ้นชินกับการเขียน Node.js ไหมคะ

คุ้นไหม คุ้นไหม Node.js ก็น่าแทบจะทั้งห้อง อ้อ น่าจะทั้งห้องเนาะ อาจจะมีบีทคนเดียวที่ไม่ค่อยคุ้น หยอกนะคะ คือถ้าเรารู้ว่ามันจะมีแบบว่า

การเขียนสคริปต์ในการสั่งรัน สั่ง deploy อะไรอย่างนี้ได้เนาะ ซึ่งตัว ADK อะ ที่มันคำสั่ง create อะ

ตอนมันสร้างโฟลเดอร์พื้นฐานมาให้เราอะ มันมาพร้อมกับคำสั่งสคริปต์ ในการรันเว็บ รัน CLI พวกนี้ด้วยนะคะ ซึ่งเราสามารถที่จะเลือกใช้เป็นแบบว่า npx adk web ก็ได้ หรือว่าจะใช้เป็น npm run web

ก็คือมาเรียกใช้เจ้าสคริปต์ ที่อยู่ใน package.json ได้เลยนะคะ

ทดสอบจำลองตอบคำถาม: กฎเหล็กคือถ้าเครื่องมือ (Tool) ไม่ดี AI ก็จะให้คำตอบที่ไม่ดีตามไปด้วย15:02

ซึ่งเดี๋ยวบีทจะใช้คำสั่ง npm run web

แบบนี้ สิ่งที่เกิดขึ้นก็คือว่าเขาจะเปิด browser ทั้งหมด เอาไฟล์ใน agent ทั้งหมดอะ มาสร้างเป็นแชทแอปพลิเคชันให้เรา บีทจะกด Open in browser แบบนี้ โอเค

อะ มันจะได้หน้าเว็บแบบนี้เลย เป็นหน้าเว็บที่เราสามารถที่จะแบบเหมือน ทดสอบ AI agent มันเหมือนเป็นหน้าแชทอะ เพราะเรากำลังจะสร้างอะไรบางอย่างที่มันคล้ายกับ Gemini หรือว่า ChatGPT แต่อยู่ในรูปแบบที่ ใช้สำหรับให้มันเหมาะกับงานของเรานะคะ เดี๋ยวบีทลองเทสต์ดูแบบว่า สวัสดีก่อน สวัสดี ดูว่ามันตอบไหม อะ อันนี้ก็คือตอบแล้วนะคะ บอกว่า สวัสดี คุณสามารถที่จะ

บอกเวลาปัจจุบันของคุณ อยากรู้เวลาของเมืองไหน

อยากรู้เวลาของกรุงเทพฯ นะคะ

ดูว่า agent มันจะตอบว่ายังไงนะ ซึ่งสิ่งที่เกิดขึ้นก็คือ agent ตัวนี้ มันไปเรียก getCurrentTime ซึ่งตอบผิด เพราะว่าอะไร เพราะว่าใน tool ตัวนี้ ไอ้เครื่องมือที่เราให้ agent ไป

ถ้าเราเข้าไปดูในไฟล์ที่ชื่อว่า agent.ts เนาะ แล้วเราก็จะเห็นว่ามันมีการเรียกใช้เครื่องมือ ที่ชื่อว่า getCurrentTime แต่ใน getCurrentTime นั้น เราทำเป็น dummy function ว่า ถามประเทศอะไรให้ตอบ 10 โมงตลอด

แปลว่า AI agent ใดๆ ที่มันมีเครื่องมือที่ห่วย คำตอบก็จะห่วย ถูกไหม เหมือนแบบบีทบอกว่า บีทให้พี่เป็นนักฆ่าสัตว์ที่เก่งที่สุด แต่ว่าบีทให้แค่มีดคัตเตอร์นะ ไม่ให้ขวาน อะไรเงี้ย เข้าใจป่ะ ในการให้ tool agent มันก็เหมือนกัน แบบว่าเราให้เครื่องมือนะคะ

อัปเกรดระบบเพื่ออุดช่องโหว่: แทนที่ฟังก์ชันแบบ Dummy ด้วย GOOGLE_SEARCH เพื่อดึงข้อมูลจริง17:33

ซึ่งเดี๋ยวจะพาไปสเต็ปถัดไปของ codelab อันนี้ ก็คือเรื่องของ tool ที่ agent สามารถดึงมาประมวลผลได้ tool ก็คือเครื่องมือ ที่ทำให้ agent ตอบคำถามได้แม่นยำขึ้น ใครที่เคยเล่น OpenClaw มา มันก็มี tool เยอะแยะเลย ให้ไปเข้าไฟล์เราบ้าง ให้ไปดึงอีเมลบ้าง อะไรเงี้ยเนาะ ซึ่งใน ADK ถ้าเราจะสร้าง agent มันก็มี tool ให้เราเลือกเยอะมากเหมือนกันนะคะ ไม่ว่าจะเป็น tool ที่เราสร้างเอง ผ่าน function ที่เป็น JavaScript ของเรา หรือจะเป็น tool ที่ Google เขาทำมาให้เราแล้วนะคะ tool ที่เป็น MCP ก็ได้เนาะ เพราะฉะนั้น ตะกี้เราไปส่วนที่ 1 แล้ว

เราจะมาส่วนที่ 2 ของ codelab ก็คือเดี๋ยวเราจะเพิ่มตัว tool ที่เป็น Google Search Tool เข้าไปนะคะ โดยบีทจะทำการเพิ่ม Google Search Tool เข้าไป ใน class ที่เรียก import จาก Google ADK เนาะ

จะเข้ามาเพิ่มตรงนี้นะคะ แบบนี้

แล้วก็แทนที่ตัว agent จะเรียก tool ที่เป็น getCurrentTime ที่เป็น function ที่เราเขียนไว้แบบ dummy ให้มันเรียกแบบ Google Search Tool แทนนะคะ คราวนี้บีทไม่อยากให้มันเป็น agent get current time แล้ว บีทอยากให้มันเป็นนักวิเคราะห์ข่าวแล้วกัน บีทจะเปลี่ยนคำสั่งของมันว่า คุณคือนักวิเคราะห์ข่าวผู้เชี่ยวชาญในการค้นหาข้อมูล

ทดสอบหลังการอัปเดต: สังเกตกระบวนการทำงานเมื่อ AI ควานหาความจริงเรื่องข่าวน้ำมัน19:40

จริงๆแล้ว instruction ตรงเนี้ย มันจะต้องเขียนให้แบบละเอียดอ่ะ ตามที่เราอยากจะให้ agent เราทำงานยังไงอ่ะเนาะ โอเค แต่เดี๋ยวบีทเขียนสั้นๆอย่างนี้ เพื่อให้เดโมมันรวดเร็วนะคะ แล้วก็พอจะทดสอบ agent อีกครั้งนึงเนี่ย

บีทจะทำการ Ctrl+C เพื่อ killing ตัว process เดิมไปก่อนเนาะ แล้วก็บีทจะ npm run web ขึ้นมาใหม่อีกครั้งนึง

เพื่อให้มัน fetch ตัว instruction ใหม่นะคะ แล้วก็กด open to browser เพื่อทดสอบอีกครั้งเนาะ ซึ่งช่วงนี้แบบข่าวที่น่าสนใจคือเรื่องน้ำมัน สรุปข่าวน้ำมันวันนี้

โอเค ดูซิๆ

สิ่งที่เกิดขึ้นตอนนี้ก็คือว่า มันจะเอาไอ้คำถามของ user เราเนี่ย แล้วก็วิ่งไปหา Gemini พร้อมกับวิ่งไปหา GOOGLE_SEARCH tool แล้วก็จะเห็นว่าผลลัพธ์ก็คือตัว AI agent แทนที่จะตอบแบบโง่ๆ มันก็ตอบมาเป็นแบบสรุปข่าวน้ำมันแบบที่เราต้องการนะคะ

ดึงข้อมูลจากแพลตฟอร์มภายนอก: การต่อ MCPToolset ร่วมกับ Service นอกอย่าง Airbnb20:54

โอเค ถัดไปนะคะ ก็คือการเชื่อมต่อ MCP Tool

ซึ่ง ณ ปัจจุบันอ่ะ มันมี MCP Tool เยอะมากใช่ไหม อย่างพี่ตั้งก็เล่าเรื่อง MCP Web ที่สามารถทำให้ AI ของเราไปเข้าเว็บได้อะไรเงี้ย มันมี MCP สำหรับ GitHub ที่ทำให้ AI ของเราไปเช็คโค้ดใน git แทนเราได้ วันนี้บีทเอา MCPT ool ของ Airbnb มาให้ลองนะคะ ซึ่งการที่จะให้ ADK ใน JavaScript ตัวนี้เรียกนะคะ เราก็จะต้องทำการ import ตัว class ที่ชื่อว่า MCPToolset เข้ามาเพิ่มเนาะ บีทจะปิดตัวนี้ไปก่อนนะคะ แล้วก็กลับมาแก้โค้ดโดยการ import ตัว MCPToolset นะคะ

ซึ่งปกติอ่ะ ถ้าเกิดว่าใครเคยเขียนแบบเชื่อมต่อ MCP อ่ะ

จะรู้ว่ามันจะมี configuration ในการเชื่อมต่อ MCP แบบว่าไปเรียก package ของ npx ที่ไปรัน MCP server ข้างหลังอีกทีนึงอะไรเงี้ย เราสามารถที่จะเรียกแบบนั้นได้เลยนะคะ ในการที่จะเรียกแบบ local-to-local เนาะ โอเค เพราะฉะนั้นบีทจะสร้างเอาโค้ดชุดนี้ไปวางเนาะ ก็คือสร้างตัวแปรที่ชื่อว่า AirbnbToolSet ที่ถูกสร้างมาจาก MCPToolset เนาะ แล้วก็สร้าง server เนี่ย จากตัว package ที่ชื่อว่า openbnb นะคะ แบบนี้ ก๊อปปี้ส่วนนี้เนาะ แล้วก็...

เปลี่ยน Persona ใหม่: ปรับแก้โค้ดและคำสั่งให้กลายเป็นผู้ช่วยค้นหาที่พักเต็มรูปแบบ22:34

โอเค คราวนี้เจ้า agent ของบีทนะ แทนที่จะเรียก GoogleSearch บีทไม่ให้เรียก GoogleSearch แล้ว บีทก็มาเรียก AirbnbToolSet แทนนะคะ แล้วก็ บีทไม่เอาละ ไม่ให้เป็นนักวิเคราะห์ข่าวละ ให้เป็นผู้ช่วยในการค้นหาโรงแรม คุณคือ ก็จะมาแก้ไขตรงนี้ instruction ผู้ช่วยในการค้นหาที่พัก

โอเค เอาแค่นี้เลย แล้วก็จะ kill อันนี้ก่อนนะคะ

แล้วก็สั่ง npm run web ขึ้นมาใหม่ โอเค กด open in browser เนาะ เดี๋ยวจะโหลดตัว agent ขึ้นมาใหม่นะคะ แล้วก็ อันนี้บีทจะทำการทดสอบ agent จากที่ตอนแรกเราให้มันเชื่อมต่อด้วย Google Search Tool ให้มาเชื่อมต่อโดย MCP Tool แทนเนาะ

สรุปผลลัพธ์ของ MCP Tool: AI สามารถลิสต์ที่พักน่าสนใจในสิงคโปร์พร้อมสรุปราคาได้23:34

ก็จะบอกว่า ค้นหาที่พัก ที่ไหนดีคะ

สิงคโปร์ โอเค ขอบคุณมากค่ะ สิงคโปร์ให้หน่อย

โอเค มาดู มาดู

อันนี้ก็คือเข้าใจว่าโอเค ข้างหลังเนี่ย ก็คือตัว agent มันจะเอาคำสั่งของเราเนี่ยไป คู่กับ instruction prompt ใช่ไหม แล้วก็ไปทำการ reasoning ว่า จะเลือก tool อะไรดีเนาะ ซึ่งอันนี้เนี่ย มันก็รู้แล้วล่ะว่า โอเค มันจะต้องเลือก tool ที่เป็น Airbnb Search นะคะ สิ่งที่เกิดขึ้นก็คือว่า ไอ้ tool ที่เป็น Airbnb Search เนี่ย มันเป็น MCP ที่สร้างโดย Airbnb นะ

แล้วมันก็ไปเลือกในการที่จะ list ที่พัก ใช่ไหมในสิงคโปร์ แล้วก็เอามาสรุปให้เราแบบนี้เลยว่า มีที่พักแบบนี้ แบบนี้

ในช่วงเวลานี้ อะไรอย่างงี้ ราคาเท่านี้ เท่านี้ ซึ่งถ้าเราอยากจะให้มันมีความสามารถเพิ่มใช่ไหม เราก็เพิ่ม tool เข้าไปอีกสิ ในการแบบว่า จอง flight บิน

เพิ่ม tool เข้าไปอีก ในการที่จะเอาของพวกนี้ แบบพอจอง flight เรียบร้อยแล้ว ส่ง calendar แจ้งให้เพื่อนเราทุกคน ต่อ Line ส่งเข้าไปในกลุ่ม Line ก็มี MCP tool เหมือนกันเนาะ โอเค concept ก็จะประมาณนี้นะคะ

ความสามารถด้าน REST API: สามารถนำ Endpoint ไปใช้ผ่าน curl หรือ Postman ได้เลย25:18

เอาละ คราวนี้พอ agent มันเชื่อมต่อ tool ได้แล้วเนี่ย อีกสิ่งหนึ่งที่บีทมองว่าสำคัญนะคะ ก่อนที่จะจบ ก็คือเรื่องของการที่ มันจะต้องเรียกได้ หมายถึงว่า มันจะต้องเอาไปต่อได้กับ API อื่น ๆ

ซึ่งถ้าเราลองดูตัว ADK เนี่ย

มันมาพร้อมกับ เวลาเราสั่ง deploy ปุ๊บเนี่ย มันมาพร้อมกับ REST API ที่นอกเหนือจากเราทดสอบบนหน้าเว็บได้เมื่อกี้ เราสามารถเรียกผ่าน REST API ได้ด้วย โอเคเนาะ ซึ่งเดี๋ยวบีทจะลอง curl ให้ดู

เบื้องต้นเอา curl แบบใน local ก่อนนะคะ

ถ้าเกิดว่าทุกคนเคยใช้ตัว GitHub Codespaces อะ มันจะเปิดพอร์ต จะเห็นว่าพอร์ตที่เปิดอยู่ของ SDK คือ 8000 นะคะ ซึ่งโอเค ตอนนี้ 8000

พอเราเปิดไปมันเป็นเว็บใช่ไหมคะ แล้วก็บีทจะมาปรับ port visibility ตรงนี้ ให้เป็น public นะคะ แล้วก็ในส่วนของ terminal

บีทจะบวกเพิ่มขึ้นมาอีกหนึ่ง terminal เนาะ แล้วบีทก็จะพิมพ์คำสั่ง curl ในการเรียก get จะเห็นว่าฟังก์ชัน GET /list-apps อันนี้ มันได้ตัวแอปก็คือมีแอปที่ชื่อว่า agent หนึ่งอันนะคะ แล้วถ้าเราลองเอา copy ตัว address อันนี้

คือเราสามารถที่จะทดสอบ curl มันได้นะคะ ผ่าน Postman นะคะ บีทเอาอันนี้มาวางเป็นตัวลิงก์ แล้วก็มันจะมี API ในการไปเรียก createSession นะคะ

ซึ่งอันนี้บีทก็สั่งสร้าง session ที่ชื่อว่า s_126

แต่ว่า session จริง ๆ จะเป็น session ID อะไรก็ได้อะไรเงี้ยเนาะ เราสามารถที่จะส่ง context เข้าไปด้วย ให้ agent รู้ว่าเอออันนี้ชื่อบีทนะ อายุเท่านี้แบบนี้ก็ได้ เพื่อให้ agent มันฉลาดขึ้น ส่ง memory context เข้าไปด้วยก็ได้ แล้วเราก็สามารถยิงอีก REST API หนึ่งนะคะ

ที่ชื่อว่า run หรือว่า runSSE ก็คือแบบยิงแบบแช็ตต่อเนื่องเงี้ยเนาะ ตัว run เนี่ยมันจะส่งพารามิเตอร์ ก็คือคำถามของ user ที่จะคุยกันนี่แหละ สมมติว่า user เราสามารถเอาไปต่อหน้าบ้านได้ค่ะ

หน้าบ้านเรารับข้อความมาปุ๊บ เราเอาข้อความของ user มายิงใส่เจ้า API ที่ ADK provide ให้ แล้วเราก็ได้คำตอบแบบนี้เลย ซึ่งแปลว่าอันนี้คือเราสามารถที่จะ ทั้งสร้าง agent ได้ด้วย ADK แล้วก็เอาไปพัฒนาต่อ ในการเอาไปเชื่อมต่อกับหน้าบ้านได้แล้วนะคะ

บทส่งท้าย: เมื่อเทคโนโลยีพุ่งไปข้างหน้า เราต้องพยายามวิ่งให้ทันและไม่หยุดเรียนรู้28:23

โอเค เหลือประมาณหนึ่งนาทีสุดท้าย

บีทค่อนข้างที่จะแร็บพอสมควร แต่ว่าขอบคุณทุกคนที่มาอยู่ฟังด้วยกันนะคะ บีทรู้สึกว่าเรื่อง AI Agent มันเป็นเรื่องใหม่

บางทีเราก็มีความรู้สึกว่าเรียนรู้ไม่ทัน

เพราะว่าอาทิตย์หนึ่งออกมาสามตัว สี่ตัว ห้าตัว แต่บีทคิดว่าบีทคงจะ encourage ให้ทุกคนทำแบบเดียวกัน ก็คือว่าอย่าหยุดวิ่ง วิ่งไม่ได้ก็เดิน เดินไม่ได้ก็คลาน เพราะเราต้อง move ไปข้างหน้าพร้อมกับเทคโนโลยีนะคะ ตราบใดที่เราไม่ยอมแพ้ เราก็จะไม่แพ้ ตราบใดที่เรายังไม่หยุดวิ่ง เราก็มีโอกาสที่จะมีงานทำ มีชีวิตต่อไปนะคะ

เราต้องสู้ไปด้วยกันทุกคน โอเค สำหรับวันนี้บีทขอบคุณทุกคนมากๆ ค่ะ ขอบคุณครับ

Edit metadata on GitHub

How to Contribute to Transcripts

Report Inaccuracies

1

Select text and click Report

Highlight the inaccurate text in the transcript, then click the Report button that appears.

2

Right-click any transcript text

Right-click on any transcript segment to select it and show the Report button.

Keyboard Shortcuts

Cycle playback speedS
Navigate to timestampPaste
Play/pause videoSpace
Seek ±5 seconds← →
Paste timestamps like "00:02:20.680" to jump to that position