DEV Community: Kojiro Yanoᯅ/VR Educator

Generating Consistent 3D Models from a ChatGPT image.

Kojiro Yanoᯅ/VR Educator — Sun, 30 Mar 2025 15:26:51 +0000

Introduction

With the enhanced image-generation capabilities of ChatGPT, not only can you create illustrations of any environment, but you can also have ChatGPT break them into individual component images. From there, you can feed each extracted component into an image-to-mesh pipeline to generate 3D models. Conceptually, this means you can now generate as many 3D models as you like in a consistent style.

Of course, even before this, you could have asked ChatGPT for a “picture of a red apple” and then used image-to-mesh to create a 3D model. However, by having ChatGPT separate out the parts of a single illustration, you can ensure that all objects share the same color palette, style, and look—allowing you to bulk-generate a large set of cohesive 3D models.

Below is an example where all of the 3D models were generated from a single ChatGPT-created illustration.

In this article, I’ll explain how it’s done.

Step 1: Generating the Original Illustration in ChatGPT

This is straightforward. For instance, you might prompt ChatGPT with:

Generate an illustration of a European-style cafe interior,
in an isometric projection, with a somewhat cartoonish style.

The key term here is “isometric projection.” By including this, the image will (as much as possible) avoid perspective distortion. Also, try not to include too many objects in the scene, because the more objects there are, the more work you’ll have extracting and converting them.

Below is the image I used for this example, generated by ChatGPT:

Next, I gave ChatGPT a second instruction:

I want to recreate all the furniture and appliances in this image as 3D models.
Please separate each item and show them arranged on a single sheet.
Make each piece clear and easy to reference for 3D modeling.
Use a white background.

ChatGPT will then produce a single image with all the “parts” laid out separately:

Ideally, we’d like ChatGPT to give us each item as a separate image, but ChatGPT only outputs one image per prompt. We’ll handle splitting them in the next step.

Step 2: Splitting the Parts into Individual Images

Go to the Parts Extraction Tool.

Upload the single “combined” sheet from above. The tool automatically detects and splits each object, giving you separate images. You can click Download as ZIP to download them all in one go.

Under “Custom Background Color” you can choose whether the images have a white or transparent background (or pick a custom color). This might matter depending on which Image-to-Mesh tool you use, but usually transparent or white is fine.

Step 3: Installing the Local Image-to-Mesh Library with pinokio

Next, we’ll convert these 2D images into 3D models. You could use a service like Meshy for this, but if you have a large number of images, the costs can get high. Therefore, we’ll use a local Image-to-Mesh library. There are several, but one powerful option is Hunyuan3D-2.

However, installing Hunyuan3D-2 can be tedious. That’s where pinokio comes in. Pinokio automates installing libraries and provides a local GUI to run them, reminiscent of Hugging Face Spaces. According to this article, you’ll need:

An NVIDIA GPU with at least 8 GB VRAM
GPU driver version 550 or later
At least 24 GB of system memory

You’ll also need around 50 GB of disk space available.

Download pinokio (Windows version) from the official site.
When running the installer, you might see a security warning. Click “More info” and then “Run anyway.”
Accept the default settings until you reach the start screen, then click “Visit Discover Page.”

Hunyuan3D-2 might not be listed among the available models by default.

Click “Download from URL” and enter:

https://github.com/pinokiofactory/Hunyuan3D-2.git

Then click “One-Click Install with Pinokio.” It will list all the packages to install. Confirm with “install.” During installation, you’ll see a console window where everything is set up in a virtual environment. Keep an eye on it and follow any on-screen instructions.

When it’s finished, you’ll see:

Step 4: Batch-Converting Images into 3D Models

At this point, everything should be installed. By default, the files for Hunyuan3D-2 reside in:

C:\pinokio\api\Hunyuan3D-2.git\app

Open a command prompt and navigate to that app folder. You should see files like these:

4.1 Activating the Virtual Environment

First, activate the virtual environment:

.\env\Scripts\activate

4.2 Running the Local Server

Next, start the local server that handles 3D generation:

python api_server.py --enable_tex --host 0.0.0.0 --port 8080

