WDG AI Dev Environment

Appearance

Getting Started with WDG Playground ​

Your WordPress AI playground - no technical setup required!

Welcome! This guide will help you go from download to your first WordPress site with AI assistance in under 10 minutes.

What is WDG Playground? ​

WDG Playground is a desktop application that lets you:

  • Create WordPress sites instantly
  • Use AI to build features and layouts
  • Explore 50+ professional blocks
  • Get help from an AI assistant
  • Everything bundled - no installation needed

Perfect for:

  • Designers exploring layouts
  • Project managers creating demos
  • Content strategists planning architecture
  • Anyone wanting to try WordPress + AI

Step 1: Download & Install ​

macOS ​

  1. Download WDG-Playground.dmg from wdg.dev/playground
  2. Open the downloaded .dmg file
  3. Drag WDG Playground to your Applications folder
  4. Open WDG Playground from Applications

First time opening? macOS may show a security warning. Go to System Preferences → Security & Privacy → Click "Open Anyway"

Windows ​

  1. Download WDG-Playground-Setup.exe from wdg.dev/playground
  2. Run the installer
  3. Follow the setup wizard
  4. Launch from Start Menu or Desktop shortcut

Windows Defender warning? Click "More info" → "Run anyway"

Linux ​

  1. Download WDG-Playground.AppImage from wdg.dev/playground
  2. Make executable: chmod +x WDG-Playground.AppImage
  3. Run: ./WDG-Playground.AppImage

Step 2: First Launch Setup ​

When you first open WDG Playground, you'll see a welcome wizard:

Welcome Screen ​


 Welcome to WDG Playground!       
                                    
 Create WordPress sites with AI     
 No technical setup required        
                                    
 [Get Started]

Click Get Started

Configure AI Assistant (Optional) ​

To use AI features, you need an Anthropic API key:

  1. Go to console.anthropic.com
  2. Sign up or log in
  3. Navigate to API Keys
  4. Click "Create Key"
  5. Copy your key (starts with sk-ant-...)
  6. Paste into WDG Playground

Don't have a key? Click "Skip for Now" - you can add it later in Settings

Choose Your Preferences ​

[] Auto-save projects
[] Show helpful tips
[] Advanced mode

Theme: Light   Dark   Auto

[Finish Setup]

Select your preferences and click Finish Setup

Step 3: Create Your First Project ​

Open Project Wizard ​

  1. Click the "+ New Project" button
  2. Project creation wizard opens

Choose a Name ​

ProjectName: [My First Site          ]

URL: my-first-site.localhost:8443
(automatically generated)

Enter a name for your project. The URL is created automatically.

Select a Template ​

 
 Blank   Designer  Business

Templates:

  • Blank - Empty WordPress with Wikit framework
  • Designer - Pre-configured with portfolio blocks
  • Business - Company site layout

Choose Designer for this tutorial.

Enable AI Features ​

[] Enable AI assistant
[] Index code for search
[] Advanced git features

Leave defaults checked and click Create Project

Wait for Setup ​

Creating your project...
 Installing WordPress
 Installing Wikit framework
 Setting up AI features
 Starting services

This takes about 1-2 minutes

The app will:

  • Install WordPress
  • Set up the Wikit framework
  • Start all services
  • Index code for AI search

Grab a coffee! This only happens on first project creation.

Project Ready! ​

 Project ready!

Your WordPress site is running at:
https://my-first-site.localhost:8443

Admin Login:
Username: wdg
Password: wdg

[Open Site] [Start Editing]

Click Open Site to see your WordPress site!

Step 4: Explore Your Site ​

View the Frontend ​

Your site opens in your default browser:

  • URL: https://my-first-site.localhost:8443
  • You'll see a default WordPress homepage

Certificate Warning? Your browser may show a security warning because we use a self-signed certificate for local development. This is normal! Click "Advanced" → "Proceed to site"

Access WordPress Admin ​

  1. Click the login link or go to /wp-admin
  2. Username: wdg
  3. Password: wdg
  4. Click Log In

You're now in the WordPress admin dashboard!

Step 5: Use the AI Assistant ​

Open AI Chat ​

In WDG Playground:

  1. Click "AI Chat" in the sidebar
  2. Chat interface opens

Try Your First Question ​

Type: "What Wikit blocks are available?"

Press Enter and watch:

  • AI searches your codebase
  • Finds all Wikit blocks
  • Lists them with descriptions
 Claude: I found 50+ Wikit blocks:

**Content Blocks:**
• Hero - Standard hero section
• Hero Split - Two-column hero
• Accordion - Collapsible content
• Testimonials - Customer quotes
...

**Layout Blocks:**
• Grid - Responsive grid layout
• Flex - Flexible layout system
...

Would you like me to show you how to use one?

Add a Block with AI ​

Try: "Add a Hero Split block to my homepage"

The AI will:

  1. Search for the Hero Split block
  2. Explain what it does
  3. Add it to your homepage
  4. Show you how to edit it

That's AI-assisted WordPress development!

  1. Click "Blocks" in the sidebar
  2. Block gallery opens with 50+ blocks

Browse Blocks ​

Search:[hero                         ] 

Filter:[All] [Content] [Layout] [Media]


Hero           Hero Split     Hero Video   
 [Preview]      [Preview]      [Preview]   
 [Insert]       [Insert]       [Insert]

