Back to Documentation

Your First Project

Follow this walkthrough to build your first application with MXBolt.

Step 1: Open MXBolt

Navigate to http://localhost:5174 in your browser. You'll see the MXBolt chat interface.

Step 2: Configure Your API Key

Click the settings icon in the top-right corner. Navigate to the Providers tab and enter your API key for at least one provider.

Tip: Start with OpenAI (GPT-4o) or Anthropic (Claude 3.5 Sonnet) for the best results.

Step 3: Choose a Model

Select your preferred model from the dropdown in the chat area. The model availability depends on which API keys you've configured.

Step 4: Describe Your Project

Type a description of what you want to build in the chat. Be specific about:

  • Framework preference (React, Vue, Svelte, etc.)
  • Features and functionality
  • Styling approach (Tailwind, CSS modules, etc.)
  • Any specific design requirements

Step 5: Watch & Iterate

MXBolt will generate your project in real-time. You'll see:

Code Panel

See all files being created and edited in real-time

Live Preview

Watch your app render as it's being built

Terminal

See npm installs, builds, and server logs

Chat

Ask for changes, fixes, or new features

Step 6: Deploy

Once you're happy with your project, you can deploy it directly or push to GitHub.

Example Prompts

"Build a React todo app with Tailwind CSS, local storage persistence, and drag-and-drop reordering"
"Create a landing page for a SaaS product with a hero section, pricing table, and testimonials"
"Build a real-time chat interface with WebSocket support and message persistence"
Powered by Miracuves
Powered by Miracuves