Build Free AI Web Apps with Dyad & Alibaba's Qwen-3 Coder (Open-Source, No Coding Required!)

Key Concepts:

• Diad: A local, open-source AI app builder.
• Quen 3 Coder: Alibaba's AI model, accessible via Open Router.
• Open Router: A platform providing access to multiple AI models through a single API key.
• Vendor Lock-in: Dependence on a specific vendor's products or services, avoided by using open-source tools and custom API keys.
• AI App Development: Building applications powered by artificial intelligence.
• Full-Stack Applications: Applications encompassing both front-end and back-end development.

Diad: A Free and Open-Source AI Web App Builder

The video introduces Diad, a free and open-source AI web app builder that allows users to create web applications and AI tools without subscription fees. It emphasizes the use of Alibaba's Quen 3 Coder model, accessible through a free API via Open Router.

Diad Overview and Features

Diad is presented as a local AI app builder, emphasizing speed, privacy, and user control. It's compared to platforms like Lovable, V0, and Bolt but runs locally on the user's computer. Key features include:

• Speed and Privacy: Operates locally, ensuring fast performance and data privacy.
• No Vendor Lock-in: Uses user-provided API keys, avoiding dependence on a specific vendor.
• Cross-Platform Compatibility: Runs on Windows and Mac.
• Ease of Use: No login or signup required; fully open-source under the Apache 2.0 license.

Getting Started with Diad

The video guides users to Diad's official website for downloading the software. It highlights Diad's ability to build AI-powered apps without coding, offering a free alternative to platforms like Lovable and Vzero. Diad supports creating unlimited AI apps, including full-stack applications, using any AI model, including free tiers.

Installation and Setup

The video demonstrates the installation process on Windows, advising Mac users to download the corresponding version. Post-installation, the video explains the user interface and the initial setup steps:

1. Node.js Installation: Requires Node.js to be installed.
2. AI Model Setup:
   • Gemini API: Users can input their Gemini API key and select a Gemini model (e.g., Gemini 2.2 Pro, Gemini 2.5 Flash).
   • Custom AI Model: Users can add custom models by specifying the model ID and name.
   • Open Router Integration: The video focuses on using Quen 3 Coder via Open Router.

Configuring Diad Settings

The video details the configuration settings within Diad:

• General Settings:
  • Theme: Options for light, dark, or system default themes.
  • Auto-Update: Option to automatically update the app.
• Workflow Settings:
  • Auto Approve: Automatically approves code changes (default: unchecked for manual approval).
  • Autofix Problems: Automatically fixes TypeScript errors (default: unchecked for manual fixing).
  • Thinking Budget: Controls AI processing power (options: low, medium, high).
• AI Provider Selection:
  • Options include OpenAI, Anthropic, Google, Open Router, and Diad's premium plan.
  • The video selects Open Router for Quen 3 Coder.

Open Router Integration

The video explains Open Router as a platform providing access to numerous AI models via a single API key. Key points about Open Router:

• Access to Models: Offers access to over 400 open-source and closed-source AI models from 60+ providers.
• User Base: Boasts 2.5 million global active users, processing 8.4 trillion tokens monthly.
• Features: Provides one API key for all models, high availability, accurate pricing, and custom data policies.
• API Key Creation: The video demonstrates creating a new API key within Open Router and pasting it into Diad.

Adding and Using Quen 3 Coder

The video guides users on adding Quen 3 Coder as a custom model within Diad:

1. Deleting Existing Model: If needed, the existing Quen 3 Coder model is deleted.
2. Adding Custom Model:
   • The model ID is copied from Open Router's model section.
   • The model name is copied from Open Router.
   • The model ID and name are pasted into Diad's custom model tab.

Creating AI Apps with Diad

The video demonstrates creating AI apps using Diad:

• Apps Tab: Users can start creating apps via the "Build your dream app" option.
• Import App: Option to import existing apps.
• Input Tab:
  • Users enter prompts describing the desired app.
  • Images or files can be attached.
• Build Mode vs. Ask Mode:
  • Build Mode: For creating the app.
  • Ask Mode: For asking questions related to the app.
• AI Model Selection:
  • Diad initially selects a model automatically.
  • Users can manually select models from OpenAI, Anthropic, Google, or Open Router.

Example 1: To-Do List App

The video demonstrates creating a to-do list app:

1. Prompt: "Build me a to-do list app."
2. Template Selection: The user selects the Next.js template.
3. Code Generation: Diad generates the necessary code files.
4. Preview: The app is previewed, showing add and delete features.
5. Functionality: The to-do list app allows adding and deleting tasks.
6. Troubleshooting: The "Problems" tab displays any errors.
7. Code Access: The "Code" section provides full access to code files for editing.
8. Configuration: The "Configuration" tab is used for setting environment variables.
9. Publishing: The "Publish" tab allows deploying the app to GitHub or Vercel.

Example 2: Landing Page for an AI SaaS Business

The video demonstrates creating a landing page:

1. Prompt: "Build a landing page for my AI SaaS business."
2. Code Generation: Diad generates the app using Open Router's AI models.
3. Error Fixing: The "Fix error with AI" feature is used to resolve code issues.
4. Preview and Adjustments:
   • The app is previewed in a new window.
   • A prompt is used to center the content and make it responsive: "Everything is fine, but I want to center my app content and make it responsive on every screen."

Conclusion

The video concludes by highlighting the ease of creating AI web apps and landing pages using Diad and Open Router's free Quen 3 Coder API. It emphasizes the potential for building MVPs and other AI applications. The presenter encourages viewers to share their thoughts and project suggestions in the comments.