DEV Community: Shreyam Duttagupta

Beyond Chatbots: How Digital Assistants are Shaping the Future with Advanced AI Copilots

Shreyam Duttagupta — Sat, 26 Oct 2024 19:14:52 +0000

The Early Days: Clippy and Scenario-Based Chatbots

When I was around 7 or 8 years old, my family got our first computer with Windows XP. I was instantly fascinated by Clippy, the animated paperclip that seemed to have a mind of its own. Clippy and also the search dog became my favorite companions on the screen. I loved the quirky animations - every time Clippy popped up with a tip, it felt like a little surprise. The sound effect, like tapping glass when Clippy "touched" the screen to make sure if I was there, was oddly satisfying and made the whole experience more engaging.

Back in those days, Clippy was a mixed bag for everyone. As a kid, I thought Clippy was awesome, but my parents and other adults found it more annoying than helpful. It was like having a persistent coworker who didn't quite get what you were trying to do. While I appreciated the attempts to assist, many others just wanted to get their work done without Clippy's constant interruptions.

Fast forward to today, Clippy has found a second life in pop culture. You can spot Clippy making cameo appearances on shows like The Simpsons and Family Guy, and it's even become a beloved retro icon. It's funny how everyone who hated Clippy back then now finds Clippy endearing. I can't fathom why Microsoft hasn't leveraged Clippy's newfound stardom in the age of AI - it's honestly one of the biggest INSANITY moves of the century. The character itself was always good; the real issue was how Microsoft implemented Clippy. They missed the mark by making Clippy more of a nuisance than a helpful assistant.

Around the same time Clippy was making waves, other scenario-based chatbots started to emerge. These bots operated on pre-written scripts, handling specific tasks like booking appointments or answering FAQs. Think of them as interactive forms. You'd click through options, and the bot would guide you step by step. Useful for basic interactions, but frustrating when you needed something outside their limited scope. They lacked the ability to hold a real conversation or understand complex requests, making them feel more like a series of digital prompts rather than true assistants.

Moving Forward: The Rise of Smart Assistants

Fast forward a decade or so, and things started to change. Enter Siri, launched by Apple in 2011. Siri marked a significant step forward in digital assistants by recognizing and responding to natural language, although in its early days, it was limited by rule-based responses. Over time, Siri has incorporated more advanced AI capabilities, especially with recent updates that have improved contextual understanding. You could ask questions like "What's the weather today?" or "Set a reminder for 3 PM," and Siri would respond intelligently. It felt like talking to a real person. This shift from rigid scripts to more flexible understanding made digital assistants much more useful and user-friendly.

Google Assistant followed suit, bringing even more power to the table. It could handle a wider range of queries, integrate with more services, and understand context better. Asking Google Assistant to play your favorite song or find the nearest coffee shop became second nature. It wasn't perfect, but it was a significant step up from the old chatbots.

Modern-Day AI Copilots: Taking Assistance to the Next Level

Today's digital assistants have evolved into what many call AI copilots. These aren't just answering questions; they're actively helping with complex tasks. Let's look at some standout examples:

Microsoft Copilot for MS 365

Microsoft integrated AI into its Office suite, creating Copilot for MS 365. Imagine working on a Word document and having an assistant suggest improvements, generate content, or even create entire sections based on your input. In Excel, Copilot can analyze data, create charts, and provide insights without needing to know all the formulas. It's like having a super-smart assistant right inside your favorite apps.

GitHub Copilot for Code Generation

I love using GitHub Copilot, which our company pays for the enterprise version. This really helps us since we don't have to worry about loss of information. GitHub Copilot is also very context-aware. Based on the method name and the context of the file, it really helps with autocomplete. You can highlight a piece of code when you're refactoring to make it look better. It's a lifesaver for developers, using AI to help write code, suggest improvements, and even debug errors. Instead of spending hours searching for the right syntax or troubleshooting, Copilot provides real-time suggestions as you type. It's not just about speeding up the process; it's about enhancing creativity and reducing the mundane parts of coding.

But there are a few things that can be annoying. If you highlight code and ask for a suggestion, Copilot changes the whole code directly in your file and asks to accept or decline. I'm very possessive about my code, and Copilot changing it without showing a diff and then asking to accept or deny makes me nervous. I recently attended a GitHub Copilot conference, where I learned that it does offer multiple contextual suggestions, but its capabilities can vary based on the license tier. This might make an interesting topic for my next article, especially given that some tiers offer broader codebase analysis while others are more restricted. It does a pretty good job summarizing the codebase, but it's not smart enough to find implementations hidden deep inside the project structure.

