MKStack: Vibe Coding for Everyone

    MKStack: Vibe Coding for Everyone

    A comprehensive guide to building Nostr apps without coding experience using Stacks, MKStack, and AI-powered vibe coding with Dork.

    Derek Ross
    Step-by-Step Guide

    Nostr Vibe Coding Tutorial

    Turn your ideas into reality using simple prompts, smart templates called Stacks, and AI tools that handle the hard parts for you. No setup, no stress, just imagination and creation.

    What Is Stacks?

    Stacks is a powerful system designed to make app creation accessible to everyone, not just developers. Instead of writing code or setting up complex tools, you simply choose a Stack: a ready-made project template that includes everything you need to launch. Think of it as starting your project with a smart blueprint and an AI co-pilot who guides you every step of the way.

    Whether you want to create a social platform, build an AI chatbot, or launch your own web app, Stacks lets you do it all with just a few prompts.

    What is MKStack?

    MKStack makes it easy for anyone to build apps on the Nostr protocol, no coding experience required. Just describe your idea in plain language, and the system takes care of the rest, setting up your app, connecting it to the Nostr network, and generating the code for you.

    Behind the scenes, MKStack uses smart tools like Nostrbook MCP and Nostrify to handle data and sync with the Nostr network. The MKStack template also includes a clean, modern design system using React and ShadCN, so your app looks great from the start. There is a lot more technical information under the hood, but honestly you don’t even need to understand how any of this works. That’s the beauty of it.

    MKStack Technical Stack

    Nostr Integration

    • • Nostrbook MCP for protocol handling
    • • Nostrify for network synchronization
    • • Built-in relay management
    • • Event publishing and querying

    Modern Design System

    • • React 18 with TypeScript
    • • ShadCN UI components
    • • Responsive design
    • • Clean, modern aesthetics

    <[0_o]> Meet Dork!

    The true power behind Stacks and MKStack is Dork, an AI agent that brings your ideas to life. Just tell Dork what features you want, such as a blog, a feed, or a live chat, and Dork takes care of the rest. Using the MKStack template and the full Nostr technology stack, Dork works with your favorite AI model to build your app right before your eyes, handling all the complex details for you.

    Building Your First App

    Step 1: Install Node.js

    To create your first vibe-coded Nostr app, you only need two things: Node.js and Stacks. First, install Node.js by downloading it from nodejs.org. They have easy installers for Windows, Mac, and Linux with step-by-step instructions. Please Note: If you already have Node.js installed, make sure you're running at least version v22.17.0. Using an older version may cause errors or prevent certain features from working correctly.

    Terminal
    $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
    $ \. "$HOME/.nvm/nvm.sh"
    $ nvm install 22
    $ node -v # Should print "v22.17.0".
    $ nvm current # Should print "v22.17.0".
    $ npm -v # Should print "10.9.2".

    Step 2: Install Stacks

    Once Node.js is installed and working, you're ready to start vibe coding. Visit getstacks.dev and follow the step-by-step instructions to install the Stacks application package along with the MKStack template. That's everything you need to get started building!

    Terminal
    $ npm install -g @getstacks/stacks
    $ stacks mkstack

    Step 3: Enter your AI provider

    Right away, your AI agent, Dork, will appear and start guiding you through a few questions. You'll be asked to choose your project name, select your AI provider, and enter your API key. Stacks supports multiple AI providers, including OpenRouter, Routstr, and PayPerQ. If you don't have an API key yet, you can sign up for a free account with your preferred provider. Learn more about Stacks AI Providers.

    Stack MKStack Overview

    Step 4: Start building your project with Dork

    Now you're ready to start building your first Nostr app! Even if you're new to development, Stacks and MKStack have you covered. You'll see that CONTEXT.md has been found, which means all the technical parts - the tools, Nostr integrations, UI components, and everything else - are set up and ready to go behind the scenes. With the framework in place, your AI agent, Dork, is waiting for you to simply describe what you want in natural language. Just tell Dork your idea, and it will take care of the rest.

    Start Dork AI Agent

    Dork understands all the official Nostr NIPs, thanks to the built-in Nostrbook MCP. This means vibe coders don't always need to reference specific NIP numbers or event kinds, especially when building simple applications. However, for more complex or detailed features, including NIP numbers or event kinds can help Dork generate more precise results.

    That's it! It's honestly that simple. You're off to building your next idea.

    Go Deeper

    To explore NIPs and better understand the Nostr protocol, NostrHub.io is a valuable resource. It allows users to search and browse official and custom NIPs, look up event kinds or keywords, and participate in community discussions. It's especially helpful when trying to describe a feature more clearly or when additional technical insight is needed.

    For those who want to dive deeper and better understand the technical capabilities and limitations of the tools behind their application, exploring the Nostrify library website can be especially helpful. Browsing its features and reviewing included code can offer valuable insight into how Nostrify works under the hood. This deeper understanding can lead to more effective prompting, as it gives you a clearer view of the Nostr protocol and the building blocks you're working with.

    Run a Local Development Server

    Open a second terminal window and use the cd command to navigate into your project's directory. Once you're inside the folder, run the command npm run dev. This will start the development server, allowing you to test and view your application locally. After it starts, you'll see output in the terminal confirming that the server is running. You can then open your web browser and go to a local URL like http://localhost:8080 to see your app in action.

    To stop the development server, simply press Control + C in your terminal. This will exit the development environment and stop the local server.

    Local Development Server

    Use Git for Version Control

    Open a third terminal window. This one will be dedicated to using Git. Git is a version control tool that helps you track changes in your project. It's especially useful when working with AI tools like Dork, where results can sometimes be unexpected or break existing functionality. By using Git, you can easily return to a previous, working version of your code if something goes wrong.

    For example, if you ask Dork to add user profiles and it introduces bugs or breaks another feature, you don't want to waste time trying to fix everything manually. Instead, you can quickly roll back to a previous version and try your prompt again with adjustments.

    Safe Git Workflow

    Git Commands

    Stage and commit your changes:

    $ git add .
    $ git commit -m "working user profiles"

    Reset to last commit if something breaks:

    $ git reset --hard

    ⚠️ This deletes all uncommitted work!

    $ git clean -f -d

    ⚠️ This deletes all uncommitted files!

    To stay safe, make commits often. A typical workflow looks like this: git add . adds all the files you've changed, and git commit -m "working user profiles" saves the current state of your project with a message.

    If something goes wrong, you can reset your project by running: git reset --hard This will undo all changes since your last commit. Be careful! This command deletes all uncommitted work, which is why frequent commits are important. More advanced users can also revert specific commits or roll back to older versions selectively if needed.

    If you created additional files for the project that are now untracked or not included, you may want to consider cleaning those up as well. You can do this by running: git clean -f -d. Just be cautious: this command permanently deletes all untracked files and folders. It's helpful if a previous git reset left behind files or instructions that could accidentally reintroduce features you were trying to remove or fix.

    Working with Dork

    Sometimes Dork can get a little too eager and crash while processing your request. If that happens, don't worry, it's easy to get back on track. Simply open your terminal, make sure you're inside your project's directory, and run the command: stacks agent This will restart Dork and allow you to continue building right where you left off.

    If something isn't working after a couple of prompts, don't keep trying the same thing over and over. This gets expensive! Instead, press Control + C to exit your session with Dork. Then, use git reset --hard to revert your project back to the last known good commit. Once that's done, restart Dork with stacks agent and try your prompt again. This time try with clearer instructions based on what didn't work before.

    Treat each failed attempt as a learning moment. Use what you've learned to refine your prompt and guide Dork more effectively toward what you're trying to build.

    Switching AI Providers

    If you ever want to change your AI provider or try a new one, Stacks makes it simple. Just run the command stacks configure. This will walk you through the same setup process you followed when you first launched Stacks and configured Dork. You’ll be prompted to select a new AI provider and enter your API key. This is especially useful if you want to explore different providers for performance, privacy, or pricing reasons.

    Stacks also supports using AI providers that include Bitcoin Lightning and Cashu payment options. You can use Routstr by selecting the OpenRouter option, minting a Cashu token (at least 3000 sats) using a wallet like cashu.me, pasting that token into the API key field, and entering https://api.routstr.com or another Routstr server URL. To use PayPerQ, select OpenAI-compatible, enter your API key from ppq.ai, and use https://api.ppq.ai as the URL. These options give you more flexibility in how you access and pay for AI usage, giving you more control while you continue to vibe code your Nostr app.

    Pushing to Production

    Now that you've become a confident Nostr developer, thanks to vibe coding and Dork's help along the way, you might reach a point where you're ready to share your app with others in the Nostr community. Fortunately, Stacks and the MKStack template make this step just as easy. You don't need to worry about configuring a production web server or dealing with complex deployment processes.

    Publishing Process Overview

    When you're ready, simply run the command npm run deploy. This will package your app for production, upload it to Blossom servers, publish it to Nostr relays, and make it publicly available on NostrDeploy.com. As part of the process, a new Nostr key pair (an nsec private key and corresponding public key) will be generated for your deployed app. The result is a fully live Nostr application, ready for users to explore and interact with.

    Deploy to Production

    One Command Deploy

    Run npm run deploy and your app goes live automatically

    Blossom Storage

    Your app is uploaded to decentralized Blossom servers

    Nostr Integration

    Published to Nostr relays with generated key pair

    The Future of App Creation

    With Stacks, MKStack, and the power of vibe coding, building and deploying decentralized Nostr applications has never been easier. These tools help realize the promise of an open and permissionless protocol. Before everyone could participate, now everyone can build too.

    Whether you're a developer or someone with zero coding experience, you now have the tools to turn your ideas into real, working apps. From your first prompt to your live deployment, everything is designed to keep you in flow and focused on what matters: building something great. The future of app creation is here, and it's open to everyone.

    Start Vibe Coding Today

    Ready to turn your ideas into reality? Install Stacks and MKStack to begin your journey into the world of AI-powered app development on Nostr.

    Happy vibe coding!

    Written by Derek Ross