DEV Community: Dean

Build Your First Personal AI Assistant with JavaScript in 5 Minutes (For Free 🤯) - Start The Timer!

Dean — Tue, 17 Jun 2025 17:15:42 +0000

🚀 The Whole AI Hype: Why JS Devs Should Care

Since ChatGPT was released in late 2022, the AI space has been growing at a super impressive speed. Companies are raising hundreds of millions of dollars, state-of-the-art AI models are being released literally every day, and mindblowing products are being introduced daily.

While Python has been the primary language of the AI revolution, JavaScript developers can also benefit significantly from this industry growth. Why? Many startups are now prepared to bring their AI research to production, and what better way to ship products faster than by using the language of the web: JavaScript!

Don't believe me? You can do a quick search for the rise in product engineering job roles over the past year. So if you're new to building AI powered apps, let's get started.

⏱️ Let’s Start the Timer: Setting Up Your Dev Environment

Here’s what you need:

Node.js (v18+ recommended)
A code editor (VS Code, WebStorm, or whatever you love)
npm (comes with Node)
An API key (but stay tuned for a free hack!)

Install the OpenAI SDK:
npm install openai

💸 Wait, Isn’t This Supposed to Be Free?

I know I said you can build this for free, but the official OpenAI API key costs money to get started. Stay with me, and I'll reveal a cool, legit open secret on how you can use hundreds of AI models for free, including some that rival OpenAI models in terms of performance.

Okay, time is running out, let's build our personal research assistant with inbuilt search support!

Your Personal AI Assistant with JavaScript

import OpenAI from "openai";
const client = new OpenAI();

const completion = await client.chat.completions.create({
    model: "gpt-4o-search-preview",
    web_search_options: {},
    messages: [{
        "role": "user",
        "content": "Give me a quick summary of a trending good news story"
    }],
});

console.log(completion.choices[0].message.content);

You should get a response like below after running node index.js:

In April 2025, researchers in Miami, Florida, developed BIOCAP tiles—a 3D-printed modular system designed to support marine life and reduce wave impact along urban seawalls. These tiles are set to be installed at Morningside Park, aiming to protect marine ecosystems from coastal erosion.

Voila! Now you have your own personal AI assistant that you can use for coding, research, and much more. You can also create a frontend React app that queries this setup as an API route or even entirely within your frontend app.

Give It Wings — The Free Model Hack

Here’s the hack: OpenRouter. It’s a unified API gateway that lets you access hundreds of AI models (including many for free) using the same OpenAI-compatible sdk we installed. You just swap the base URL and use their free models, which you can see here.

For this tutorial, we will use the latest Llama-4 Maverick model from Meta. Here's the full code:

import OpenAI from 'openai';

const openai = new OpenAI({
  baseURL: "https://openrouter.ai/api/v1",
  apiKey: "<OPENROUTER_API_KEY>"
});

async function main() {
  const completion = await openai.chat.completions.create({
    model: "meta-llama/llama-4-maverick:free",
    messages: [
      {
        role: "user",
        content: "Give me a quick summary of a trending good news story"
      }
    ],
  });

  console.log(completion.choices[0].message.content);
}

main();

You should also get an almost similar result when you run the code.

Here's a trending good news story:
Global Efforts to Protect Endangered Sea Turtles Paying Off
Conservation efforts to protect endangered sea turtles are showing significant results worldwide. Thanks to the collaborative efforts of governments, NGOs, and local communities, many sea turtle species are experiencing a notable increase in population.

One notable example is the Kemp's ridley sea turtle, which was on the brink of extinction in the 1980s with only around 400 nesting females. Conservation efforts, including the establishment of protected nesting sites and reduction of bycatch in fishing gear, have led to a remarkable recovery. In 2020, the number of Kemp's ridley nesting females reached a record high of over 22,000.

Similarly, conservation efforts in the Great Barrier Reef have led to a significant increase in the population of green turtles. The number of nesting turtles has risen by over 50% since 2000, thanks to efforts to reduce pollution, protect nesting sites, and promote sustainable fishing practices.

That’s it. You’re now running a personal AI assistant at no cost.

✨ Final Thoughts

With tools like OpenRouter, you don’t need a fat wallet to build something amazing.

If you build something cool or have any questions, please leave a comment and tag me. I would love to help in any way! If you found this article useful, add a reaction and share it with your peers.