Siri and Google Assistant Today

Siri and Google Assistant have continued to improve. They now integrate seamlessly with smart home devices, manage calendars, send messages, and even control entertainment systems. These assistants understand more languages, pick up on preferences, and become more personalized over time. They're no longer just tools; they're integral parts of our daily routines.

Why the Shift Matters

The transition from basic chatbots to sophisticated AI copilots makes a huge difference in how we interact with technology. Early chatbots were limited and often frustrating. They couldn't handle unexpected requests or understand the nuances of human conversation. Modern AI copilots, on the other hand, learn from interactions, understand context, and provide personalized support. They adapt to habits and preferences, making technology feel more intuitive and less like a separate entity.

Think about how these AI copilots impact daily life. Need to draft an email? Microsoft Copilot can suggest the right words. Writing code? GitHub Copilot has your back. Want to control a smart home or get directions while driving? Google Assistant or Siri handle it effortlessly. These assistants reduce the cognitive load, allowing you to focus on what truly matters without getting bogged down by repetitive tasks.

The Future of AI Copilots

What's next for AI copilots? Imagine even smarter assistants that can anticipate needs before you even realize them. They could streamline your digital interactions, seamlessly syncing across devices and services to support daily routines. While full management of our digital lives is a future goal, current AI copilots are getting closer to that vision by simplifying repetitive tasks and anticipating needs. Enhanced emotional intelligence might allow them to respond to moods, offering support when you're stressed or celebrating achievements with you.

Integration with emerging technologies like augmented reality (AR) and the Internet of Things (IoT) will make these assistants even more powerful. Check out the new Meta Ray-Ban smart glasses or the Meta Orion AR glasses. The Ray-Ban Meta glasses are cooler and more useful than ever, blending style with smart features. They display information right in your line of sight and let you interact with your AI copilot without reaching for your phone. The Meta Orion AR glasses take it a step further, offering a true augmented reality experience. They provide real-time assistance as you navigate your day, overlaying helpful information onto the real world. Imagine a future where you could walk down the street, and your AI copilot could guide you by overlaying relevant information onto your real-world view. While the Meta Ray-Ban glasses currently provide heads-up displays for basic interactions, more advanced AR experiences like the Meta Orion glasses will soon bring us closer to a world where our AI copilots are fully integrated into daily life. Smart environments that adjust automatically based on preferences and routines, all managed by your AI copilot, will become a reality with these advanced AR tools.

Wrapping It Up

From the annoying antics of Clippy to the smart, helpful AI copilots we use today, digital assistants have come a long way. They've evolved from simple, script-based bots to intelligent systems that enhance productivity, creativity, and everyday lives. These AI copilots aren't just tools; they're partners helping us navigate the complexities of both work and play.

Next time you ask your digital assistant for help, take a moment to appreciate the journey it's been on. The future holds even more exciting advancements, making these assistants even more integral to our lives. Embrace the change, explore the possibilities, and let your AI copilot help you unlock new levels of productivity and creativity. The evolution of digital assistants is a testament to how far we've come and a glimpse into the amazing future ahead.

Embrace the change, explore the possibilities, and let your AI copilot help you unlock new levels of productivity and creativity. The evolution of digital assistants is a testament to how far we've come and a glimpse into the amazing future ahead.

If you found this article helpful and want more practical insights, don't forget to like this post and follow me for future updates!

Disclaimer: This article reflects my personal insights and knowledge drawn from public sources. The views shared are entirely my own and do not reflect those of any past or present employers. For precise information, please consult official guidelines and resources provided by the organizations.

Cover Image Credits: Photo by Roman Synkevych on Unsplash

Enhancing React Applications with GraphQL Over REST APIs

Shreyam Duttagupta — Thu, 03 Oct 2024 05:26:43 +0000

In the rapidly changing world of web development, optimizing and scaling applications is always an issue. React.js had an extraordinary success for frontend development as a tool, that provides a robust way to create user interfaces. But it gets complicated with growing applications, especially when it comes to multiple REST API endpoints. Concerns such as over-fetching, where excessive data than required can be a source of performance bottleneck and a poor user experience.

Among the solutions to these challenges is adopting the use of GraphQL with React applications. If your backend has multiple REST endpoints, then introducing a GraphQL layer that internally calls your REST API endpoints can enhance your application from overfetching and streamline your frontend application. In this article, you will find how to use it, the advantages and disadvantages of this approach, various challenges; and how to address them. We will also dive deeper into some practical examples of how GraphQL can help you improve the ways you work with your data.

