Why?
I created this project to play around with Vercel's new AI SDK, which looked to be an intuitive way to incorporate AI into applications for text-based responses. Using the SDK, I hooked it up to a Next.js project and created a basic chat bot with similar styling to iMessage on iOS using Tailwind.
Learnings
- The AI SDK was very easy to integrate into the application with minimal code needed to be added to API routes.
- Occasionally there would be no response from the AI model, this could depend on which model you choose to use (for this project, I used one "OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5" from Huggingface, an AI community).
- With an empty response, the next user prompt would often then trigger the response from the AI model. A nuance that I was sure was a fault lying with the model as opposed to the routing implementation I used for this app.
- Using a tiny date library, Day.js, I was able to implement dynamic displays of "time ago" from when the message was received when you swipe left/right on a message. I have been more familiar with the likes of Moment.js in the past, but that has quite a large footprint for what I wanted to achieve. The usage of Day.js is very easy with simple syntax.
- I developed this app using Storybook.js so I was able to build components in isolation — I believe this to be a better way of building components within any React project for a few reasons:
- You can test your components in isolation, both in terms of design (the flexibility of the design, i.e. how the component adapts to different content) and functionality.
- Components should not rely on dependencies of other components (i.e. a Menu component should also include a MenuItem component which can have its own logic/states etc), they should be able to work on their own as well as part of more complex components/pages.
- Storybook allows you prototype components quickly without interference of other elements on a page.
