Davide De Sio

Posted on Jan 4

Build an AI powered new year's resolutions suggester ridiculously fast with Amplify AI KIT

#aws #cloud #ai

🔁 The same old story

2025 is here, folks! 🎉 You’ve probably found yourself thinking about some New Year’s resolutions, right?
My friend and colleague Claudia asked Eleva team to share a few for a LinkedIn post: something to highlight our values while throwing in the most absurd goals too. 😂

Now, making resolutions sounds easy, but let’s be real: setting goals is never a walk in the park. 🚶‍♂️💭

🦾 GenAI to the rescue

So, I thought, why not let GenAI be our brainstorming buddy? 🤖
We'll gust give it a topic, and voilà: it would spits out some new year's resolutions we can run with. Masterpiece.

🛠️ A perfect chance to try AWS Amplify AI KIT

AWS dropped this chef’s kiss AI KIT 👌, which makes building generative AI-powered conversational interfaces ridiculously fast—like: really minutes-fast. ⏱️

📚 Start with tutorial

Seriously, it’s all laid out super clearly. If you are familiar with Amplify just follow AWS’s tutorial here.

In the next few chapters, I'll explain how to use it starting from scratch (using quickstart template) to non-familiar dev folks.

🚀 Initialize project

Let's start with the template you’ll find in the quickstart.
Follow the steps, and you’ll have a "Todo" app in your favorite tech stack (React, in my case) ready for some serious customization. 🛠️

⚠️ Watch the prerequisites for using AI

First thing’s first: get an AWS Account, and enable access to the model you’ll use for your AI in Bedrock. For me, it was Amazon Nova Micro (part of the shiny new Amazon Nova family). ✨
Heads up, not all models are available in every region, so I rolled with N. Virginia. 🌍

🛡️ Best practices and security by design

If you’ve used the template provided in the quickstart, you’ll automatically benefit from a series of best practices. Among these is the use of the Authenticator component, which secures your backend. 🔒

Long story short: an AWS Cognito UserPool will be created, requiring your users to sign up before they can access the APIs exposed by AWS AppSync. 🧑‍💻✅

🔧 Create my AI backend

Don’t sweat it if Amplify is new to you. It’s super intuitive! ✋

Head over to amplify/data/resource.ts, where your backend definition lives. Just tweak it to create a route for interacting with the AI, as outlined here.
You can completely remove the one created with the quickstart as you probably won't use it.

In my case, I had to give the AI a little nudge with some instructions to get it to deliver exactly what I needed. Here’s the resulting code snippet, creating a chat route powered by Amazon Nova Micro model: 💻✨

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";

const schema = a.schema({
  chat: a.conversation({
    aiModel: a.ai.model('Amazon Nova Micro'),
    systemPrompt: 'Sei un assistente utile che genera tre buoni propositi per il nuovo anno.'+
          'Non fornire nient\'altro che tre buoni propositi per il nuovo anno all\'utente.'+
          'Se l\'utente ti chiede qualcos\'altro, proponigli sempre tre buoni propositi per il nuovo anno.'+
          'Se l\'utente ti chiede uno specifico argomento, proponigli tre buoni proposito per il nuovo anno su quell\'argomento o simili.'+
          'Segui le indicazioni dell\'utente nel generare i buoni propositi per il nuovo anno.'+
          'Generane sempre uno serio, uno possibilmente inerente al lavoro, e uno ironico o assurdo.'+
          'Rispondi sempre in italiano. Usa un tono amichevole e informale. Usa emoji e GIF se appropriato.',
  }).authorization((allow) => allow.owner()),

});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'userPool',
  },
});

📜 My prompt

I voluntarily gave my prompt in Italian because I wanted to test the model's ability to interpret my intentions in my native language. This is the prompt translated into English (by the same AI model).

You are a helpful assistant who generates three New Year's resolutions.
Do not provide anything other than three New Year's resolutions to the user.
If the user asks for something else, always suggest three New Year's resolutions.
If the user asks about a specific topic, suggest three New Year's resolutions on that topic or something similar.
Follow the user's instructions when generating New Year's resolutions.
Always include one serious resolution, one related to work if possible, and one humorous or absurd one.
Always respond in Italian. Use a friendly and informal tone. Use emojis and GIFs when appropriate.

