KBCoder: AI Code Generation Platform (agent-frontend)

This repository contains the frontend application built with Vue 3, TypeScript, and Ant Design Vue. The frontend works together with a Java Spring Boot backend to provide a conversation-driven NoCode experience for generating websites. Key capabilities include interactive AI chat for code generation, real-time preview, and one-click deployment.

The full-stack web application is deployed here.

Key features:

• Conversation-driven website generation (AI chat)
• Server-Sent Events (SSE) streaming to receive incremental AI-generated content
• Real-time preview of generated sites via the backend static resource endpoint and support for deployment workflows

Code Structure / Important Directories

Main frontend code lives under agent-frontend/:

• src/main.ts — application entry: registers Pinia, router, and Ant Design Vue
• src/pages/ — route pages (Home, App chat/edit pages, admin pages, user pages)
• src/layouts/BasicLayout.vue — top-level layout (header / content / footer)
• src/components/ — reusable components (ChatBox, AppCard, GlobalHeader/Footer, etc.)
• src/api/ — OpenAPI-generated API client (matches backend controllers)
• src/global/request.ts — axios wrapper and interceptors (auth / error handling)
• src/global/access.ts — global route guard and access control (runs on every route change)
• src/stores/loginUser.ts — Pinia store for login/user state (fetchLoginUser)
• src/utils/chatSse.ts — SSE parsing and helper for streaming AI responses
• src/utils/iframeEditor.ts — iframe preview / editor utilities used for live preview

Implementation notes and conventions:

• Uses Vue Composition API (<script setup lang="ts">) with TypeScript types
• API client is generated from OpenAPI with npm run openapi2ts and placed in src/api/
• Backend authentication is cookie-based; many requests use withCredentials: true
• SSE streams are parsed manually (handling data: prefixes and end markers like [DONE])

Key Workflows

1. Authentication and route control

   • src/global/access.ts runs on each route change and attempts to fetch the current user from the backend when needed.
   • src/global/request.ts handles backend error codes (e.g. a custom 40100 NOT_LOGIN error) and redirects to login when necessary.

2. Chat-driven generation and SSE

   • Pages such as AppChatPage.vue send generation requests to the backend. The backend streams incremental content via SSE.
   • src/utils/chatSse.ts buffers and parses data: lines and exposes partial results to the UI as they arrive.

3. Preview and deployment

   • After generation, the backend exposes the generated static site under a predictable path; the frontend can preview it at /api/static/{codeGenType}_{appId}/.
   • The backend also provides deployment endpoints that return production URLs once deployment completes.