LogoLogo
HomeDiscourseBlogDiscord
  • Introduction
  • Introduction
    • Quick start
    • Aurelia for new developers
    • Hello world
      • Creating your first app
      • Your first component - part 1: the view model
      • Your first component - part 2: the view
      • Running our app
      • Next steps
  • Templates
    • Template Syntax
      • Attribute binding
      • Event binding
      • Text interpolation
      • Template promises
      • Template references
      • Template variables
      • Globals
    • Custom attributes
    • Value converters (pipes)
    • Binding behaviors
    • Form Inputs
    • CSS classes and styling
    • Conditional Rendering
    • List Rendering
    • Lambda Expressions
    • Local templates (inline templates)
    • SVG
  • Components
    • Component basics
    • Component lifecycles
    • Bindable properties
    • Styling components
    • Slotted content
    • Scope and context
    • CustomElement API
    • Template compilation
      • processContent
      • Extending templating syntax
      • Modifying template parsing with AttributePattern
      • Extending binding language
      • Using the template compiler
      • Attribute mapping
  • Getting to know Aurelia
    • Routing
      • @aurelia/router
        • Getting Started
        • Creating Routes
        • Routing Lifecycle
        • Viewports
        • Navigating
        • Route hooks
        • Router animation
        • Route Events
        • Router Tutorial
        • Router Recipes
      • @aurelia/router-lite
        • Getting started
        • Router configuration
        • Configuring routes
        • Viewports
        • Navigating
        • Lifecycle hooks
        • Router hooks
        • Router events
        • Navigation model
        • Current route
        • Transition plan
    • App configuration and startup
    • Enhance
    • Template controllers
    • Understanding synchronous binding
    • Dynamic composition
    • Portalling elements
    • Observation
      • Observing property changes with @observable
      • Effect observation
      • HTML observation
      • Using observerLocator
    • Watching data
    • Dependency injection (DI)
    • App Tasks
    • Task Queue
    • Event Aggregator
  • Developer Guides
    • Animation
    • Testing
      • Overview
      • Testing attributes
      • Testing components
      • Testing value converters
      • Working with the fluent API
      • Stubs, mocks & spies
    • Logging
    • Building plugins
    • Web Components
    • UI virtualization
    • Errors
      • Kernel Errors
      • Template Compiler Errors
      • Dialog Errors
      • Runtime HTML Errors
    • Bundlers
    • Recipes
      • Apollo GraphQL integration
      • Auth0 integration
      • Containerizing Aurelia apps with Docker
      • Cordova/Phonegap integration
      • CSS-in-JS with Emotion
      • DOM style injection
      • Firebase integration
      • Markdown integration
      • Multi root
      • Progress Web Apps (PWA's)
      • Securing an app
      • SignalR integration
      • Strongly-typed templates
      • TailwindCSS integration
      • WebSockets Integration
      • Web Workers Integration
    • Playground
      • Binding & Templating
      • Custom Attributes
        • Binding to Element Size
      • Integration
        • Microsoft FAST
        • Ionic
    • Migrating to Aurelia 2
      • For plugin authors
      • Side-by-side comparison
    • Cheat Sheet
  • Aurelia Packages
    • Validation
      • Validation Tutorial
      • Plugin Configuration
      • Defining & Customizing Rules
      • Architecture
      • Tagging Rules
      • Model Based Validation
      • Validation Controller
      • Validate Binding Behavior
      • Displaying Errors
      • I18n Internationalization
      • Migration Guide & Breaking Changes
    • i18n Internationalization
    • Fetch Client
      • Overview
      • Setup and Configuration
      • Response types
      • Working with forms
      • Intercepting responses & requests
      • Advanced
    • Event Aggregator
    • State
    • Store
      • Configuration and Setup
      • Middleware
    • Dialog
  • Tutorials
    • Building a ChatGPT inspired app
    • Building a realtime cryptocurrency price tracker
    • Building a todo application
    • Building a weather application
    • Building a widget-based dashboard
    • React inside Aurelia
    • Svelte inside Aurelia
    • Synthetic view
    • Vue inside Aurelia
  • Community Contribution
    • Joining the community
    • Code of conduct
    • Contributor guide
    • Building and testing aurelia
    • Writing documentation
    • Translating documentation
Powered by GitBook
On this page
  • Prerequisites
  • 1. Setting Up the Aurelia 2 Frontend
  • Create a New Aurelia Project
  • Install Dependencies
  • 2. Setting Up the Node.js Backend
  • Initialize the Backend Project
  • Install Required Packages
  • Create the Express Server
  • Secure Your API Key
  • 3. Connecting Frontend and Backend
  • Create the Chat Component in Aurelia
  • Create the Chat Component View
  • Apply CSS Styling
  • Add the Chat Component to the App
  • 4. Running the Application
  • Start the Backend Server
  • Start the Aurelia Frontend
  • 5. Additional Enhancements
  • Conclusion

Was this helpful?

Export as PDF
  1. Tutorials

Building a ChatGPT inspired app

Learn how to build a ChatGPT-inspired application with Aurelia 2, Node.js, and the OpenAI GPT-4o API.

PreviousDialogNextBuilding a realtime cryptocurrency price tracker

Last updated 3 months ago

Was this helpful?

This tutorial will guide you through creating a ChatGPT-like application using Aurelia 2 for the frontend, Node.js + Express for the backend, and OpenAI's GPT-4o API to generate responses. We'll use the official OpenAI Node.js client for integration and apply modern styling.


Prerequisites

Before you begin, ensure you have the following installed:

  • (latest LTS version recommended)


1. Setting Up the Aurelia 2 Frontend

Create a New Aurelia Project

Run the following command to scaffold a new Aurelia 2 project with Vite:

npx makes aurelia

Select "Default TypeScript App" and "Vite" when prompted.

Install Dependencies

Navigate to your project directory and install dependencies:

cd chatgpt-clone
npm install

2. Setting Up the Node.js Backend

Initialize the Backend Project

Create a new directory for the backend and initialize a Node.js project:

mkdir server
cd server
npm init -y

Install Required Packages

Install Express and the official OpenAI Node.js client:

npm install express openai cors body-parser dotenv

Create the Express Server

Create an index.js file inside the server directory:

const express = require('express');
const { OpenAI } = require('openai');
const cors = require('cors');
const bodyParser = require('body-parser');
require('dotenv').config();

const app = express();
const port = 3001;

app.use(cors());
app.use(bodyParser.json());

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

app.post('/api/chat', async (req, res) => {
  const { message } = req.body;

  try {
    const response = await openai.chat.completions.create({
      model: 'gpt-4o',
      messages: [{ role: 'user', content: message }],
    });

    res.json({ reply: response.choices[0].message.content });
  } catch (error) {
    console.error(error);
    res.status(500).send('Error communicating with OpenAI API');
  }
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Secure Your API Key

Create a .env file in the server directory:

OPENAI_API_KEY=your_openai_api_key_here

Replace your_openai_api_key_here with your actual OpenAI API key.


3. Connecting Frontend and Backend

Create the Chat Component in Aurelia

Inside your Aurelia 2 project, create a new file src/components/chat.ts:

import { IHttpClient, json } from 'aurelia';
import { inject } from 'aurelia';

@inject(IHttpClient)
export class Chat {
  public userMessage = '';
  public chatHistory: { sender: string; message: string }[] = [];

  constructor(private http: IHttpClient) {}

  async sendMessage() {
    if (this.userMessage.trim() === '') return;

    this.chatHistory.push({ sender: 'User', message: this.userMessage });

    try {
      const response = await this.http.post(
        'http://localhost:3001/api/chat',
        json({ message: this.userMessage })
      );
      const data = await response.json();
      this.chatHistory.push({ sender: 'Bot', message: data.reply });
    } catch (error) {
      console.error('Error:', error);
      this.chatHistory.push({
        sender: 'Bot',
        message: 'Sorry, something went wrong.',
      });
    }

    this.userMessage = '';
  }
}

Create the Chat Component View

Create src/components/chat.html:

<template>
  <div class="chat-container">
    <div class="chat-history">
      <div
        repeat.for="entry of chatHistory"
        class="message ${entry.sender === 'User' ? 'user' : 'bot'}"
      >
        <strong>${entry.sender}:</strong> ${entry.message}
      </div>
    </div>
    <form submit.trigger="sendMessage()">
      <input
        type="text"
        value.bind="userMessage"
        placeholder="Type your message..."
      />
      <button type="submit">Send</button>
    </form>
  </div>
</template>

Apply CSS Styling

Add the following styles to your src/my-app.css:

.chat-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.chat-history {
  border: 1px solid #ccc;
  padding: 10px;
  height: 400px;
  overflow-y: scroll;
  margin-bottom: 10px;
  background: #f9f9f9;
}

.message {
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 4px;
}

.message.user {
  background-color: #007bff;
  color: white;
  text-align: right;
}

.message.bot {
  background-color: #e0e0e0;
  color: black;
}

form {
  display: flex;
}

input[type='text'] {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  margin-left: 10px;
  border-radius: 4px;
}

button:hover {
  background-color: #0056b3;
}

Add the Chat Component to the App

In your my-app.html file, add the following:

<import from="./components/chat"></import>
<div class="container">
  <chat></chat>
</div>

4. Running the Application

Start the Backend Server

Navigate to the server directory and run:

node index.js

Start the Aurelia Frontend

Navigate to your Aurelia project directory and run:

npm start

A browser will open your app automatically.


5. Additional Enhancements

  • Typing Indicator: Show a "Bot is typing..." animation while waiting for a response.

  • Markdown Support: Render bot responses with Markdown formatting.

  • Streaming Responses: Implement OpenAI's streaming API for real-time responses.

  • Authentication: Allow users to log in and save chat history.

  • Dark Mode: Add a toggle to switch between light and dark themes.


Conclusion

In this tutorial, we built a ChatGPT-inspired app using Aurelia 2, Node.js, and OpenAI's GPT-4o API. This project covered:

  • Frontend: Aurelia 2 with HTTP client integration.

  • Backend: Node.js + Express with OpenAI API integration.

  • Styling: Modern CSS for a clean UI.

Node.js
OpenAI API Key