Beyond Chat:

Exploring the Power of Gemini

​

Tanitphon Paniwan (Mike)

CTO @ Apppi

• Tanitphon Paniwan (Mike)
• CTO at Apppi
• Content Creator at Mikelopster
• Web specialist

Hello I’m Mike

Speaker

Chat to start writing, planning, learning and more with Google AI

Supercharge your creativity and productivity

More than AI Chat

Chat

API

RAG

Jeff

Kind PM

Johnson

Lovely Web Dev

Gemini (Advanced and Assist)

Making a website is easy

Jeff / Kind PM

Hi there, I'd like you to create a simple website for us to sell our products. We already have all the information ready for you. You can start building the website now.

Johnson / Lovely Dev

OK !

Recommended 👍

Frontend

Home Page

Product Service

Backend

products.json

GET /api/products

use

Mock

Jeff / Kind PM

I forgot to mention, we don't have any systems to connect to and the data is in CSV format. Is that okay with you ?

Johnson / Lovely Dev

Um… OK !

id,name,price,image,link

1,Product A,29.99,https://fastly.picsum.photos/id/1

2,Product B,45.5,https://fastly.picsum.photos/id/2

3,Product C,19.95,https://fastly.picsum.photos/id/3

[

{

"id": 1,

"name": "Product A",

"price": 29.99,

"image": "https://fastly.picsum.photos/id/1",

"link": "https://nextjs.org/docs/app/building-your-application/routing/route-handlers",

"description": "A high-quality product designed for everyday use."

},

{

"id": 2,

"name": "Product B",

"price": 45.5,

"image": "https://fastly.picsum.photos/id/2",

"link": "https://nextjs.org/docs/app/building-your-application/routing/route-handlers",

"description": "Experience the premium quality of Product B."

},

{

"id": 3,

"name": "Product C",

"price": 19.95,

"image": "https://fastly.picsum.photos/id/3I",

"link": "https://nextjs.org/docs/app/building-your-application/routing/route-handlers",

"description": "Product C offers exceptional value and performance."

}

]

​

???

CSV

JSON

Oh my God

id,name,price,image,link

1,Product A,29.99,https://fastly.picsum.photos/id/1

2,Product B,45.5,https://fastly.picsum.photos/id/2

3,Product C,19.95,https://fastly.picsum.photos/id/3

[

{

"id": 1,

"name": "Product A",

"price": 29.99,

"image": "https://fastly.picsum.photos/id/1",

"link": "https://nextjs.org/docs/app/building-your-application/routing/route-handlers",

"description": "A high-quality product designed for everyday use."

},

{

"id": 2,

"name": "Product B",

"price": 45.5,

"image": "https://fastly.picsum.photos/id/2",

"link": "https://nextjs.org/docs/app/building-your-application/routing/route-handlers",

"description": "Experience the premium quality of Product B."

},

{

"id": 3,

"name": "Product C",

"price": 19.95,

"image": "https://fastly.picsum.photos/id/3I",

"link": "https://nextjs.org/docs/app/building-your-application/routing/route-handlers",

"description": "Product C offers exceptional value and performance."

}

]

​

CSV

JSON

Solution #1

Data Conversion

products.json

products.csv

Frontend

Home Page

Product Service

Backend

GET /api/products

use

products.json

products.csv

Frontend

Home Page

Product Service

Backend

GET /api/products

use

Who ???

products.json

products.csv

Frontend

Home Page

Product Service

Backend

GET /api/products

use

Oh my God #2

Jeff / Kind PM

That's fine, but our data is updated daily. Can you handle that ?

Johnson / Lovely Dev

Or should I create an upload page for the admin to upload the data instead ?

Code Generation

Frequently used 👍

1

2

2

2

products.json

Frontend

Home Page

Product Service

Backend

GET /api/products

use

Upload Page

Upload Service

POST /api/upload

products.csv

upload

convert & write

Solution #2

Code Generation

• Data Conversion
• Code Generation
• Code Completion
• Documentation generation
• Testing assistance

Gemini

Chat

https://inthecloud.withgoogle.com/gemini-for-google-workspace-prompt-guide/dl-cd.html

Gemini API

Features that shouldn't be called features

Jeff / Kind PM

Hey, I'd like you to add a description section and write product descriptions for the website.

Johnson / Lovely Dev

