LCD+AI Research Project - Interactive Prototype

An interactive low-code protoype integrated with built-in AI assistant for research project exploring LCD+AI, Metacognition and Human-AI Interaction.

Current Version: v6.0 Key features: Quick prompting guide Built-in AI assitant with prompts wrapping Drag and drop canvas with realtime preview Designed for web app low-code building

Live Demo: [https://interactive-prototype-v6.vercel.app/]

🚀 Quick Start

Option 1: Test on Deployed Version (Recommended)

Prerequisites:

• You need to run Ollama + Llama3 locally with CORS enabled

Step 1: Install Ollama

macOS:

brew install ollama

Windows: Download from ollama.ai/download

Linux:

curl -fsSL https://ollama.ai/install.sh | sh

Step 2: Download Llama3 Model

ollama pull llama3

Step 3: Start Ollama with CORS Enabled

macOS / Linux:

OLLAMA_ORIGINS="*" ollama serve

Windows PowerShell:

$env:OLLAMA_ORIGINS="*"
ollama serve

✅ You should see: Ollama is running on http://127.0.0.1:11434

Step 4: Access the Prototype

Visit: [https://interactive-prototype-v6.vercel.app/]

---

Option 2: Run Locally

Step 1: Clone the Repository

git clone https://github.com/your-username/Interactive-prototype-v1-white.git
cd Interactive-prototype-v1-white

Step 2: Install Dependencies

npm install

Step 3: Install and Start Ollama

Install Ollama:

• macOS: brew install ollama
• Windows: ollama.ai/download
• Linux: curl -fsSL https://ollama.ai/install.sh | sh

Download Model:

ollama pull llama3

Start Ollama:

# macOS/Linux
OLLAMA_ORIGINS="*" ollama serve

# Windows PowerShell
$env:OLLAMA_ORIGINS="*"
ollama serve

Step 4: Start Development Server

npm run dev

Step 5: Open in Browser

Visit: http://localhost:8080

---

📋 System Requirements

• Node.js: 18.x or higher
• Package Manager: npm, yarn, or pnpm
• Ollama: Latest version
• Disk Space: ~5GB (for Llama3 model)
• RAM: 8GB minimum (16GB recommended)

---

⚙️ Configuration

Environment Variables

For local development, create a .env.local file:

# Ollama URL (default)
VITE_OLLAMA_URL=http://localhost:11434

Build for Production

npm run build

The build output will be in the dist/ directory.

---

🔧 Troubleshooting

Issue: "Failed to connect to Ollama"

Check 1: Is Ollama running?

curl http://localhost:11434
# Should return: Ollama is running

Check 2: Is CORS enabled? Make sure you started Ollama with OLLAMA_ORIGINS="*"

Check 3: Is the model downloaded?

ollama list
# Should show: llama3

Issue: "Port already in use"

# macOS/Linux
pkill ollama
OLLAMA_ORIGINS="*" ollama serve

# Windows
Stop-Process -Name ollama -Force
$env:OLLAMA_ORIGINS="*"
ollama serve

Issue: Slow AI responses

• Ensure you have at least 8GB RAM
• Close other applications to free up memory
• Check your CPU usage

---

📚 Documentation

• v6.0 Component Sizing
• Version History
• Full documentation available in /docs directory

---

🎯 Features

• v6.0: Component-specific sizing based on Budibase standards
• v5.9: Removed Quick Templates, AI Chat takes full height
• v5.7: Component library search with instant filtering
• v5.6: Smart context-aware component highlighting
• v5.2: Interactive Prompting Guide
• v4.9: Copy/Paste/Duplicate components
• v4.0: AI interaction logging and response time tracking
• v3.8: Smart vertical stacking with 20px spacing

See version.ts for complete changelog.

---

🛠️ Technology Stack

• Frontend: React 18 + TypeScript + Vite
• UI Library: Tailwind CSS + Radix UI + shadcn/ui
• AI Service: Ollama (Llama3)
• Deployment: Vercel
• Build Tool: Vite 5

---

📖 Usage Guide

For Testing on Deployed Version

1. Start Ollama locally with CORS:

   OLLAMA_ORIGINS="*" ollama serve

2. Visit the deployed site: https://interactive-prototype-v6.vercel.app/

3. Test AI features:

   • Chat with AI about components
   • Ask for component recommendations
   • Get help with UI design tasks

For Local Development

1. Start Ollama:

   OLLAMA_ORIGINS="*" ollama serve

2. Start dev server:

   npm run dev

3. Access locally: http://localhost:8080

---

🤝 Contributing

This is a research prototype. If you encounter issues:

1. Check the Troubleshooting section
2. Review existing issues
3. Create a new issue with details

---

📚 Academic Citation

If you use this work in your research, please cite:

@software{yu2025lcd_ai_prototype,
  author = {Yu, Sihang},
  title = {LCD + AI Research Project Prototype: An Interactive Low-Code Design Tool},
  year = {2025},
  url = {https://github.com/your-username/Interactive-prototype-v1-white},
  note = {Research prototype for exploring LCD+AI and Human-AI Interaction}
}

---

📝 License

MIT License - see the LICENSE file for details.

Copyright (c) 2025 Sihang Yu

This project is developed for research purposes as part of the LCD+AI research project.

---

📧 Contact

For questions or feedback about this research project:

• Author: Sihang Yu
• Email: sihang.yu1@gmail.com
• Project: Exploring LCD+AI, Human-AI Interaction

---

🙏 Acknowledgments

• Built with Budibase component library
• Powered by Ollama and Llama3
• UI components from shadcn/ui
• Licensed under MIT License

---

Current Version: v6.0 - Component-specific sizing based on Budibase standards

Last Updated: October 2025