Previously, I created a guide on how to deploy full dapps on genlayer using AI (claude), I figured…

--

I FOUND THE EASIEST METHOD YOU CAN DEPLOY A FULLY FUNCTIONAL APP UNDER AN HOUR(FRONTEND + SMARTCONTRACT) ON GENLAYER EVEN WITH ZERO PROGRAMMING SKILLS

Press enter or click to view image in full size

Previously, I created a guide on how to deploy full dapps on genlayer using AI (claude), I figured it was quite complex because of the copying and pasting plus we hard a lot of technical things to do. In this article, we will be using google ai studios. WHY? because with google ai studios, you can test your full app in-chat even before deploying it live (meaning that you won’t use VS code as much as you did in the last tutorial).
your prompting here is what will determine the outcome for your project!

You can check my first article I wrote on how to deploy apps on genlayer below
https://medium.com/@Laegend/how-to-build-a-fully-functional-app-on-genlayer-with-zero-programming-skills-55546b96f68a
The fun thing is, with this guide, you can build and deploy web3 apps on any chain!!

MY IDEA

For this guide, I will be building a news site/channel which is fully autonomous handled independently by genlayer ai validators. Our traditional news site/channels are handled 90% of the time by humans which means that propagandas can happened and the environment controlled. With our news channels, the news you will see will be 100% vetted and brought to you by genlayer ai validators making trust more reliable!

Lets get to work!
TOOLS NEEDED

1. Visual Studio code (optional but highly recommended)
2. An account with google ai studio (get it here: https://aistudio.google.com)
3. github account (https://github.com)
4. Vercel account for Live deployment (vercel.com)
5. An Ideal
6. patience

STEP 1:

1. head over to https://aistudio.google.com and click on start building (the white arrow in the picture below)

Press enter or click to view image in full size

Press enter or click to view image in full size

2. before you enter your prompt, head over to docs.genlayer.com, click on copy page and click on download full docs, we will give this doc to the AI which will help guide the AI in delivering the required solution

Press enter or click to view image in full size

3. After the download, go to google ai studio and enter your ideal(prompt) and upload the downloaded genlayer doc, if you also have a sample of the User interface i.e how you want your frontend to look like, upload it to the chat also.

please note that if your app requires users to sign in with their wallets, you have to explicitly tell the ai to do that

4. Sample prompt

Press enter or click to view image in full size

5. The good thing with google AI studio is that you will be given options of your frontend design to choose from your prefered one(Hope Imade the right choice lol)
Select your preferred option so that the AI can continue building your app

Press enter or click to view image in full size

6. After the Ai has completed the site , you will be asked to enter the smartcontract address

to get the smart contract address, click on code located just ontop of the app design, go to contracts, copy the smart contract and deploy it in genlayer studio

Press enter or click to view image in full size

Press enter or click to view image in full size

come back to the chat and fill the required fields (note that the required info my differ from project to project)

Press enter or click to view image in full size

from here you can debugg/tweak your project by chatting with the AI to meet your desired outcome

Taking your project to vs code then to github and finally deploying it to vercel

1. go to code, by your extreme right, you will see a downlaod symbol, click on it, your whole project will install as a zip file, unzip it and open it in vs code where you will test it also

Press enter or click to view image in full size

2. open the code in the vs code and install npm

make sure you have updated your .env file with the needed information (contract address, api keys , chain info etc)

npm install

then run

npm run dev

this will open your built project in your local machine for testing

Press enter or click to view image in full size

3. Once satisfied, upload your project to github with this following steps:

Press enter or click to view image in full size

Step 1: Sign in to GitHub from VS Code

• Open VS Code
• Click the Accounts icon (bottom-left, looks like a person)
• Click Sign in with GitHub
• A browser window opens — log in and authorize VS Code

Step 2: Open Your Project Folder

File → Open Folder → select your project folder

Step 3: Initialize Git

• Click the Source Control icon on the left sidebar (looks like a branch/fork — third or fourth icon down)
• You’ll see a button that says Initialize Repository — click it
• Your files will appear in the panel as untracked changes

Step 4: Stage Your Files

• You’ll see all your files listed under Changes
• Hover over the word “Changes” and click the + icon that appears next to it
• This stages everything at once (same as git add .)

Step 5: Write a Commit Message and Commit

• At the top of the Source Control panel, there’s a text box that says “Message”
• Type something like Initial commit
• Click the ✓ Commit button (or press Ctrl + Enter)

Step 6: Publish to GitHub

• After committing, you’ll see a button that says Publish Branch
• Click it
• VS Code will ask you to name the repository and choose Public or Private
• Select your preference and hit Publish to GitHub

That’s it — VS Code handles creating the repo on GitHub and pushing everything automatically.

Going Forward

Every time you make changes:

1. Go to the Source Control panel
2. Hover over “Changes” → click + to stage
3. Type a commit message → click ✓ Commit
4. Click the Sync Changes button (appears after committing) to push to GitHub

The Sync Changes button is your best friend going forward — it both pulls any remote changes and pushes your local ones in one click.

4. deploy your project to vercel for public use

Step 1: Push Your Project to GitHub First

Vercel deploys from GitHub, so make sure your project is already on GitHub using the steps we just covered.

Step 2: Create a Vercel Account

Press enter or click to view image in full size

dont forget to add your environmental variables when deploying on vercel

• Go to vercel.com
• Click Sign Up → choose Continue with GitHub
• Authorize Vercel to access your GitHub account

Step 3: Import Your Project

• Once logged in, you’ll land on your Vercel dashboard
• Click Add New → Project
• You’ll see a list of your GitHub repositories
• Find your project and click Import

Step 4: Configure Your Project

Vercel is pretty smart — it auto-detects your framework (React, Next.js, plain HTML, etc.) and sets things up for you. You’ll see:

• Framework Preset — verify it matches your project (e.g. Vite, Next.js, Create React App)
• Root Directory — leave as default unless your project is inside a subfolder
• Build Command — usually auto-filled (e.g. npm run build)
• Output Directory — also auto-filled (e.g. dist or build)

For a plain HTML/JS project, just leave everything as is.

Step 5: Deploy

• Click Deploy
• Vercel will build and deploy your project — takes about 30–60 seconds
• You’ll see a live progress log

Step 6: Get Your Live URL

• Once done, Vercel gives you a live URL like: your-project-name.vercel.app
• Click Visit to see your live site

Going Forward (the magic part)

This is where Vercel shines — every time you push to GitHub, Vercel auto-deploys.

So your workflow becomes just:

1. Make changes in VS Code
2. Stage → Commit → Sync (from Source Control panel)
3. Vercel automatically picks it up and redeploys within seconds

my project link if you care to check it out: trust-social.vercel.app

my github: github.com/Laegend14/Trust-Social

That will be all for now, if have any questions, don’t hesitate to reach me on x x.com/lae_gend