--enable_tex tells it to generate textures as well.
--host and --port specify where the service runs.

The server will download necessary data, which can take a while. Once it’s done, you’ll see something like:

4.3 Testing with a Single Image

Create a script called generate.py in the same app folder:

import base64
import requests
import json

def send_image_to_api():
    # Base64-encode the image file
    with open('assets/demo.png', 'rb') as image_file:
        img_b64_str = base64.b64encode(image_file.read()).decode('utf-8')

    # API endpoint and request data
    url = "http://localhost:8080/generate"
    headers = {
        "Content-Type": "application/json"
    }
    payload = {
        "image": img_b64_str,
        "texture": True
    }

    # Send the POST request
    response = requests.post(url, headers=headers, json=payload)

    # Save the response
    if response.status_code == 200:
        with open('test1.glb', 'wb') as f:
            f.write(response.content)
        print("GLB file saved successfully.")
    else:
        print(f"Error occurred. Status code: {response.status_code}")

if __name__ == "__main__":
    send_image_to_api()

Then open another command prompt (no need to activate the env again for the second prompt), go to the app folder, and run:

python generate.py

If it works, you’ll get a .glb file with textures. The server window should show something like:

You’ll find the test1.glb file in the same folder as generate.py:

4.4 Batch Conversion for Multiple Images

Create another script, generate_myimages.py, in the same folder:

import base64
import requests
import json
import os
import time

