**GenLayer** is the intelligence layer of the blockchain world — it lets you write **Intelligent Contracts** in Python that can reason with AI (LLMs), connect to the internet natively, and reach consensus via Optimistic Democracy. No oracles needed!
This guide walks you through setting up a full project (contract + Vue frontend), deploying to **Studionet**, and hosting it live on Vercel — perfect for beginners or GenLayer builders in 2026.
### Prerequisites (Install These First)
- **Docker** (for local blockchain simulation if needed)
- **WSL** (recommended on Windows for smooth Docker experience)
- **VS Code** (best editor for this workflow)
- **Rabby Wallet** extension (for future interactions — optional now)
- **Node.js** v18+ & npm
- **Python** v3.10+
We will deploy everything to **Studionet** (GenLayer’s shared dev environment — no heavy local setup required for deployment).
### Step 1: Install GenLayer CLI & Create Project
Open your terminal (in WSL if on Windows).
Install the GenLayer CLI globally:
```bash
npm install -g genlayer
```
Create and enter your project folder:
```bash
mkdir my-genlayer-app
cd my-genlayer-app
```
Create folders for contracts and frontend:
```bash
mkdir contracts frontend
```
*(Image: Terminal showing project folder creation and structure)*
### Step 2: Initialize & Start GenLayer (Optional for Studionet)
For local testing you can run:
```bash
genlayer init
```
During init, select an LLM provider. We recommend **Heurist AI**:
- Visit https://dev-api-form.heurist.ai/
- Use referral code: **genlayer** to get free API credits
- Provide your Heurist API key when prompted
If Docker issues appear, try:
```bash
docker pull postgres:17-alpine
```
Then start the local chain (only if testing locally):
```bash
genlayer up
```
For Studionet deployment, you can skip heavy local init and go straight to deployment.
### Step 3: Write & Deploy Your Intelligent Contract
Intelligent Contracts are written in **Python** using GenLayer’s SDK.
1. Open the project in VS Code:
```bash
code .
```
*(Image: VS Code opening the project folder with contracts directory visible)*
2. Right-click **contracts** folder → New File → Name it e.g. `my_contract.py`
3. Paste/write your contract code. (Tip: Read official docs at https://docs.genlayer.com/ or ask an AI like Grok/Claude to generate one for your idea — e.g. prediction market, content moderator, etc.)
Example minimal structure:
```python
my_contract.py
from genlayer import Contract, gl
class MyContract(Contract):
def _init_(self):
super()._init_()
@gl.public
def greet(self, name: str) → str:
return f”Hello {name}, welcome to GenLayer!”
```
4. Set network to Studionet:
```bash
genlayer network set studionet
```
5. Create a deployer account:
```bash
genlayer account create — name studio-deployer
genlayer account use studio-deployer
```
Set a password (encryption key) when prompted.
6. Deploy:
```bash
genlayer deploy — contract contracts/my_contract.py
```
Enter your password. **Copy the contract address** (starts with 0x…) — you’ll need it soon!
### Step 4: Build the Vue Frontend
1. From project root, create Vue app:
```bash
npm create vite@latest frontend — — template vue-ts
cd frontend
npm install
```
2. Install GenLayer JS SDK:
```bash
npm install genlayer-js
```
3. Create `.env` in `/frontend`:
```
VITE_CONTRACT_ADDRESS=0xYourDeployedContractAddressHere
```
Replace with your copied address.
4. Edit `src/App.vue` — add your UI + logic to interact with the contract (use GenLayerJS to call functions).
Clear `src/style.css` if you want custom styling.
*(Image: Example App.vue code editing in VS Code with GenLayer interaction)*
5. Run locally:
```bash
npm run dev
```
Open http://localhost:5173/ — test everything!
*(Image: Browser showing localhost dev server running the dApp)*
### Step 5: Push to GitHub
1. In project root (not frontend):
Create `.gitignore`:
```
node_modules
.env
dist
_pycache_
```
2. Git setup:
```bash
git init
git add .
git commit -m “Initial GenLayer dApp commit”
```
3. Create repo on GitHub (no README/.gitignore/license auto-add).
Then:
```bash
git remote add origin https://github.com/YOUR_USERNAME/your-repo.git
git branch -M main
git push -u origin main
```
Use GitHub **Personal Access Token** (classic, repo scope, no expiration) as password.
### Step 6: Deploy Frontend to Vercel
1. Go to https://vercel.com → Sign in with GitHub.
2. Add New → Project → Import your repo.
3. Edit **Root Directory** → set to `frontend`
4. Add Environment Variable:
- Key: `VITE_CONTRACT_ADDRESS`
— Value: your contract address
5. Deploy!
After deploy, go to project Settings → Deployment Protection → Turn off Vercel Authentication to make it public.
Share the live URL with friends!
*(Image: Vercel dashboard showing successful deployment and live preview)*
### Final Tips
- Official GenLayer Docs: https://docs.genlayer.com/
- For contract ideas: Check https://docs.genlayer.com/developers/intelligent-contracts/ideas
- Stuck? Use AI (feed docs + describe your app idea).