frontend/scripts/17_backend_api_integration.sh

#!/usr/bin/env bash
set -euo pipefail

echo "[1/9] Creating API directories..."

mkdir -p services
mkdir -p hooks
mkdir -p context
mkdir -p lib

echo "[2/9] Creating environment..."

cat > .env.local <<EOC
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
NEXT_PUBLIC_WS_URL=ws://127.0.0.1:8000
NEXT_PUBLIC_MCP_URL=http://127.0.0.1:8000/api/mcp
NEXT_PUBLIC_BUILD_URL=http://127.0.0.1:8000/api/builds
EOC

echo "[3/9] Installing axios..."

npm install axios

echo "[4/9] Creating API client..."

cat > services/api.js <<'EOC'
import axios from "axios";

const api = axios.create({
    baseURL:
        process.env.NEXT_PUBLIC_API_URL ||
        "http://127.0.0.1:8000",
    timeout:60000,
    headers:{
        "Content-Type":"application/json"
    }
});

api.interceptors.request.use(config=>{
    const token=localStorage.getItem("access_token");
    if(token){
        config.headers.Authorization=`Bearer ${token}`;
    }
    return config;
});

api.interceptors.response.use(
    response=>response,
    error=>{
        console.error(error);
        return Promise.reject(error);
    }
);

export default api;
EOC

echo "[5/9] Creating backend endpoint map..."

cat > services/endpoints.js <<'EOC'
export default {

health:"/health",

chat:"/api/workspace/chat/message",

history:"/api/workspace/chat/history",

session:"/api/workspace/session",

files:"/api/workspace/files",

search:"/api/ide/search",

completion:"/api/ide/completion",

generateProject:"/api/builder/generate/project",

generateComponent:"/api/builder/generate/component",

generateApi:"/api/builder/generate/api",

generateSchema:"/api/builder/generate/schema",

generatePipeline:"/api/builder/generate/pipeline",

buildStart:"/api/builds/start",

mcp:"/api/mcp/jsonrpc"

};
EOC

echo "[6/9] Creating health hook..."

cat > hooks/useBackendHealth.js <<'EOC'
import {useEffect,useState} from "react";
import api from "../services/api";

export default function useBackendHealth(){

const [online,setOnline]=useState(false);

useEffect(()=>{

let active=true;

async function check(){

try{

await api.get("/health");

if(active)setOnline(true);

}catch{

if(active)setOnline(false);

}

}

check();

const timer=setInterval(check,5000);

return()=>{

active=false;

clearInterval(timer);

};

},[]);

return online;

}
EOC

echo "[7/9] Building..."

npm run build >/dev/null

echo "[8/9] Verifying..."

test -f services/api.js
test -f services/endpoints.js
test -f hooks/useBackendHealth.js
test -f .env.local

echo "[9/9] Backend API integration complete."