A comprehensive web-based development environment for building, testing, and deploying Algorand smart contracts
Before running this project, ensure you have:
- Node.js 18+ installed
- npm or pnpm package manager
- Supabase account for authentication and database
- OpenRouter API key for AI features
- Hugging Face API key for embeddings
AlgoCraft is a unified development platform for the Algorand blockchain ecosystem, providing developers with powerful tools to build, test, and deploy smart contracts without complex local setup.
This project was submitted to the Algorand xGov program and unfortunately did not receive funding. Despite this setback, we continue to develop and improve AlgoCraft to serve the Algorand developer community.
Proposal Link: xGov #3262647286
- PyTeal - Python-based smart contract development
- TealScript - TypeScript-based smart contract development
- PuyaPy - Pythonic smart contracts using AlgoPy
- PuyaTs - TypeScript version of PuyaPy
- Monaco Editor - Full-featured VS Code editor in browser
- Real-time Compilation - Instant feedback via external compiler API
- Multi-tab Editing - Work on multiple files simultaneously
- File Management - Complete CRUD operations on files and directories
- RAG Implementation - Context-aware code assistance
- Template-Specific Knowledge - Framework-specific documentation
- Code Generation - AI-powered suggestions and completions
- Built-in Wallet - Create and manage Algorand wallets
- TestNet/MainNet Support - Deploy to both networks
- Transaction Builder - Visual interface for contract interactions
- Deployment Tools - One-click contract deployment
- Project Management - Save and organize your projects
- GitHub Authentication - Secure login with GitHub OAuth
- Public/Private Projects - Share your work or keep it private
- Contract Loading - Import contracts via base64 encoding
1. Main Site - algocraft.fun
Landing page and project showcase
2. IDE - ide.algocraft.fun
Full-featured development environment with:
- Code editor with syntax highlighting
- Integrated terminal for build output
- AI chat assistant
- Wallet integration
- Artifact management
3. Flow Builder - flow.algocraft.fun
Visual smart contract workflow designer
# Clone the repository
git clone https://github.com/yourusername/algorand-ide.git
cd algorand-ide
# Install dependencies
npm install
# Set up environment variables
cp .env.example .envCreate a .env file with the following variables:
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
# OpenRouter API for AI
NEXT_PUBLIC_OPENROUTER_API_KEY=your_openrouter_api_key
# Hugging Face for embeddings
HF_API_KEY=your_huggingface_api_key
# Compiler API
NEXT_PUBLIC_COMPILER_API_URL=https://compiler.algocraft.funnpm run devOpen http://localhost:3000 in your browser.
Frontend:
- Next.js 14 (App Router)
- React 18
- TypeScript 5
- Tailwind CSS
- shadcn/ui components
Editor & Terminal:
- Monaco Editor (VS Code in browser)
- XTerm.js (Terminal emulator)
Blockchain:
- AlgoSDK (Algorand JavaScript SDK)
- AlgoKit Utils (High-level utilities)
AI & Search:
- OpenRouter API (LLM access)
- Supabase (Vector database for RAG)
- Hugging Face (Embedding generation)
Database & Auth:
- Supabase (PostgreSQL + Auth)
- GitHub OAuth
algorand-ide/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ │ ├── compile/ # Compiler wrapper
│ │ ├── load-contract/ # Contract loading
│ │ └── projects/ # Project CRUD
│ ├── puyats/ # PuyaTs IDE page
│ ├── tealscript/ # TealScript IDE page
│ ├── puyapy/ # PuyaPy IDE page
│ └── pyteal/ # PyTeal IDE page
├── components/ # React components
│ ├── algorand-ide.tsx # Main IDE component
│ ├── code-editor.tsx # Monaco editor wrapper
│ ├── ai-chat.tsx # AI assistant
│ └── ...
├── lib/ # Utility libraries
└── database/ # Database schema
All compilation requests go through the wrapper API at /api/compile:
POST /api/compile
{
"type": "puyapy" | "puyats" | "tealscript" | "pyteal" | "generate-client",
"filename": "contract.algo.ts",
"code": "contract code" | "base64_encoded_code"
}GET /api/load-contract?contract=<base64_encoded_contract>
// Redirects to /puyats?contract=<base64>
POST /api/load-contract
{
"encoded": "base64_encoded_contract"
}- Syntax highlighting for TypeScript and Python
- IntelliSense and auto-completion
- Multi-file editing with tabs
- Unsaved changes indicator
- External compiler API integration
- Real-time compilation feedback
- Artifact management (TEAL, ARC32, etc.)
- Error reporting and debugging
- Create new Algorand wallets
- Import existing wallets via mnemonic
- View balance and transaction history
- TestNet faucet integration
- One-click contract deployment
- Method argument input forms
- Transaction confirmation
- Deployed contract registry
- Context-aware code suggestions
- Framework-specific documentation
- Code generation and debugging help
- Natural language queries
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Algorand Foundation - For the amazing blockchain platform
- AlgoKit Team - For the development tools and utilities
- Algorand Community - For continuous support and feedback
- xGov Program - For the opportunity to propose this project
- Website: algocraft.fun
- IDE: ide.algocraft.fun
- Flow Builder: flow.algocraft.fun
- Issues: GitHub Issues
Built with ❤️ for the Algorand Community
⭐ Star us on GitHub if you find this project useful!