def send_image_to_api(image_path, output_path, retries=3, timeout=600):
    print(f"\n--- Start processing: {image_path} ---")
    start_time = time.time()

    with open(image_path, 'rb') as image_file:
        img_b64_str = base64.b64encode(image_file.read()).decode('utf-8')

    url = "http://localhost:8080/generate"
    headers = {"Content-Type": "application/json"}
    payload = {
        "image": img_b64_str,
        "texture": True
    }

    for attempt in range(1, retries + 1):
        try:
            print(f"  → Sending to API (attempt {attempt}/{retries})...")
            response = requests.post(url, headers=headers, json=payload, timeout=timeout)

            if response.status_code == 200:
                with open(output_path, 'wb') as f:
                    f.write(response.content)
                duration = time.time() - start_time
                minutes = int(duration // 60)
                seconds = int(duration % 60)
                print(f"  ✅ Success: saved to {output_path} (time taken: {minutes}m {seconds}s)")
                return
            else:
                print(f"  ❌ Status code: {response.status_code}")

        except requests.exceptions.Timeout:
            print("  ⚠️ Timeout occurred.")
        except Exception as e:
            print(f"  ⚠️ Error: {e}")

        time.sleep(5)  # Retry interval

    duration = time.time() - start_time
    minutes = int(duration // 60)
    seconds = int(duration % 60)
    print(f"  ❌ Failed after final attempt: {image_path} (time taken: {minutes}m {seconds}s)")

def process_all_images():
    input_dir = 'assets/myimages'
    output_dir = 'assets/output_glb'
    os.makedirs(output_dir, exist_ok=True)

    image_files = sorted([
        f for f in os.listdir(input_dir)
        if f.lower().endswith(('.png', '.jpg', '.jpeg'))
    ])

    total = len(image_files)
    print(f"=== Processing {total} images in total ===")

    for idx, filename in enumerate(image_files, 1):
        image_path = os.path.join(input_dir, filename)
        base_name = os.path.splitext(filename)[0]
        output_path = os.path.join(output_dir, f'{base_name}.glb')
        print(f"\n📄 [{idx}/{total}] Processing {filename} ...")
        send_image_to_api(image_path, output_path)

    print("\n=== All done ===")

if __name__ == "__main__":
    process_all_images()

Place all your extracted part images into assets/myimages. Then run:

python generate_myimages.py

You’ll end up with .glb files in the assets/output_glb folder:

You can see the final 3D models at the top of this article. They turned out pretty well, although some details, like the plant leaves, got a bit distorted. Future improvements to the model might help.

Conclusion

In this example, I created 12 objects from a single illustration. By asking ChatGPT to generate another illustration in the same style—perhaps a different cafe or a different scene—and repeating the workflow, you can produce a large number of objects that share a consistent look. Traditionally, if you wanted to build a virtual environment with 3D models, you might purchase them from various marketplaces only to find you’re missing a particular item or the styles don’t match. With this method, you can maintain a cohesive style across your entire 3D asset library.

I hope you find this approach useful for populating virtual spaces with consistent 3D objects. Enjoy exploring the possibilities!

Happy 3D modeling with ChatGPT and local Image-to-Mesh!

If you have any questions or run into issues, let me know in the comments.

How to Use LlamaIndex.TS on Vercel

Kojiro Yanoᯅ/VR Educator — Fri, 21 Feb 2025 09:10:56 +0000

Disclaimer

This is an English translation of my original Japanese post on Qiita (https://qiita.com/yanosen_jp/items/db6e6f6d066d6bd06c68).

Introduction

LlamaIndex (originally written in Python) is an open-source data framework for working with LLMs and data. LlamaIndex.TS brings that functionality to JavaScript/TypeScript environments—ranging from Node.js and Deno to the Vercel Edge Runtime. While it focuses on server-side usage (due to some missing browser APIs), it provides a lightweight, low-latency way to work with LLMs.

However, not all features from the Python version are available, and deploying in a serverless environment like Vercel can present additional challenges. On the flip side, once set up correctly, it’s incredibly responsive. Vercel even offers an AI SDK that integrates seamlessly with LlamaIndex.

In this post, we’ll look at the basic steps and considerations for using LlamaIndex.TS on Vercel. As I’m also relatively new to this, feel free to leave a comment with any corrections or feedback!

Key Resources

Before you begin, I recommend reviewing the following:

LlamaIndex.TS Official GitHub
- Check out the examples directory.
LlamaIndex.TS Official Docs
- Setup tips for Next.js
- Vercel Integration Docs
Vercel AI SDK/Adapter for LlamaIndex

Basic Setup

In this tutorial, we’ll be using Next.js and Vercel. Below are the commands to get started in your project’s root directory:

# Initialize a Next.js app
npx create-next-app@latest .

# Initialize a Vercel project
vercel

# (Optional) Install and use Node.js 22 via nvm
nvm install 22
nvm use 22

# Install LlamaIndex.TS core
npm install llamaindex

TypeScript Configuration

Make sure your tsconfig.json has the following setting:

{
  "compilerOptions": {
    // ...
    "moduleResolution": "bundler"
    // ...
  }
}

This is required so TypeScript can properly handle ESM, CJS, and conditional exports in a serverless environment. See the official note for more details.

Switching to `next.config.mjs`

Following the official setup instructions, you should delete next.config.ts and create a next.config.mjs instead:

import withLlamaIndex from "llamaindex/next";

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withLlamaIndex(nextConfig);

This helps Next.js adapt to ECMAScript Modules and avoids version conflicts.

Example: Using the OpenAI Chat Model

Below is a simplified version of the official OpenAI example for GPT-4o-mini.

1. Helper Module

Create a helper module for OpenAI calls (e.g., lib/openai.ts). This centralizes your OpenAI settings.

import { OpenAI } from "@llamaindex/openai";

export async function getChatResponse(message: string) {
  const llm = new OpenAI({ model: "gpt-4o-mini", temperature: 0.1 });
  const response = await llm.chat({
    messages: [{ content: message, role: "user" }],
  });
  return response.message.content;
}

2. Backend API Endpoint

Set up an API route in app/api/openai/route.ts to handle requests and call your helper function:

import { NextResponse } from 'next/server';
import { getChatResponse } from '@/lib/openai';

export async function POST(request: Request) {
  try {
    const { content } = await request.json();
    const response = await getChatResponse(content);
    return NextResponse.json({ response });
  } catch (error) {
    console.error('API Error:', error);
    return NextResponse.json({ error: 'Error occurred' }, { status: 500 });
  }
}

3. Frontend UI Component

Finally, create a simple UI for testing in app/page.tsx:

'use client';

import { useState } from 'react';

export default function Home() {
  const [input, setInput] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const res = await fetch('/api/openai', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ type: 'chat', content: input }),
      });
      const data = await res.json();
      setResponse(data.response);
    } catch (error) {
      console.error('Client Error:', error);
      setResponse('An error occurred.');
    }
  };

  return (
    <div className="p-8">
      <form onSubmit={handleSubmit}>
        <textarea
          value={input}
          onChange={(e) => setInput(e.target.value)}
          className="w-full p-2 border rounded"
        />
        <button
          type="submit"
          className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
        >
          Submit
        </button>
      </form>

      {response && (
        <div className="mt-4 p-4 bg-gray-100 rounded">
          {response}
        </div>
      )}
    </div>
  );
}

