/ipad-Xai-IDE

IDE for Ipad, using XAI API and Grok4

Primary LanguageTypeScript

iPad IDE - A Professional Code Editor for iPad

GyS_R1oa8AA9Zmr

A VSCode-inspired IDE built with React Native Expo, designed specifically for iPad with Apple Pencil support and AI-powered coding assistance.

Features

🎨 VSCode-Like Interface

  • Dark theme matching popular editors like Cursor and VSCode
  • Professional syntax highlighting
  • Line numbers and status bar
  • File tabs with dirty state indicators

📁 File Management

  • File Explorer with folder tree navigation
  • Create, rename, and delete files/folders
  • Persistent storage using AsyncStorage
  • Visual file type indicators

✏️ Apple Pencil Support

  • Built-in drawing canvas for sketches and diagrams
  • Multiple colors and brush sizes
  • Drawings saved as code comments
  • Perfect for wireframing and visual notes

🤖 AI Assistant

  • Powered by XAI's grok-4-0709 model
  • Context-aware code suggestions
  • One-click code insertion
  • Chat interface for coding questions
  • Formatted code blocks with syntax highlighting

📐 Adjustable Layout

  • Resizable sidebars (drag to adjust)
  • Left sidebar: File explorer
  • Right sidebar: AI assistant
  • Responsive design optimized for iPad

Installation

Prerequisites

  • Node.js (v16 or higher)
  • npm or yarn
  • Expo CLI
  • iOS Simulator or physical iPad with Expo Go app

Setup

  1. Navigate to the project directory:
cd /Users/minibrain/Desktop/ipad-IDE/ipad-ide
  1. Install dependencies (if not already installed):
npm install
  1. Start the development server:
npm start
  1. Run on iPad:
    • Physical iPad: Install Expo Go from App Store and scan the QR code
    • iOS Simulator: Press i in the terminal

Configuration

XAI API Key

To use the AI assistant features:

  1. Get an API key from x.ai
  2. Enter the key when prompted in the AI Assistant panel
  3. The key will be stored securely for future sessions

Usage

File Operations

  • Create File/Folder: Click the icons in the explorer header
  • Rename: Long press on file/folder and select rename
  • Delete: Long press on file/folder and select delete
  • Open: Tap any file to open in editor

Code Editor

  • Edit code with syntax highlighting
  • Save files with the save icon or Cmd+S
  • Access drawing canvas with brush icon
  • View file path in breadcrumb

AI Assistant

  • Type questions in the input field
  • Current file context is automatically included
  • Click "Insert" on code suggestions to add to editor
  • Clear chat history with trash icon

Drawing Canvas

  • Access from editor toolbar (brush icon)
  • Select colors and brush sizes
  • Undo/clear drawings
  • Save drawings as code comments

Project Structure

ipad-ide/
├── App.tsx                 # Main application component
├── src/
│   ├── components/
│   │   ├── FileExplorer.tsx    # File tree navigation
│   │   ├── CodeEditor.tsx      # Main editor component
│   │   ├── AIAssistant.tsx     # AI chat interface
│   │   └── DrawingCanvas.tsx   # Apple Pencil drawing
│   ├── services/
│   │   ├── fileService.ts      # File management logic
│   │   └── xaiService.ts       # XAI API integration
│   ├── theme/
│   │   └── colors.ts           # Dark theme colors
│   └── types/
│       └── index.ts            # TypeScript definitions
└── package.json

Technologies Used

  • React Native - Cross-platform mobile framework
  • Expo - Development platform and tooling
  • TypeScript - Type-safe JavaScript
  • React Native Gesture Handler - Touch and gesture support
  • React Native SVG - Drawing canvas implementation
  • AsyncStorage - Persistent file storage
  • XAI API - AI-powered code assistance

Keyboard Shortcuts

  • Cmd + S - Save current file
  • Cmd + N - New file (coming soon)
  • Cmd + O - Open file (coming soon)

Performance Optimization

  • Virtualized file lists for large directories
  • Debounced auto-save
  • Efficient re-rendering with React.memo
  • Lazy loading of file contents

Known Limitations

  • Files are stored locally in AsyncStorage (not synced to cloud)
  • Limited to text-based files
  • Drawing canvas saves as JSON (not actual images)
  • XAI API requires internet connection

Future Enhancements

  • Cloud sync with iCloud/Dropbox
  • Git integration
  • Multiple file tabs
  • Code formatting and linting
  • Terminal emulator
  • Plugin system
  • Collaborative editing
  • Export drawings as images

Contributing

Contributions are welcome! Please feel free to submit pull requests or open issues for bugs and feature requests.

License

MIT License - see LICENSE file for details

Acknowledgments

  • Inspired by Visual Studio Code and Cursor IDE
  • Built with Expo and React Native
  • AI powered by XAI (x.ai)

Support

For issues, questions, or suggestions, please open an issue on GitHub.

Built with ❤️ for iPad developers