Support Me ❤️❤️

I'm building an SDK called Docuglean that helps you process and extract key information from all types of documents efficiently using AI models.

Please give the project a ⭐ on GitHub, and I would be super happy :)

Give Docuglean a 🌟 on GitHub.

The Future Of Work: Being On The Good Side Of AI The Centaur Way

Dean — Wed, 23 Nov 2022 21:30:05 +0000

Only The Centaurs Win

Note: An AI wrote parts of this article. Try to guess which :)

In the first chapter of Smarter Than You Think, the author, Clive Thompson, narrated the story of the rise, fall and rise of Kasparov, a chess grand champion.

The main takeaway depicted a battle between the past and the future. In 1997, IBM's Deep Blue supercomputer beat the world champion, Kasparov, in a game of chess. The defeat was devastating, with media outlets terming it the evil triumph of AI over the brain.

But Kasparov did something beautiful after that. He learned the ways of the supercomputer partnering with the AI giving birth to what's now called Advanced Chess.

Software is eating the world. And to be spared, one needs to pander to its desires, master them and, in turn, use them to achieve one's goals.

That's why it's saddening to see an entrenched traditional system fight futility against innovation.

You find numerous examples every day.

Office workers revolting against computerized systems brought to replace them.
Taxi drivers protesting against share-riding apps.
DVD companies employing cutthroat tactics to destroy streaming companies.
Hotels scheming against AirBnB.

All exercises in futility. What is certain is that sooner or later, innovation - in this case, AI always win.

The smart ones are those who stay on the good side.

Being On The Good Side Of AI

Interestingly, we all are slowly becoming centaurs. We can only perform many of our daily activities by using AI-powered products. Google search engine to quickly make decisions, Facebook and Instagram to flaunt our emotional state et al. It begs the question. If we can embrace technology in mundane aspects of our lives, why can't we embrace it in something more important than that: our means of sustenance?

A reminder: A Journey to 2022

We often know the urgency of a situation but don't take action. Bystander effect? For example, traditional media behemoths all saw the birth of the Internet but refused to participate actively.

What You Can Do

If you're a college graduate, then Bill Gates' viral twitter thread is probably the best for you.

New college graduates often ask me for career advice. I was lucky to be in my early 20s when the digital revolution was just getting underway, and Paul Allen and I had the chance to help shape it. (Which explains my lack of a college degree—I left school because we were afraid the revolution would happen without us.) If I were starting out today and looking for the same kind of opportunity to make a big impact in the world, I would consider three fields.

2/ AI, energy, and biosciences are promising fields where you can make a huge impact. It's what I would do if starting out today.
- Bill Gates (@BillGates) May 15, 2017

And if you're already working, your best bet is to improve your skills and switch career lines constantly.

In summary, GoDaddy's CEO advice is probably the best one-size-fit-all advice:

I posit that today most people choose their career at the conjunction of "what they are good at" and "what pays the most," with little consideration for doing what they love. But the same Applied AI that's driving job-killing automation can simultaneously help individuals follow their entrepreneurial dreams. Dreams that are tied to a third circle in the Venn diagram: "doing what they love."

THE DAO and the Blockchain

A more radical case of the future of work is the DAO - Decentralized autonomous organization. It's an automated organization that runs on smart contracts. No CEO. No Board of Directors. No Structure at all. All managed on the blockchain.

Why this sounds like an almost impossible scenario, a few crypto communities are being successfully running based on these smart contracts.

Imagine a happy workplace with no bosses! Utopia!

Conclusion

It's easy to get too comfortable with the current work styles and ignore the sweeping tide of AI. More and more companies spend billions of dollars yearly to improve their competitive advantage with artificial intelligence.

Although there is a never-ending debate as to whether automation kills or creates jobs, there is no doubt that those who will prosper in the future are those with a wide variety of constantly updated skills.

Be a Centaur.

Inspirations - 1 - 2 - 3 - 4 - 5

Over to you:

So tell me, have you switched jobs to a different field? And what career skills have you developed outside (formal) college education?

I would love to hear from you. :)

Add a web3 connect button to your React App with TypeScript and Metamask.

Dean — Wed, 09 Nov 2022 06:43:41 +0000