4. Environment Variables

In your local environment, make sure to place your OpenAI API key in .env.local:

OPENAI_API_KEY=sk-xxxx...

Also configure this in the Vercel dashboard under Settings → Environment Variables to ensure your deployed functions can access it.

5. Test Locally and Deploy

Run locally:

npm run dev

Check http://localhost:3000. If everything looks good, deploy to Vercel:

vercel deploy

Example: Using the Vercel AI SDK

Vercel provides an AI SDK that simplifies working with large language model responses, including streaming out tokens as they come in.

1. Install the SDK

npm install ai

2. Create the API Route

Below is an example using the LlamaIndex adapter. This closely follows the official example, plus a few extra console.log calls so you can see it in action:

// app/api/aisdk/route.ts
import { OpenAI, SimpleChatEngine } from 'llamaindex';
import { LlamaIndexAdapter } from 'ai';

export const maxDuration = 60; // optional, define your own constants

export async function POST(req: Request) {
  console.log('ai sdk route');

  const { prompt } = await req.json();

  const llm = new OpenAI({ model: 'gpt-4o-mini' });
  const chatEngine = new SimpleChatEngine({ llm });

  const stream = await chatEngine.chat({
    message: prompt,
    stream: true,
  });

  return LlamaIndexAdapter.toDataStreamResponse(stream);
}

3. Frontend with `useCompletion`

In your page.tsx, you can significantly reduce boilerplate by using the useCompletion hook, which handles streaming:

'use client';

import { useCompletion } from 'ai/react';

export default function Home() {
  const { completion, input, handleInputChange, handleSubmit } = useCompletion({
    api: '/api/aisdk',
  });

  return (
    <div className="p-8">
      <form onSubmit={handleSubmit}>
        <textarea
          value={input}
          onChange={handleInputChange}
          className="w-full p-2 border rounded"
        />
        <button type="submit" className="mt-2 px-4 py-2 bg-blue-500 text-white rounded">
          Submit
        </button>
      </form>

      {completion && (
        <div className="mt-4 p-4 bg-gray-100 rounded">
          {completion}
        </div>
      )}
    </div>
  );
}

Because of streaming, you’ll see the answer come in gradually rather than in one chunk.

Wrapping Up

LlamaIndex.TS has less documentation and fewer examples compared to the Python version, but it builds quickly and feels snappy in a serverless environment. With Vercel’s AI SDK, you also get streaming out of the box, which makes for a better user experience.

If you run into issues or notice any mistakes here, please leave a comment. Let’s explore and improve on LlamaIndex.TS together!

Happy coding!

Self-Hosting a Multiplayer WebXR App with Needle Engine on Vercel

Kojiro Yanoᯅ/VR Educator — Wed, 12 Feb 2025 02:27:18 +0000

Disclaimer