Overfetching in REST APIs

In REST APIs, Over-fetching occurs when the amount of data that the API delivers to the client is more than what the client requires. This is a common problem with REST APIs, which often returns a fixed Object or Response Schema. To better understand this problem let us consider an example.

Consider a user profile page where the it is only required to show the user’s name and email. With a typical REST API, fetching the user data might look like this:

fetch('/api/users/1')
  .then(response => response.json())
  .then(user => {
    // Use the user's name and profilePicture in the UI
  });

The API response will include unnecessary data:

{
  "id": 1,
  "name": "John Doe",
  "profilePicture": "/images/john.jpg",
  "email": "john@example.com",
  "address": "123 Denver St",
  "phone": "111-555-1234",
  "preferences": {
    "newsletter": true,
    "notifications": true
  },
  // ...more details
}

Although the application only requires the name and email fields of the user, the API returns the whole user object. This additional data often increases the payload size, take more bandwidth and can eventually slow down the application when used on a device with limited resources or a slow network connection.

GraphQL as a Solution

GraphQL addresses the overfetching problem by allowing clients to request exactly the data they need. By integrating a GraphQL server into your application, you can create a flexible and efficient data-fetching layer that communicates with your existing REST APIs.

How It Works

GraphQL Server Setup: You introduce a GraphQL server that serves as an intermediary between your React frontend and the REST APIs.
Schema Definition: You define a GraphQL schema that specifies the data types and queries your frontend requires.
Resolvers Implementation: You implement resolvers in the GraphQL server that fetch data from the REST APIs and return only the necessary fields.
Frontend Integration: You update your React application to use GraphQL queries instead of direct REST API calls.

This approach allows you to optimize data fetching without overhauling your existing backend infrastructure.

Implementing GraphQL in a React Application

Let’s look at how to set up a GraphQL server and integrate it into a React application.

Install Dependencies:

npm install apollo-server graphql axios

Define the Schema

Create a file called schema.js:

const { gql } = require('apollo-server');

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    email: String  // Ensure this matches exactly with the frontend query
  }

  type Query {
    user(id: ID!): User
  }
`;

module.exports = typeDefs;

This schema defines a User type and a user query that fetches a user by ID.

Implement Resolvers

Create a file called resolvers.js:

const resolvers = {
  Query: {
    user: async (_, { id }) => {
      try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
        const user = await response.json();

        return {
          id: user.id,
          name: user.name,
          email: user.email,  // Return email instead of profilePicture
        };
      } catch (error) {
        throw new Error(`Failed to fetch user: ${error.message}`);
      }
    },
  },
};

module.exports = resolvers;

The resolver for the user query fetches data from the REST API and returns only the required fields.

We will use https://jsonplaceholder.typicode.com/for our fake REST API.

Set Up the Server

Create a server.js file:

const { ApolloServer } = require('apollo-server');
const typeDefs = require('./schema');
const resolvers = require('./resolvers');

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.listen({ port: 4000 }).then(({ url }) => {
  console.log(`GraphQL Server ready at ${url}`);
});

Start the server:

node server.js

Your GraphQL server is live at http://localhost:4000/graphql and if you query your server, it will take you to this page.

Integrating with the React Application

We will now change the React application to use the GraphQL API.

Install Apollo Client

npm install @apollo/client graphql

Configure Apollo Client

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000', 
  cache: new InMemoryCache(),
});

Write the GraphQL Query

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

Now integrate the above pieces of codes with your react app. Here is a simple react app below which lets a user select the userId and displays the information:

import { useState } from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery } from '@apollo/client';
import './App.css';  // Link to the updated CSS

const client = new ApolloClient({
  uri: 'http://localhost:4000',  // Ensure this is the correct URL for your GraphQL server
  cache: new InMemoryCache(),
});

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

const User = ({ userId }) => {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div className="user-container">
      <h2>{data.user.name}</h2>
      <p>Email: {data.user.email}</p>
    </div>
  );
};

const App = () => {
  const [selectedUserId, setSelectedUserId] = useState("1");

  return (
    <ApolloProvider client={client}>
      <div className="app-container">
        <h1 className="title">GraphQL User Lookup</h1>
        <div className="dropdown-container">
          <label htmlFor="userSelect">Select User ID:</label>
          <select
            id="userSelect"
            value={selectedUserId}
            onChange={(e) => setSelectedUserId(e.target.value)}
          >
            {Array.from({ length: 10 }, (_, index) => (
              <option key={index + 1} value={index + 1}>
                {index + 1}
              </option>
            ))}
          </select>
        </div>
        <User userId={selectedUserId} />
      </div>
    </ApolloProvider>
  );
};

export default App;

Result:

Simple User

Working with Multiple Endpoints

Imagine a scenario where you need to retrieve a specific user’s posts, along with the individual comments on each post. Instead of making three separate API calls from your frontend React app and dealing with unnecessary data, you can streamline the process with GraphQL. By defining a schema and crafting a GraphQL query, you can request only the exact data your UI requires, all in one efficient request.

We need to fetch user data, their posts, and comments for each post from the different endpoints. We’ll use fetch to gather data from the multiple endpoints and return it via GraphQL.

Update Resolvers

const fetch = require('node-fetch');

const resolvers = {
  Query: {
    user: async (_, { id }) => {
      try {
        // fetch user
        const userResponse = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
        const user = await userResponse.json();

        // fetch posts for a user
        const postsResponse = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${id}`);
        const posts = await postsResponse.json();

        // fetch comments for a post
        const postsWithComments = await Promise.all(
          posts.map(async (post) => {
            const commentsResponse = await fetch(`https://jsonplaceholder.typicode.com/comments?postId=${post.id}`);
            const comments = await commentsResponse.json();
            return { ...post, comments };
          })
        );

        return {
          id: user.id,
          name: user.name,
          email: user.email,
          posts: postsWithComments,
        };
      } catch (error) {
        throw new Error(`Failed to fetch user data: ${error.message}`);
      }
    },
  },
};

