@spaceandtimelabs/makeinfinite-ui

MakeInfinite UI

A React-based front-end for the MakeInfinite service, enabling non-technical users to develop miniapps through chat-based interactions with LLMs.

Features

Chat-Based Development

• Interactive chat interface for communicating with LLMs
• Real-time component development and modification
• Git-based project management using isomorphic-git

Image Gallery

The Image Gallery feature allows users to easily reference images in their chat messages when discussing component modifications.

Using Images in Chat

• Click the "Images" button next to the chat input
• Browse available images in your project
• Click an image to insert its path into your message
• Continue editing your message or send it

Project Image Management

Images should be placed in the your-project/src/assets/images/ directory of your project:

your-project/
  ├── src/
  │   ├── assets/
  │   │   ├── images/
  │   │   │   ├── image1.jpg
  │   │   │   ├── image2.png
  │   │   │   └── ...
  │   └── ...
  └── ...

Supported Image Formats

• JPEG/JPG
• PNG
• GIF
• WebP

First-Time Setup

• If no images directory exists, the gallery will prompt you to create one
• Once created, you can add images to the directory
• Images will automatically appear in the gallery

Development Setup

This project uses Vite with React and TypeScript.

Getting Started

• Install dependencies:

npm install
# or
yarn install

• Start the development server:

npm run dev
# or
yarn dev

Project Structure

makeinfinite-ui/
  ├── lib/
  │   ├── components/
  │   │   ├── ImageGallery/
  │   │   ├── PlaceholderChatbot/
  │   │   └── ...
  │   ├── filesystem.ts
  │   └── ...
  ├── src/
  └── ...

ESLint Configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

Configure the top-level parserOptions property:

export default tseslint.config({
  languageOptions: {
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});

For React-specific linting:

// eslint.config.js
import react from "eslint-plugin-react";

export default tseslint.config({
  settings: { react: { version: "18.3" } },
  plugins: {
    react,
  },
  rules: {
    ...react.configs.recommended.rules,
    ...react.configs["jsx-runtime"].rules,
  },
});

Testing

Run the test suite:

npm test
# or
yarn test

Test Coverage

The project includes comprehensive tests for all components, including:

• Unit tests for components
• Integration tests for features
• Mock filesystem operations
• Error handling scenarios

Contributing

• Fork the repository
• Create your feature branch
• Write tests for your changes
• Ensure all tests pass
• Submit a pull request

Project Architecture

Key Components

ImageGallery

• Displays project images in a modal gallery
• Handles image selection and insertion into chat
• Manages directory creation and file loading
• Provides error handling and recovery options

PlaceholderChatbot

• Manages chat interface and message history
• Integrates with image gallery for image references
• Handles real-time communication with backend

File System Integration

The project uses isomorphic-git for managing local repositories:

• Files are stored in the browser's filesystem
• Changes are synchronized with remote repositories
• Image files are loaded and displayed from local storage

License

This project is licensed under the terms specified in the LICENSE file.