(Don't you think this is a bit strange?)

Um… Let me try

products.json

Frontend

Home Page

Product Service

Backend

GET /api/products

use

Upload Page

Upload Service

POST /api/upload

products.csv

upload

convert & write

Oh my God #3

Who ???

https://ai.google.dev/

Explore prompt ideas for the Gemini API in Google AI Studio. Code examples and more on the Gemini API cookbook.

Prompt gallery

products.json

Frontend

Home Page

Product Service

Backend

GET /api/products

use

Upload Page

Upload Service

POST /api/upload

products.csv

upload

convert & write

Solution #3

Gemini API

gen & write

Send prompt

+

products.json

Gemini API

“Prompt”

Clear prompts, Powerful AI

A little-known developer

Tell me what kind of prompt you want

The best prompt ever

🤩

😫

Let’s try

Jeff / Kind PM

You can do it ! Since you're at it, make the website multilingual too.

Johnson / Lovely Dev

(えっ、何これ ?)

It's quite a challenge, but I'll give it a try.

Solution #3

Instruction-Based Prompting

products.json

Frontend

Home Page

Product Service

Backend

GET /api/products

use

Upload Page

Upload Service

POST /api/upload

products.csv

upload

convert & write

Solution #3

Gemini API

gen & write

Send prompt

+

products.json

Solution #3

Instruction-Based Prompting

https://www.promptingguide.ai/

https://github.com/google-gemini/cookbook

• Integration into Existing Applications
• Automated workflows
• Content Generation

Gemini API

API

API

Gemini API + RAG

Web Developer who goes above and beyond

Jeff / Kind PM

I think our website should have a search engine. It would make it easier for customers to find product information.

Johnson / Lovely Dev

Okay, so we're adding a search feature? Not difficult, we can just match the search terms against the product names and descriptions.

Jeff / Kind PM

I don't think you understand search engines. It's not just about matching keywords. It needs to be able to search based on any words the customer feels are relevant.

Johnson / Lovely Dev

(Should we hire a Data Scientist to help with this?)

It's quite difficult for me, but I'll give it a try.

AI Hallucination

1

“The power of connected knowledge”

🧠🔗 🌐💡💪

2

Ref: https://www.researchgate.net/figure/A-comparative-view-of-AI-machine-learning-deep-learning-and-generative-AI-source_fig1_373797588

RAG

Retrieval-Augmented Generation

Ref: https://blogs.nvidia.com/blog/what-is-retrieval-augmented-generation/

1

+ =

2

😫

AI Hallucination

​

Knowledge ML

Vertex AI = 👍

Vertex AI is a machine learning (ML) platform that lets you train and deploy ML models and AI applications, and customize large language models (LLMs) for use in your AI-powered applications. Vertex AI combines data engineering, data science, and ML engineering workflows, enabling your teams to collaborate using a common toolset and scale your applications using the benefits of Google Cloud.

64

Vertex AI

Machine Learning

Generative AI

https://cloud.google.com/vertex-ai/generative-ai/docs/llamaindex-on-vertexai

Create RAG Corpus

Import file to Corpus

Create RAG Retrieval Tool

+

Model instance

Modify Prompt Template

Generate response from Gemini + RAG

RAG

LLM

Create RAG Corpus

1

Import file to Corpus

2

Note

• chunk_size helps with efficient processing and retrieval. Smaller chunks allow for faster searches and more precise results.
• chunk_overlap are useful for capturing context that might be split between chunks. This is particularly helpful when dealing with sentences or phrases that could be cut off in the middle.

Create RAG Retrieval Tool

3

Model instance

Model instance

4

Modify Prompt Template

5

Generate response from Gemini + RAG

4

3

Modify Prompt Template

Create RAG Retrieval Tool

+

Model instance

products.json

Frontend

Home Page

Product Service

Backend

GET /api/products

use

Upload Page

Upload Service

POST /api/upload

products.csv

upload

convert & write

Gemini API

gen & write

Send prompt

+

products.json

Oh my God #4

Where ??

Node.js can run Python processes

search.js

search.py

(Vertex AI)

products.json

👍

products.json

Frontend

Home Page

Product Service

Backend

GET /api/products

use

Upload Page

Upload Service

POST /api/upload

products.csv

upload

convert & write

Gemini API

gen & write

Send prompt

+

products.json

Solution #4

Search Service

GET /api/products/search

search.py

(Vertex AI)

products.json

Upload

• Integration into Existing Applications
• Fact-checking
• Personalized recommendations

Gemini API + RAG

RAG

Chat

RAG

API

Which One to Use When?

Information at 21/06

Jeff / Kind PM

Thank you so much, Johnson. You're a godsend to our company.

Johnson / Lovely Dev

With love and appreciation, Dear Boss

Chat

API

RAG

See more at Mikelopster

Thank You

Tanitphon Paniwan (Mike)

CTO @ Apppi