module.exports = resolvers;

Update GraphQL Schema

const { gql } = require('apollo-server');

const typeDefs = gql`
  type Comment {
    id: ID!
    name: String
    email: String
    body: String
  }

  type Post {
    id: ID!
    title: String
    body: String
    comments: [Comment]
  }

  type User {
    id: ID!
    name: String
    email: String
    posts: [Post]
  }

  type Query {
    user(id: ID!): User
  }
`;

module.exports = typeDefs;

Server setup in server.js remains same. Once we update the React.js code, we get the below output:

Detailed User

Benefits of This Approach

Integrating GraphQL into your React application provides several advantages:

Eliminating Overfetching

A key feature of GraphQL is that it only fetches exactly what you request. The server only returns the requested fields and ensures that the amount of data transferred over the network is reduced by serving only what the query demands and thus improving performance.

Simplifying Frontend Code

GraphQL enables you to get the needful information in a single query regardless of their origin. Internally it could be making 3 API calls to get the information. This helps to simplify your frontend code because now you don’t need to orchestrate different async requests and combine their results.

Improving Developer’s Experience

A strong typing and schema introspection offer better tooling and error checking than in the traditional API implementation. Further to that, there are interactive environments where developers can build and test queries, including GraphiQL or Apollo Explorer.

Addressing Complexities and Challenges

This approach has some advantages but it also introduces some challenges that have to be managed.

Additional Backend Layer

The introduction of the GraphQL server creates an extra layer in your backend architecture and if not managed properly, it becomes a single point of failure.

Solution: Pay attention to error handling and monitoring. Containerization and orchestration tools like Docker and Kubernetes can help manage scalability and reliability.

Potential Performance Overhead

The GraphQL server may make multiple REST API calls to resolve a single query, which can introduce latency and overhead to the system.

Solution: Cache the results to avoid making several calls to the API. There exist some tools such as DataLoader which can handle the process of batching and caching of requests.

Conclusion

"Simplicity is the ultimate sophistication" — Leonardo da Vinci

Integrating GraphQL into your React application is more than just a performance optimization — it’s a strategic move towards building more maintainable, scalable, and efficient applications. By addressing overfetching and simplifying data management, you not only enhance the user experience but also empower your development team with better tools and practices.

While the introduction of a GraphQL layer comes with its own set of challenges, the benefits often outweigh the complexities. By carefully planning your implementation, optimizing your resolvers, and securing your endpoints, you can mitigate potential drawbacks. Moreover, the flexibility that GraphQL offers can future-proof your application as it grows and evolves.

Embracing GraphQL doesn’t mean abandoning your existing REST APIs. Instead, it allows you to leverage their strengths while providing a more efficient and flexible data access layer for your frontend applications. This hybrid approach combines the reliability of REST with the agility of GraphQL, giving you the best of both worlds.

If you’re ready to take your React application to the next level, consider integrating GraphQL into your data fetching strategy. The journey might present challenges, but the rewards — a smoother development process, happier developers, and satisfied users — make it a worthwhile endeavor.

Full Code Available

You can find the full code for this implementation on my GitHub repository: GitHub Link.