Try:

  • Search for "hero"
  • Click Preview to see what it looks like
  • Click Insert to add it to a page

Block Categories ​

  • Content - Text, images, testimonials
  • Layout - Grids, columns, sections
  • Media - Video, galleries, sliders
  • Forms - Contact forms, newsletter signups
  • Navigation - Menus, breadcrumbs

Step 7: Make Changes ​

Edit Your Homepage ​

  1. Go to WordPress Admin
  2. Click Pages → All Pages
  3. Click Edit on your homepage
  4. You'll see the Gutenberg editor

Add a Block ​

  1. Click the + button
  2. Search for "Hero Split"
  3. Click to insert it
  4. Edit the text and image
  5. Click Update

See Your Changes ​

  1. Go back to WDG Playground
  2. Click Open Site
  3. Your changes are live!

Step 8: Project Management ​

Stop/Start Your Project ​

In WDG Playground:

  • Stop Project - Stops all services (frees up memory)
  • Start Project - Starts services again
  • Projects automatically start when you open the app

Project Settings ​

Click Settings to configure:

  • Site title and tagline
  • Admin email
  • Timezone
  • Project name

Backups ​

WDG Playground automatically backs up your database:

  • Before major changes
  • Daily (if project is running)
  • Find backups in: Project → Backups folder

Common Workflows ​

Create a New Page ​

Via AI:

You: "Create a new page called 'About Us' with a hero section"

 Claude: I'll create that page for you...
[Creates page, adds hero block, opens editor]

Via WordPress:

  1. Go to Pages → Add New
  2. Enter page title
  3. Add blocks
  4. Publish

Add a Contact Form ​

Via AI:

You: "Add a contact form to my Contact page"

 Claude: I'll add a Wikit Contact Form block...
[Inserts form, configures email settings]

Via Blocks:

  1. Open Block Gallery
  2. Search "contact form"
  3. Insert Wikit Contact Form
  4. Configure email address

Change Your Theme ​

WDG Playground uses the Wikit theme by default. To customize:

Via AI:

You: "Change the primary color to blue"

 Claude: I'll update your theme colors...
[Modifies theme settings]

Via WordPress:

  1. Go to Appearance → Customize
  2. Adjust colors, fonts, layout
  3. Click Publish

Tips & Tricks ​

Keyboard Shortcuts ​

  • Cmd/Ctrl + N - New project
  • Cmd/Ctrl + K - Open AI chat
  • Cmd/Ctrl + B - Open block gallery
  • Cmd/Ctrl + , - Settings

Ask the AI for Help ​

Not sure how to do something? Just ask!

Examples:

  • "How do I add a team members section?"
  • "Show me how to create a custom menu"
  • "What's the best block for testimonials?"

Use Templates ​

When creating projects, use templates:

  • Designer - Portfolio sites
  • Business - Company websites
  • Blank - Start from scratch

Save Favorites ​

In the Block Gallery:

  • Click the on blocks you use often
  • Access favorites quickly later

Recent Activity ​

The project dashboard shows:

  • Recent file changes
  • AI assistant actions
  • System events

Troubleshooting ​

Project Won't Start ​

Problem: Services fail to start

Solutions:

  1. Check if another WordPress is running (port 8443)
  2. Restart the app
  3. Click Restart Services in project settings
  4. Check logs: Project → View Logs

Can't Access Site ​

Problem: https://my-site.localhost:8443 doesn't load

Solutions:

  1. Ensure project is started (green status)
  2. Wait 10 seconds after starting
  3. Try http://my-site.localhost:8880 (HTTP)
  4. Check firewall isn't blocking port 8443

AI Not Responding ​

Problem: AI chat shows error

Solutions:

  1. Check API key in Settings
  2. Verify internet connection
  3. Check Anthropic status page
  4. Try restarting the chat session

Certificate Warning in Browser ​

Problem: Browser shows "Not Secure"

Solution: This is normal for local development

  1. Click Advanced
  2. Click Proceed to site
  3. Or use HTTP version (port 8880)

Getting Help ​

In-App Help ​

  • Click ? in any screen for contextual help
  • Hover over buttons for tooltips
  • Check the Tips panel in sidebar

Documentation ​

Support ​

Next Steps ​

Level Up Your Skills ​

  1. Take the Tutorial - Learn advanced AI features
  2. Try Different Templates - Explore all project types
  3. Learn Wikit Blocks - Master the block library
  4. Join the Community - Share your creations

Build Something Real ​

Use WDG Playground to:

  • Prototype client sites before development
  • Create mockups with real data
  • Test content structures and taxonomies
  • Learn WordPress in a safe environment

Upgrade to Full Platform ​

Ready for more power?

  • WDG AI Development Environment - Full development platform
  • Multi-project support
  • Advanced git workflows
  • Full terminal access
  • Docker customization

Export your Playground projects → Import to full platform!

Welcome to the Community! ​

You're now part of the WDG Playground community. We'd love to see what you build!

Share Your Work:

  • Tag #WDGPlayground on social media
  • Post in our community forum
  • Submit to the template marketplace

Stay Updated:

  • Follow @WDGPlayground on Twitter
  • Subscribe to our newsletter
  • Join our Discord server

Happy building!

If you have questions, the AI assistant is always there to help. Just ask!

Document Version: 1.0 Last Updated: October 2025 Related: User Guide | FAQ | Video Tutorials

Released under the MIT License.

Copyright © 2024 WDG