LLMs / GenAI in Practice⚡️

Helpfeel Office, Kyoto, Japan

Ben Foden

2024-09-21

Three main topics

Using Cursor IDE for AI-enabled coding to save time⌨️

Examples where AI is most useful in writing code

Building a simple web app with AI features🐵

About me

My name is Ben Foden.

I am based in Kyoto. I've lived here for 6 years.

I've been doing web startups for about 15 years, starting in the SF Bay Area.

I've built apps using AI, and that use AI themselves.

I use AI every day and Helpfeel's products include AI features

This talk is highly opinionated.

Please explore and learn what works best for you.

This is not theory, it's about using AI in practice.

AI in this talks means LLMs / Generative AI.

This talk is for people who know basic web development.

About Helpfeel AI

We use AI to fix the terrible user experience of customer support.

AI is used internally for development.

What's bad about AI-assisted coding?

You may lose chances to learn because it's done for you.

AI will miss things when given too many requirements at once

AI is bad at understanding meta requirements

AI doesn't have recent information (Cutoff for GPT-4o is September 2023)

AI hallucinates or misunderstands and results need to be checked

What's good about AI-assisted coding in Cursor?

Easily select lines of code, files in your codebase, or import documentation with a URL to add context to your prompt

See generated code previews inline, then approve or reject changes

Chat with AI in the sidebar of Cursor.

Understand what code does without using brainpower

what does this do?

Fix tedious errors without using brainpower. Just click "add to chat" on an error message, or select code and type "fix this"

Write or rewrite tedious code without using brainpower

Rewrite these functions as methods of one object and export it

Use the Composer feature to create files and edit multiple files at once.

Let's explore more examples later.

Install and Setup Cursor

Cursor is a fork of Microsoft VS Code, with nice Gen AI features added.

You can import preferences / settings from VS Code.

AI autocomplete

AI autocomplete is included in cursor but it has a limit (Cursor Tab)

Other options include Github Copilot and Supermaven.

I use Supermaven because its free, unlimited, and faster than the others.

You need to make an account.

Use cursor-small model for free, then subscribe or bring an AI API Key

You can use Cursor AI features for free up to a limit

You will eventually need to pay Cursor or bring your own AI API key.

AI API usage costs money, but it's pay as you go.

For less than ~1,000 yen / month you can use it a lot. A lot.

I use OpenAI's gpt-4o or gpt-4o-mini, but I've also heard good things about Anthropic's Claude 3.5.

In Cursor settings, add your API Key and select the models you want to use.

Let's use AI to help write code

It's always a struggle to do self introductions and remember names

Especially when you meet a lot of people in a short time

Maybe there's an opportunity to improve that?

Let's try it

Prompt engineering

Task, Role, Requirements, Response format, Examples, Ask me questions

Task

Extract all search keywords used in the blog post below.

Roleplay

Role play as an SEO expert.

Requirements

ex: Return an object with key of keywords and value array of strings

ex: Each string value must be less than 256 characters.

Labels

XML is easier for LLMs to understand JSON

code:xml

<blogpost>hi</blogpost><tags>1,2,3</tags><author>ben</author>

Response format

Response must be in JSON format.

code: js

export async function getResponse({

prompt,

isResponseJson,

}: {

prompt: string;

isResponseJson: boolean;

}) {

const completion = await openai.chat.completions.create({

model: 'gpt-4o',

response_format: { type: 'json_object'},

});

}

Examples / Samples / References

Ask me questions

If any requirement is unclear, please ask questions first before responding.

Is this enough context to give a good response?

Thank you.

Was anything unclear?

Follow @benfoden everywhere.