Build the Ultimate AI Super App - GenAI & NextJS

Clone a Next.js course starter into a local workspace, set up a dot env, install dependencies, and run the dev server on localhost 3000, enabling Clark auth and a dashboard.

Set up a Next.js project from scratch, install tailwind CSS, enable the app router and turbo pack, and run the dev server, then integrate Clark authentication and helper codes.

Master auth setup with clerk in a Next.js app by adding the clerk provider, creating a protection middleware, and wiring sign in, sign up, and a .env publishable key.

Implement Clerk authentication in the header by conditionally showing login or dashboard based on useUser, wire sign-out, and configure Next.js to load Clerk user images via remote patterns.

Select the blue theme in the themes area, copy its code, replace the root and dark entries in globals, save, and see the blue button on the login dashboard.

Build the chat feature of the app, set up a dashboard menu, enable local storage chat history, and add a clear chart option with hands-on steps.

Build an AI chat in the app by creating a chat route and a client component, loaded with SSR disabled, and connect to OpenAI via API route using a key.

Create a client-side chat input UI with header, message list, and fixed bottom field, including messages state, loading and errors, plus an auto-resizing textarea with enter-to-submit behavior and character counter.

Create a submit function for a chat interface, validate input, manage loading and errors, and post messages to a backend api using a structured messages array.

Build the chat display for an AI app by rendering markdown with code blocks using a syntax highlighter, with avatars for user and assistant, and loading, error states, plus auto-scroll.

Create image generation prompts, set aspect ratio 16 by 9, test styles like realistic, cinematic, 3d, and anime, and explore prompts such as a beautiful lady in a red dress.

Set up a replicate image generation API route in Next.js app by obtaining an API token, storing it in env, and posting a prompt with aspect ratio to generate images.

Build a client-side image generator UI with a two-column grid that handles prompts, aspect ratio, and visual styles, communicates with the backend, and manages loading and prediction id.

Create a prediction API route to poll replicate for image generation, using useEffect and setInterval to fetch status by prediction ID, then update image URL and loading state on success.

Display the generated image on the page, show a red-bordered error message if present, and provide download and copy URL buttons for the image URL.

Demonstrate image upscaling to sharpen a blurred photo with face enhancement using an image upscaler; upload via image kit, adjust the scale factor, and download or copy the URL.

Create an image upload API in a Next.js app using image kit to store images and return a URL, then connect to replicate's nightmare AI ESR GAN for upscaling.

Create an image upscale api route by duplicating an existing generation route, validating image URL, scale, and face enhance, wiring the replicate api key, and including versioning for reliable upscaling.

Build the image upscaler by creating an image uploader with preview, remove, and upload controls, and connect it to the API for processing.

Create an image upscaler component that uploads an image, sends its URL with a scale factor and face enhancement to the image upscaler API, and displays the enhanced image.

Generate a five-second vertical video from a text prompt using AI models, including Clink; add other models, download the output, and prepare to build the project.

Build a video generator api route to produce image-to-video and text-to-video outputs with configurable aspect ratio and duration, using models like cling and seed dance.

Convert the image generator into a video generator by adding video URL, length, and model options, and render with a video tag using the new video API.

Create an image to video component in a NextJS dashboard, integrating an image uploader, image URL preview, and a video generator API to produce videos from an image or prompt.

Explore an image-to-video generator by uploading a vertical image, adding a prompt like girl dancing, and generating a five-second video to preview playback.

Explore the speech generator by typing your speech, selecting from categorized voices such as Ethan or Sierra, and generating and playing an AI voice that helps create and inspire content.

Build a speech generator API route using real speech services, obtain an API key, and configure the env file while selecting voices (Sierra) and mp3 output.

Build a speech generator component with text input, voice selection, and generated mp3 audio output, using categorized voice options and an option to copy the audio URL.

Generate speech-to-text from audio by pasting a URL, transcribe the audio, and create a matched srt subtitle file.

Create a free Deepgram account and obtain an API key, add it to the .env file, and build an API route to call Deepgram's speech-to-text endpoint to generate subtitles.

Builds a speech-to-text component as a caption generator, wiring an audio URL input to generate a transcript and offer an optional download of srt captions.

Learn how to create a talking AI avatar by supplying an audio URL and a video URL, generating speech, syncing the audio with the video, and previewing the result.

Learn to build an api route for avatar generation using ByteDance lip sync, wiring video and audio URLs through a generate route in a video avatar folder.

Build a video avatar generator UI that accepts video and audio URLs, previews them, and generates a video avatar with a result URL for download or copy.