💬 Create conversation front-End

At this stage, I just needed to whip up a conversational interface to hook into my AI backend. Easy peasy, right? 😎
To do this, I followed the steps outlined here and decided to use the component. 🧩

All I had to do was drop it into my src/App.tsx file replacing definition created by the quickstart, like this:

import {Card, View} from "@aws-amplify/ui-react";
import { AIConversation } from '@aws-amplify/ui-react-ai';
import { useAIConversation } from './client';
import Markdown from "react-markdown";
import rehypeHighlight from 'rehype-highlight';

export default function App() {

    const [
        {
            data: { messages },
            isLoading,
        },
        handleSendMessage,
    ] = useAIConversation('chat');
    // 'chat' is based on the key for the conversation route in your schema.

    return (
        <>
            <View className="header">
                <a href="https://eleva.it" target="_blank">
                    <img
                         alt="Eleva logo"
                         src="https://eleva.it/assets/imgs/eleva-logo-white.svg"
                    />
                </a>
            </View>
            <AIConversation
                displayText={{
                    getMessageTimestampText: (date) => new Intl.DateTimeFormat('it-IT', {
                        dateStyle: "short",
                        timeStyle: 'short',
                        hour12: false,
                    }).format(date)
                }}
                welcomeMessage={
                    <Card variation="outlined">
                        <div>Ciao! Sono il tuo assistente virtuale Eleva per i buoni propositi del 2025.</div>
                        <div>Se mi fornisci un argomento posso aiutarti a generare dei buoni propositi per il 2025.</div>
                        <div>Potrebbero essere seri, inerenti al lavoro o alla vita privata, ma anche ironici.</div>
                        <div>Ad esempio:</div>
                        <ul>
                            <li>non fare più di 3 call al giorno</li>
                            <li>non far salire il cane sul divano</li>
                            <li>scrivere un libro</li>
                            <li>venderlo</li>
                            <li>partecipare come speaker a un ted talk</li>
                            <li>avere più clienti cuoricino</li>
                            <li>imparare a ballare la polka</li>
                            <li>tornare a giocare a calcetto preservando i menischi</li>
                            <li>usare 🐙meno 🐙emoticon 🐙</li>
                            <li>comprare camicie che non siano a quadri</li>
                            <li>eliminare whatsapp web dalle 9 alle 18</li>
                            <li>fare sport con i colleghi il giorno dopo gli offsite</li>
                        </ul>
                    </Card>
                }
                messageRenderer={{
                    text: ({ text }) => (
                        <Markdown rehypePlugins={[rehypeHighlight]}>
                            {text}
                        </Markdown>
                    )
                }}
                avatars={{
                    user: {
                        username: 'Tu', // Set the user's email as username
                    },
                    ai: {
                        username: "Eleva AI"
                    }
                }}
                messages={messages}
                isLoading={isLoading}
                handleSendMessage={handleSendMessage}
            />
            <View className="footer" textAlign="center">
                &copy; All Rights Reserved.
                Made with ❤️ by <a href="https://eleva.it" target="_blank">Eleva</a>
            </View>
        </>
    );
}

🚀 Mission Accomplished!

With minimal effort, I built a small internal tool to have some fun with my team generating new year's resolutions. 🎉

Check out the results in the screenshots below: 📸👇

Auth component with logo, Italian language and other customizations
AIConversation component with welcome message
AIConversation component using my chat route AI Backend

📝 Takeaways

The AI KIT provided by Amplify truly speeds up the development of AI-based projects by abstracting away the need to build the underlying infrastructure. ⚡

However, it’s always a good idea to understand what’s happening under the hood. My recommendation? Dive into the CloudFormation templates generated by Amplify and get familiar with the resources it creates (and trust me, there are a lot of them). 🛠️📚

🙋 Who am I

I'm D. De Sio and I work as a Solution Architect and Dev Tech Lead in Eleva.
I'm currently (Apr 2024) an AWS Certified Solution Architect Professional, but also a User Group Leader (in Pavia) and, last but not least, a #serverless enthusiast.
My work in this field is to advocate about serverless and help as more dev teams to adopt it, as well as customers break their monolith into API and micro-services using it.

DEV Community