I-COM’s head of development David Walsh has created a new Harry Potter themed legal website using only AI.
For this project, David utilised a diverse tech stack that included NextJS, SCSS modules, Prismic, TypeScript, GPT-4, and DALL-E 2. Drawing inspiration from I-COM’s work in the legal sector and the game Hogwarts Legacy, his goal was to create a unique and engaging website experience.
The result of this exploration is a Harry Potter-themed legal firm site called Alohomora & Associates: Wizarding Legal Services, which can be found here: https://alohomora-seven.vercel.app/
David said: “I wanted to explore the possibilities of AI on a creative level. At I-COM we utilise AI technology to create efficiencies in our processes but leave the creative output to our various teams. So it was interesting to see where the technology could work in this context. While AI is not at the point where we can use it in an everyday creative context this experiment did show the seemingly limitless possibilities for AI.
“As an experienced developer, I have been using GitHub Copilot, an AI-powered coding assistant that autocompletes code snippets based on the context provided. However, I wanted to explore the potential of GPT-4 (which we wrote about here), a more advanced AI language model developed by OpenAI, to build complete websites. GPT-4 differs from GitHub Copilot in that it is a more general AI model, designed to understand and generate human-like text across a wider range of topics and tasks, rather than focusing solely on code completion.
“By following GPT-4’s clear and concise setup instructions, the foundation was laid for a robust Next.js project that incorporated TypeScript, SCSS modules, and Prismic with Slice Machine. GPT-4’s guidance facilitated a smooth setup process, allowing for a seamless transition to the development phase.”
Tech Stack Breakdown:
NextJS
A popular React framework that enables server-rendering and static site generation, NextJS is the foundation of the website.
SCSS Modules
These enable modular and maintainable styling for components, making it easier to manage the site’s look and feel.
Prismic
A headless CMS, Prismic allows for easy management of the site’s content, such as services and text blocks, without needing to touch the code.
TypeScript
A typed superset of JavaScript, TypeScript adds static typing to the codebase, enhancing readability and maintainability.
GPT-4
A powerful AI language model, GPT-4 was employed to assist with various aspects of site development, including content generation, component creation, and error resolution.
DALL-E 2
An AI image generator, DALL-E 2 was utilised to create images for the website based on GPT-4’s suggestions, adding a visual touch to the content.
Laying the Foundation: GPT-4 and Project Setup Instructions
GPT-4 played a crucial role in providing setup instructions for the project, helping to establish the necessary foundation for integrating Next.js, TypeScript, SCSS modules, and Prismic with Slice Machine. By offering step-by-step guidance, GPT-4 ensured that the project was set up correctly and efficiently from the start.
Key aspects of GPT-4’s instructions included:
Creating a new Next.js project with TypeScript support: GPT-4 provided the commands to create a new Next.js project using the TypeScript template, streamlining the initial setup process and ensuring TypeScript integration from the beginning.
Installing SCSS support: GPT-4 guided the installation of SCSS support and its types, along with instructions on renaming .css files to .scss and updating their respective imports in the components.
Setting up Prismic and Slice Machine: GPT-4 offered detailed instructions for installing the necessary Prismic CLI and setting up Slice Machine, ensuring seamless integration with the project’s content management system.
Installing Prismic packages: GPT-4 provided the commands to install essential packages for Prismic, laying the groundwork for fetching and displaying content from the Prismic platform.
Configuring environment variables: GPT-4 instructed the creation of a .env.local file to store the Prismic API endpoint and guided the configuration of the next.config.js file to load environment variables.
For more information, visit www.i-com.net.