This is an English translation of my original Japanese post on Qiita (https://qiita.com/yanosen_jp/items/8362f1ca36f9012ac923).

Introduction

Needle Engine is a web-based 3D engine designed to run advanced 3D content in a browser environment. It easily integrates with existing 3D creation tools like Unity or Blender, allowing you to embed interactive 3D scenes into your projects without much friction. Because it's built on modern web standards, any browser supporting WebGL can run the engine on desktops, mobile devices, and VR/AR headsets.

Use cases include browser-based games, interactive promotional websites, 3D product viewers, educational and training VR content, AR demonstrations, and more. Since Needle Engine supports both multi-user functionality and WebXR, it’s also suitable for real-time collaboration and digital twins.

While you can upload and host your Needle Engine scenes on Needle Cloud, you can also host them yourself. In this post, we’ll cover the basics of Needle Engine and walk through preparing a scene in Unity and publishing it to Vercel.

Overview of Needle Engine

Needle Engine is a fully featured 3D engine that runs in the browser
(Feature Overview | Needle Engine Documentation)
offering rich 3D experiences on the web. You can integrate it into traditional web workflows (HTML/CSS/JavaScript) while leveraging interactive 3D capabilities. For example, you can embed a responsive 3D scene in a webpage and use React or plain HTML/CSS to control interface elements, enabling interactive web content such as 3D model manipulation or scroll-driven 3D animations.

From the start, Needle Engine is designed with XR (AR/VR) in mind, using the WebXR Device API to support VR headsets and AR-enabled browsers. With a single codebase, you can deliver AR experiences on mobile or immersive VR experiences on headsets.

Developing with Needle Engine and Unity

In Unity, developers build scenes by attaching scripts (components) to objects. With Needle Engine, these scripts are written in TypeScript/JavaScript. In the Unity Editor, each script appears as a placeholder C# component; at runtime on the web, the TypeScript components run natively within the Needle Engine’s component system. The workflow also supports hot reload and Editor Sync, meaning you can see your scene updates in the browser almost instantly (usually within a second) when editing in Unity.

Hosting the Sandbox Scene on Vercel

Next, let’s look at the process of publishing the default Sandbox scene from Needle Engine to a personal Vercel site. Needle Engine provides ready-made components for Glitch, itch.io, GitHub Pages, etc. Here, we’ll focus on a more high-performance deployment on Vercel.

Prerequisites

You’ll need a (free) Vercel account.
A supported Unity version: Unity 2021.3 LTS or 2022.3 LTS, Unity 6.
A Node.js environment is required. Needle Engine recommends Node.js 20 LTS or 22 LTS. (For installation instructions, see, for example, this reference in Japanese.)

1. Setting Up Needle Engine

Let’s install Needle Engine in our Unity project and open the Sandbox scene.

Render Pipeline

Universal Render Pipeline (URP) and Built-In Render Pipeline (BiRP) are supported. If you’re creating a new project, choose either the “Universal 3D” or “3D (Built-In Render Pipeline)” template in Unity.

Installing the Needle Engine Package

Go to the Needle Engine official site and download the Unity .unitypackage. Then, import it into your existing Unity project by either double-clicking the file or dragging it into the Project window.

During import, necessary files will be added automatically. If you see a notification like "A new scoped registry...", you can safely click “Close”.

When it finishes importing, you’ll see a welcome message. Click Create New Scene With Template and save it.

This will open the Sandbox scene (you can also manually create it via File > New Scene, then pick a Needle template). Notice that Networking and XR are already in the Hierarchy, indicating that multiplayer and XR features are included by default.

Needle Engine Project Settings

Select Export in the Hierarchy, and then look at Needle Engine (Project & Export) in the Inspector.

Usually, the defaults are fine, but set the Project Folder if needed. Also, leaving Template as Vite is recommended until you’re comfortable with Needle.

Next, open the Project Validation window. You might see a warning like "Needle Engine EULA needs to be accepted before you can start using Needle Engine." Click "Open EULA Window", check all the boxes in the popup, then click I agree to EULA.

Now click Generate Project. Unity will install necessary Node modules and other components, generating the project. After that, it should automatically launch a local server on your machine and open the Sandbox scene in a browser.

If your browser doesn’t open automatically, check the Terminal window: you should see something like:

You’ll see Vite running on https://localhost:3000. If you navigate to https://localhost:3000 manually, your browser might warn you about an untrusted certificate (e.g., “Your connection is not private”). Select Advanced -> Proceed to localhost (the specific wording varies by browser) to proceed. You should see the Sandbox scene:

Back in Unity, you might see a note under Needle Editor Sync:
"@needle-tools/editor-sync package is not installed - click the button below to add it to your web project".

Click Install Editor Sync Package. Your Terminal will install it and restart the Vite server:

Editor Sync is experimental and only works in Chrome, but it’s handy since changes made in the Unity Scene window (even without saving the scene file) will quickly appear in the browser.

2. Deploying to Vercel

Now let’s deploy the project to Vercel. Typically, you’d push your code to a GitHub repository and configure Vercel to build and deploy, but in the default Needle Engine setup, certain local dependencies aren’t included in version control, causing potential deployment issues. Hence, we’ll do the following steps:

Navigate to your project’s root directory in a terminal.
Run these commands (adjusting as needed):

   nvm use stable
   npm install vite
   npx vite --host

If nvm use stable doesn’t work, try:

   nvm install 22
   nvm use 22

Afterward, npx vite --host should serve the scene at https://localhost:3000.

Create a Vercel account if you haven’t already.
Install the Vercel CLI to deploy from your local environment:

   npm install -g vercel

Log in and set up your Vercel project:

   vercel login
   vercel

Set up and deploy? -> yes
Which scope should contain your project? -> press Enter
Link to existing project? -> N (No) (we’ll create a new project)
Which directory is your code located in? -> default ./

Vercel will detect your Vite settings:

 Auto-detected Project Settings (Vite):
 - Build Command: vite build
 - Development Command: vite --port $PORT
 - Install Command: (npm install, yarn install, etc.)
 - Output Directory: dist

When asked "Want to modify these settings?", choose no. The deployment will start.

 🔗 Linked to ***projects/*** (created .vercel and added it to .gitignore)
 🔍 Inspect: https://vercel.com/***projects/***/*** [4s]
 ✅  Production: https://***-projects.vercel.app [4s]
 📝 Deployed to production. Run `vercel --prod` to overwrite later.

That’s it! Open the Production URL shown in your terminal to see your deployed scene.

You’ll notice the URL has room=... in it. By sharing this URL with others, you can easily have multiple players sharing the same space. However, if your Vercel project defaults to private, viewers who are not logged into your Vercel account may not see the page. In that case, go to your Vercel Dashboard, open Settings -> Deployment Protection, and toggle off Vercel Authentication for that project.

“Open on Quest” indicates VR support.

Updating the Project

Whenever you make changes to your project, simply run:

vercel --prod

to create a new production deployment. Note that the production URL may change with each deploy. If you’d like a stable URL, run:

vercel inspect <your-production-url>

You’ll see something like:

  General

    id      dpl_B+**************3
    name    u+*******3
    target  production
    status  ● Ready
    url     https://*****-projects.vercel.app
    created Tue Feb 11 2025 23:29:24 GMT+0900 (Japan Standard Time) [7m ago]


  Aliases

    ─ https://******3.vercel.app
    ─ https://*******3-*****projects.vercel.app
    ─ https://*****3-*****-projects.vercel.app

Among the Aliases, the top-level domain (without random strings) always points to the most recent deployment. You can share that link with others.

Conclusion

One major advantage of Needle Engine is the ability to build lightweight VR apps for the browser. While the workflow differs from traditional engines like Unity or Unreal, hopefully this guide helps you get started with multiplayer WebXR content. Happy creating!

Adding Google Login with Firebase to a Next.js App Hosted on Vercel (Using next-firebase-auth-edge)

Kojiro Yanoᯅ/VR Educator — Mon, 10 Feb 2025 23:04:33 +0000

Disclaimer

This is an English translation of my original Japanese post on Qiita (https://qiita.com/yanosen_jp/items/848206a306f52c7e3f94). Therefore some of the screenshots are in Japanese, but shouldn't be too difficult to guess what they mean. Hope this helps!

Introduction

I started studying Next.js to build a class-related app and host it on Vercel after trying out an AI app generator tool (v0). In the past, I built apps with a Google Account login feature using Google Apps Script. This time, I wanted to recreate that login feature using Next.js + Firebase.

However, for a beginner like me, the configuration turned out to be far more complex than I expected, so I decided to take notes. By the way, ChatGPT o1 pro and other AI tools were almost no help in solving these specific issues. I gathered most of the information from traditional blogs and forum posts, and I'm sharing my findings here.

Because I'm still a complete beginner, I apologize if there are misunderstandings or mistakes. Feel free to point them out in the comments so I can correct them.

Starting Point

Since I'm a beginner and AI wasn't very helpful here, I'm going to use a base project.

next-firebase-auth-edge is a package for handling Firebase Authentication in Next.js. Inside its Examples/next-typescript-starter directory, there's a sample project we'll use. It already includes a login screen and functionality like in the screenshot below:

Preparing the Vercel Project

We'll assume you already have access to Vercel, GitHub, Google Cloud, and Firebase. My local environment is macOS.

Go to the GitHub Releases page of next-firebase-auth-edge and download the latest release. At the time of writing, it was v1.8.2.
Unzip the downloaded file (I left the folder name as next-firebase-auth-edge-1.8.2).
Push that folder to your own GitHub repository.
In Vercel, create a new project and connect it to that repo.
For the “Root Directory,” be sure to select next-typescript-starter (not the whole repository). We only need that folder.

Once you've set the Root Directory, go ahead and Deploy. It should deploy without errors, although it won’t work yet because nothing is configured.

When the deployment finishes, check the Deployment Details to find the Production Domain (the one that doesn’t change with each deploy). Make a note of it. For example, I had something like:

vercel-tests....vercel.app

Setting Up a Firebase Web App

Next, create a Web App in Firebase. We won’t be hosting on Firebase in this tutorial, but we still need the basic app configuration.

In the Firebase console, create a new project.
Click “Add app” and select the Web option.
Skip Firebase Hosting if you want; it’s not strictly required here.
When you see the Firebase SDK setup, copy the firebaseConfig details somewhere safe. We’ll need them soon.

Back in your terminal, navigate into the next-typescript-starter folder and run:

yarn install

(npm install might cause errors in this particular project.)

Then install the Firebase CLI globally:

npm install -g firebase-tools
firebase login
firebase use your-firebase-project-id

After logging in, run:

firebase init

Choose “Hosting” during the setup process.

This will create a firebase.json file in your project. Edit it to the following minimal configuration:

{
  "hosting": {
    "public": "public"
  }
}

Then deploy your empty hosting setup:

firebase deploy --only hosting

If everything goes well, you’ll see a success message:

At this point, a file named init.json should be generated automatically. You can verify by visiting:

https://(your-project-id).firebaseapp.com/__/firebase/init.json

If successful, it will display a JSON object for your project:

Now, return to the Firebase console.

Setting Up Firebase Authentication

Back in the Firebase console, go to Build → Authentication and click Get started.

Enable Google as a sign-in provider:

Turn the toggle to Enable and configure it as needed. Save the changes.

Next, in the Authentication → Settings → Authorized Domains section, add the domain for your Vercel app.

Then, click the gear icon in the top-left of the Firebase console, select Project settings, and open the Service accounts tab to view the Firebase Admin SDK details.

Generate a new private key. This file will contain sensitive info (like private_key), so keep it secure.

Although it’s not strictly necessary for just logging in, the sample project also uses Firestore. Under Build → Firestore Database, create a database. Once it’s created, go to Rules and update them to something permissive if you want to test reads and writes easily (e.g., allow read/write for authenticated users).

Configuring the Next.js Project

In your code editor (e.g., VS Code), go to the folder for your Vercel project and find *.env.dist. Duplicate it and rename it to *.env.local:

In .env.local, fill in the details collected from Firebase and Vercel:

FIREBASE_API_KEY=AIza*********
FIREBASE_PROJECT_ID=qii****
FIREBASE_ADMIN_CLIENT_EMAIL=firebase-adminsdk-*****@******.iam.gserviceaccount.com
FIREBASE_ADMIN_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhk********uSfqy/esU8C/4yvskY=\n-----END PRIVATE KEY-----\n"

NEXT_PUBLIC_FIREBASE_API_KEY=AIzaS***********
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=vercel-tests-******.vercel.app
NEXT_PUBLIC_FIREBASE_PROJECT_ID=qii*****
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=79************
NEXT_PUBLIC_ORIGIN=https://vercel-tests-*********.vercel.app

USE_SECURE_COOKIES=false

COOKIE_SECRET_CURRENT=6Lch49AqAAAAAB************
COOKIE_SECRET_PREVIOUS=6GVAHILed0yfoJGogCgkZ*********

Things to note:

FIREBASE_ADMIN_PRIVATE_KEY must be wrapped in quotes.
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN should be the domain of your Vercel app (no https prefix).
NEXT_PUBLIC_ORIGIN should include the https prefix of your Vercel app.
COOKIE_SECRET_CURRENT and COOKIE_SECRET_PREVIOUS can be any string, but don’t leave them blank.

Now, we also need to add these environment variables to our Vercel project. In your Vercel dashboard, go to Settings → Environment Variables, click Add Another, then Import .env. Upload your .env.local.

Because the Vercel app is served via HTTPS by default, set USE_SECURE_COOKIES=true in Vercel’s environment variables.
If your private key’s format breaks (missing quotes or line breaks), manually edit it in Vercel’s dashboard.

Once everything is set, push your local changes to GitHub so Vercel deploys again. After it finishes, open the Production Domain. This time, the page should render properly:

However, if you try Log in with Google, you’ll get this error:

This Error 400: redirect_uri_mismatch happens because we changed the domain to Vercel’s in our environment variables, but Google Cloud isn’t aware of this yet.

Setting Up Google Cloud

In the Google Cloud console, select the same project you used for Firebase. Go to APIs & Services → Credentials → OAuth 2.0 Client IDs, then click the Web Client entry:

You’ll see fields for Authorized JavaScript origins and Authorized redirect URIs. Enter:

Authorized JavaScript origins: The base URL of your Vercel app (e.g., https://vercel-tests-******.vercel.app)
Authorized redirect URIs: The same domain plus **/auth/handler** (e.g., https://vercel-tests-******.vercel.app/auth/handler)

Then save.

Once done, try logging in again with Log in with Google (Redirect). If all configurations are correct, after you select your Google account, you should see the login success screen:

On the Profile page, the Update counter button will increment a value in Firestore’s user-counters collection (the collection gets created automatically if it doesn’t exist):

Conclusion

It would be great if AI tools could provide clear step-by-step instructions for things like this. However, when the AI lacks the right context or knowledge, it often gives endless irrelevant suggestions, causing a huge time sink. Sometimes it’s faster to search through human-written blog posts or forums when you’re stuck. Hopefully, this guide helps you set up your own Next.js + Firebase + Google Sign-In app on Vercel!

DEV Community: Kojiro Yanoᯅ/VR Educator

Generating Consistent 3D Models from a ChatGPT image.

Introduction

Step 1: Generating the Original Illustration in ChatGPT

Step 2: Splitting the Parts into Individual Images

Step 3: Installing the Local Image-to-Mesh Library with pinokio

Step 4: Batch-Converting Images into 3D Models

4.1 Activating the Virtual Environment

4.2 Running the Local Server

4.3 Testing with a Single Image

4.4 Batch Conversion for Multiple Images

Conclusion

How to Use LlamaIndex.TS on Vercel

Disclaimer

Introduction

Key Resources

Basic Setup

TypeScript Configuration

Switching to next.config.mjs

Example: Using the OpenAI Chat Model

1. Helper Module

2. Backend API Endpoint

3. Frontend UI Component

4. Environment Variables

5. Test Locally and Deploy

Example: Using the Vercel AI SDK

1. Install the SDK

2. Create the API Route

3. Frontend with useCompletion

Wrapping Up

Self-Hosting a Multiplayer WebXR App with Needle Engine on Vercel

Disclaimer

Introduction

Overview of Needle Engine

Developing with Needle Engine and Unity

Hosting the Sandbox Scene on Vercel

Prerequisites

1. Setting Up Needle Engine

2. Deploying to Vercel

Updating the Project

Conclusion

Adding Google Login with Firebase to a Next.js App Hosted on Vercel (Using next-firebase-auth-edge)

Disclaimer

Introduction

Starting Point

Preparing the Vercel Project

Setting Up a Firebase Web App

Setting Up Firebase Authentication

Configuring the Next.js Project

Setting Up Google Cloud

Conclusion

Switching to `next.config.mjs`

3. Frontend with `useCompletion`