Metamask is the most popular cryptocurrency wallet with over 10 Million monthly active users. Available as a browser extension and mobile app, Metamask provides key functionalities that make it easy to interact with the Ethereum blockchain and other notable chains like Binance, Avalanche, and Polygon. Web3 developers may use these capabilities to power decentralized apps (dApps), allowing users to perform blockchain-based transactions securely with a single sign-on.

In this article, we will use TypeScript to add a Metamask connect button to a basic React project. Google's Firebase social login, which allows developers to build apps that authenticate users using their Google, Facebook, GitHub, and Twitter accounts, is a similar traditional web equivalent.

Let's get started.

Create React App

We will use the official Create-react app documentation to add TypeScript to a react app.

npx create-react-app typescript-metamask --template typescript 
cd typescript-metamask
npm start

This command will create a basic react app, as shown below. If you're using Visual Studio Code, you can run code . to launch the editor direct from the terminal.

Consequently, our file structure will look like below.

> src/App.tsx

Does the user have Metamask Installed?

Next, we will use the Metamask window.ethereum API to check if the user has Metamask installed. To call and store the API returns, we will need two React Hooks - useState and useEffect.

import { useEffect, useState } from "react";

const App: React.FC = () => {
 const [isMetamaskInstalled, setIsMetamaskInstalled] = useState<boolean>(false);
 const [account, setAccount] = useState<string | null>(null);

useEffect(() => {
   if((window as any).ethereum){
     //check if Metamask wallet is installed
     setIsMetamaskInstalled(true);
   }
 },[]);

Does the User have an Ethereum wallet/account?

After that, we need to verify if the user has an Ethereum account. To do this, we will query Metamask's eth_requestAccounts function, which returns an Array of strings - string [].

If the user has an Ethereum account, we'll create a function to retrieve and store the wallet address.

//Does the User have an Ethereum wallet/account?
 async function connectWallet(): Promise<void> {
   //to get around type checking
   (window as any).ethereum
     .request({
         method: "eth_requestAccounts",
     })
     .then((accounts : string[]) => {
         setAccount(accounts[0]);
     })
     .catch((error: any) => {
         alert(`Something went wrong: ${error}`);
     });
 }

And also display the connected wallet address.

return (
   <div className="App">
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
       <p>
         ETH wallet connected as: {account}
       </p>
     </header>
   </div>
 );

If the user does not have an Ethereum account, we can have the app prompt the user to install Metamask crypto wallet and create and add an Ethereum account to your wallet.

if (ethereumAccount === null) {
   return (
     <div className="App App-header">
       {
         isMetamaskInstalled ? (
           <div>
             <img src={logo} className="App-logo" alt="logo" />
             <button onClick={connectMetamaskWallet}>Connect Your Metamask Wallet</button>
           </div>
         ) : (
           <p>Install Your Metamask wallet</p>
         )
       }
 
     </div>
   );
 }

Here's the final App.tsx version:

import { useEffect, useState } from "react";
import logo from './logo.svg';
import './App.css';
 
const App: React.FC = () => {
 const [isMetamaskInstalled, setIsMetamaskInstalled] = useState<boolean>(false);
 const [ethereumAccount, setEthereumAccount] = useState<string | null>(null);
 
 useEffect(() => {
   if((window as any).ethereum){
     //check if Metamask wallet is installed
     setIsMetamaskInstalled(true);
   }
 },[]);
 
 //Does the User have an Ethereum wallet/account?
 async function connectMetamaskWallet(): Promise<void> {
   //to get around type checking
   (window as any).ethereum
     .request({
         method: "eth_requestAccounts",
     })
     .then((accounts : string[]) => {
       setEthereumAccount(accounts[0]);
     })
     .catch((error: any) => {
         alert(`Something went wrong: ${error}`);
     });
 }
 
 if (ethereumAccount === null) {
   return (
     <div className="App App-header">
       {
         isMetamaskInstalled ? (
           <div>
             <img src={logo} alt="logo" />
             <button onClick={connectMetamaskWallet}>Connect Your Metamask Wallet</button>
           </div>
         ) : (
           <p>Install Your Metamask wallet</p>
         )
       }
 
     </div>
   );
 }
 
 
 return (
   <div className="App">
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
       <p>
         ETH wallet connected as: {ethereumAccount}
       </p>
     </header>
   </div>
 );
}
 
export default App;

The final version before a user connect:

After a user connects:

Conclusion

That's all. Metamask provides powerful APIs web3 React developers can query when building their Ethereum-based dApps.