subjeto – Monaco Editor, Chat Interface, and WebContainer Integration

An interactive web application showcasing an in-browser Monaco Editor, a chat interface, and a fully containerized Next.js environment powered by WebContainer. This repo combines code-editing, real-time preview, and AI-driven chat within a single platform.

Note: This repository is open-source under the MIT License. Feel free to explore, fork, and contribute!

---

Table of Contents

• subjeto – Monaco Editor, Chat Interface, and WebContainer Integration
  • Table of Contents
  • Overview
  • Key Features
  • Tech Stack
  • Project Structure
    • Notable Files
      • EventBusProvider.tsx
      • CodeEditor.tsx
• How It Works
  • Monaco Editor
  • WebContainer Integration
  • Chat Interface
    • Contributing
  • License

---

Overview

subjeto is an experimental application that demonstrates how to:

1. Embed a Monaco Editor in a React/Next.js project for real-time code editing.
2. Integrate a WebContainer from StackBlitz’s @webcontainer/api to run a Next.js dev server directly in the browser.
3. Provide an AI-powered chat interface (or “assistant”) to interact with and manage your code, including reading and writing files, automatically refreshing previews, and more.

This project aims to inspire developers to build fully in-browser coding environments—featuring a file explorer, console, and integrated chat. All in one place!

---

Key Features

• Monaco Editor Integration
  Real-time code editing with syntax highlighting and TypeScript intellisense.

• Browser-Based Next.js (WebContainer)
  Boot and run a Next.js dev server entirely in the browser—no local Node.js environment needed.

• Live Preview
  Auto-refresh the rendered application in an <iframe> every time you modify code.

• Chat Assistant
  An AI-driven chat interface that can respond, give tips, or help with code. (Note: The AI integration can be replaced with your own API of choice.)

• EventBus
  A lightweight internal event system to coordinate file changes, console updates, and UI refreshes.

• Console & Logs
  Capture and display logs generated by the WebContainer environment in a local console panel.

---

Tech Stack

• Next.js 13+ – App Router, serverless routes, and React features.
• React & TypeScript
• Monaco Editor – Microsoft’s VS Code editor component.
• Tailwind CSS – Utility-first styling.
• @webcontainer/api – WebContainer for running Node.js in-browser.
• React Window – Efficient list/virtualization for console logs.
• Optional: Nhost for GitHub authentication, though you can remove or replace this for your own auth flow.

---

Project Structure

Below is a simplified view of the code layout:

.
├─ app/
│  ├─ page.tsx                  # Root page that uses CodeEditor
│  ├─ layout.tsx                # Next.js root layout
│  ├─ providers/
│  │  ├─ WebContainerProvider.tsx  # Manages the WebContainer instance
│  │  └─ EventBusProvider.tsx      # Simple event system
├─ components/
│  ├─ CodeEditor/
│  │  ├─ components/
│  │  │  ├─ file-explorer.tsx   # Recursive file explorer
│  │  │  ├─ console.tsx         # In-browser console logs
│  │  │  ├─ Preview.tsx         # Iframe preview popup
│  │  │  └─ monaco/
│  │  │     └─ MonacoEditor.tsx # React Monaco Editor wrapper
│  │  ├─ CodeEditor.tsx         # Primary editor UI (tabs, bottom panel, chat)
├─ public/
│  └─ favicon.ico
├─ README.md                    # This file
├─ package.json
├─ tailwind.config.js
├─ tsconfig.json
└─ ...

Notable Files

• WebContainerProvider.tsx Handles booting a single shared WebContainer instance, mounting files, running npm install, etc.

EventBusProvider.tsx

Provides a minimal event bus for listening to and emitting fileModified events, among others.

CodeEditor.tsx

Main UI that brings together:

• File Explorer
• Monaco Editor (multiple tabs)
• Chat Drawer
• Console & live preview

How It Works

Monaco Editor

• Each opened file is displayed in the Monaco Editor with syntax highlighting.
• On every keystroke, the updated code is saved in local state.
• When you save or switch files, changes are written back to the in-memory WebContainer’s filesystem.

WebContainer Integration

• Upon loading, WebContainerProvider boots a single container.
• It installs dependencies (npm install) if not already installed.
• A Next.js dev server is then started inside the container (npm run dev).
• Logs from the container’s stdio are piped to our custom Console component in real-time.
• A preview URL is exposed to the <iframe> in the Preview component, so you can see your changes live, all in the browser.

Chat Interface

• A “drawer” slides out with an AI-driven chat.
• You can send prompts or instructions to the assistant (e.g., “Refactor file X”, or “Explain how to fix this error”).
• The chat can respond or even manipulate files if you wire it up to the same filesystem operations.
• Currently, a simple mock AI response is included by default—replace it with your own LLM endpoint or specialized logic as needed.

Contributing

Contributions are welcome! Here’s how you can get involved:

1. Fork the repository and create a new branch.
2. Make changes or add features (e.g., improving the chat interface or adding new file types).
3. Open a Pull Request (PR) with a clear description.

Feel free to suggest improvements to the Monaco configuration, new chat commands, or better file navigation. Let us know if you build something cool on top of subjeto!

License

Licensed under the MIT License.