DEV Community

Cover image for How I built my portfolio as a chatbot using Next.js
Jeffrey Yu
Jeffrey Yu

Posted on • Edited on

14 4

How I built my portfolio as a chatbot using Next.js

Many developer portfolios out there are boring, so are my previous ones. I think a new portfolio as a chat bot would be interesting, as it creates interactive user experience and adds more fun by talking to "me". The website is live and I'd to share how I built it using Next.js.

react-chatbot-kit

I used react-chatbot-kit to implement chatbot messages and follow-up options. I followed this tutorial to set it up.

In react-chatbot-kit, config configures settings like initial messages and widgets (custom components that come with a message). ActionProvider creates bot messages with widgets. MessageParser parses user messages and calls certain actions in ActionProvider.

// index.js
import Chatbot from 'react-chatbot-kit';
...
<Chatbot
  config={config}
  actionProvider={ActionProvider}
  messageParser={MessageParser}
/>
Enter fullscreen mode Exit fullscreen mode

Greetings & Jokes

First, the chatbot greets and asks how's the user doing today. The good mood option leads to my portfolio sections and the bad mood one leads to a joke.

joke message

// config.js

const getMoodOptions = (actionProvider) => {
  return [
    {
      text: 'Doing great! Tell me about yourself',
      handler: () => actionProvider.handleGoodMood(),
      id: 1,
    },
    {
      text: 'Having a bad day...',
      handler: () => actionProvider.handleBadMood(),
      id: 2,
    },
  ];
};

const config = {
  initialMessages: [
    createChatBotMessage(
      "Hi, I'm Jeffrey. Nice to meet you! I How are you doing today?",
      { widget: 'moodOptions' }
    ),
  ],
widgets: [
    {
      widgetName: 'moodOptions',
      widgetFunc: ({ actionProvider }) => (
        <Options actionProvider={actionProvider} getOptions={getMoodOptions} />
      ),
    },
  ]
}
Enter fullscreen mode Exit fullscreen mode
// ActionProvider.js

class ActionProvider {
  constructor(createChatBotMessage, setStateFunc) {
    this.createChatBotMessage = createChatBotMessage;
    this.setState = setStateFunc;
  }

  handleGoodMood() {
    const message = this.createChatBotMessage(intro, {
      widget: 'personalOptions',
    });
    this.updateChatbotState(message);
  }

  async handleBadMood() {
    const jokeData = await (
      await fetch('https://v2.jokeapi.dev/joke/Any?type=single')
    ).json();
    const message = this.createChatBotMessage(
      `Let me tell you a joke: ${jokeData.joke}`,
      {
        widget: 'jokeOptions',
      }
    );
    this.updateChatbotState(message);
  }
}
Enter fullscreen mode Exit fullscreen mode

Portfolio sections

After the user is entertained by jokes, he or she can choose to see my experience, projects, skills, or blogs. I built widget cards for each section and add them to config and ActionProvider like the previous greeting.

portfolio sections message

I add the section cards in the sidebar so that the user can browse my portfolio even without using the chatbot. I'm also adding AI response to user message add more fun to the website :)

You can check out the code for this website here.

Tiugo image

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now

Top comments (0)

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay