Back

/ 2 min read

NYNM - AI-Powered TODO App with Nuxt.js

Purpose

It had just turned 2024, and I think I was on YouTube or something and saw a video on NuxtJS framework and I had been working heavily in the generative AI space for the last year so I wanted to see about making a really simple TODO web app which leveraged Generative AI.

Functionality

Basically you type in something that you’re interested in accomplishing in 2024. Some lofty goal…

input a thang The simple dashboard interface for inputting goals and viewing generated tasks

From there it would spit out a list of 10 or fewer realistic short term tasks that, if performed, would either allow you to accomplish said goal or at least push you closer to it.

I just made this for fun in an afternoon and forgot about it.

From there it would store the response in results and display them in a list for the user to complete it, re-generate or delete the task.

The user could also manually add a task as well.

Tech Used

  • This just ran locally, but I did host it on a Cloudflare page just to show a few people the silliness
  • Nuxt.js - JavaScript framework
  • Azure OpenAI - Completion model

The Core Implementation

This was the only real interesting piece of code to the project, which is just a fetch POST to the Azure OpenAI endpoint with a customized system prompt and context:

import fetch from 'node-fetch'


export default defineEventHandler(async (event) => {
  const reqBody = await readBody(event)
  var myHeaders = new Headers()
  myHeaders.append('Content-Type', 'application/json')
  myHeaders.append('api-key', process.env.aoi_key)


  var raw = JSON.stringify({
    messages: [
      {
        role: 'system',
        content:
          'Consider the input and provide a list of under 12 realistic steps to accomplish the goal outlined in the original task within a 12 month timeframe. Do not include step numbers. Only output JSON format such as ["first task","another task"]'
      },
      {
        role: 'user',
        content: reqBody.text
      }
    ],
    temperature: 0.7,
    top_p: 0.95,
    frequency_penalty: 0,
    presence_penalty: 0,
    max_tokens: 4096,
    stop: null
  })


  var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
  }


  try {
    const response = await fetch(
      `https://${domain}.openai.azure.com/openai/deployments/${deploymentName}/chat/completions?api-version=2023-07-01-preview`,
      requestOptions
    )
    const data = await response.json()


    return data.choices[0].message.content
  } catch (error) {
    console.error('Error:', error)
    throw createError({
      statusCode: 500,
      statusMessage: 'An error occurred while processing your request.'
    })
  }
})

A fun little experiment with AI-powered productivity tools!