Choose Your AI Agent

Select your preferred AI agent to see relevant commands and examples

What if your first coding contribution didn't require you to know how to code?

That's not a trick question. It's actually possible today, thanks to something called "agentic AI." I'm going to walk you through shipping your very first feature to a real software project, and you won't need to write a single line of code yourself.

Choose your preferred AI assistant above, and I'll show you exactly how to do it with your chosen agent!

Note: This guide assumes basic terminal/command line usage. New to the terminal? Check out this friendly MDN guide first.

Prerequisites: Setting Up Node.js

Most of the tools we'll use assume you have Node.js installed locally. Node.js is a runtime environment that lets you run JavaScript on your computer (not just in web browsers). It comes with npm (Node Package Manager), which we'll use to install development tools.

Quick setup:

  • Follow the official Node.js installation guide: Installing Node - MDN
  • Verify installation by running: node --version and npm --version

Already have Node 18+? Great! You can skip this section and jump straight to setting up your AI assistant.


What's agentic AI, anyway?

Think of agentic AI like having a super-smart assistant who doesn't just answer questions - they take action. Imagine you're driving somewhere new:

  • A regular AI is like someone who can tell you the directions
  • An agentic AI is like a GPS that actually guides you there, turn by turn

Or in the kitchen:

  • A regular AI can tell you a recipe
  • An agentic AI is like having a sous-chef who helps prep, cook, and plate the meal with you

The "agentic" part means it can take actions on your behalf, following your guidance while handling the technical details.

Why This Matters: Agentic AI is democratizing software development. You don't need years of coding experience to contribute meaningful improvements to software projects. You just need to know what you want to achieve.


Meet Your AI Assistant

Let's get your chosen AI assistant set up:

Installation is quick and easy:

1. Follow the quickstart guide: https://docs.anthropic.com/en/docs/claude-code/quickstart 2. Then start chat with: claude

Initial setup commands:

BASH
# No additional setup needed after installation

Pro Tip: Each AI agent has its own strengths. Don't worry about picking the "best" one - they can all help you contribute effectively!

🆘 Getting Help

If anything goes wrong following this tutorial, feel free to ask your agent for help. Just say:

"Can you help me? I'm getting this error: [paste the error message]"

Your AI agent can help debug issues, explain error messages, and guide you through fixes. Be careful with what you allow it to do, but this simple approach will take you pretty far!


What does "shipping a feature" mean?

In the software world, "shipping a feature" means making a real improvement that goes live for people to use. It's like:

  • Adding a new button that does something useful
  • Fixing something that was confusing
  • Making something work better

Before you might have thought this required:

  • Years of coding experience
  • Deep technical knowledge
  • Complex development tools

But with agentic AI, you can focus on what you want to improve, and let the AI handle how to code it.


Your Playground: dev-toolbox

We're going to use my project called "dev-toolbox" as our practice ground. I built this as an interactive learning tool for folks new to agentic AI, with deployed proof that you contributed something real.

Check it out:

First, fork the repository on GitHub (click the Fork button on the repo page above), then clone your fork:

BASH
# Replace [your-username] with your GitHub username
git clone https://github.com/[your-username]/dev-toolbox.git
cd dev-toolbox
npm install

Note: Your AI-assisted contributions are exactly what this project was designed for.


Adding Your Feature

Now it's time to choose what tool to add! You have two options:

Option 1: Pick from GitHub Issues Browse the open issues on dev-toolbox where I've listed 15+ tools that would be great additions. Each issue includes all the details you need.

Option 2: Add Your Own Tool Think of a development tool you use that's missing from the collection. It could be anything: a new framework, CLI tool, VS Code extension, or online service that helps developers.

Let's walk through the process step by step:

Step 1: Start the conversation with detailed context

BASH
# In your terminal:
claude

# If picking from issues:
I want to add [Tool Name] from issue #[number] to the dev-toolbox collection. [Copy the issue description]. Please explore the project structure, understand how other tools are organized, then add this tool with proper categorization, description, and links.

# If adding your own:
I want to add [Tool Name] to dev-toolbox. It's [brief description]. Please explore the project structure, understand how tools are organized, then add it with proper details.

Step 2: Let your AI explore and plan

Your AI will analyze the project structure, find where tools are defined, study existing examples, and create an implementation plan. It will show you exactly what files need to be modified and how the new tool should be structured.

Step 3: Accept or edit the generated response

Review what your AI proposes. You can accept it as-is, or ask for modifications like changing the category, updating the description, or adding more details.

Step 4: Implement the changes

BASH
That looks good! Please add the tool with those details.

Step 5: Run the app, test and verify changes

Test your changes:

BASH
Can you run the development server so I can test this?

# Then go to localhost:5173 in your browser
# Verify your tool appears in the right category

Step 6: Validate schema adherence

Run the validation command to ensure your addition follows the proper data schema:

BASH
npm run validate

This checks that your tool entry has all required fields and proper formatting.

You're the creative director - the AI handles the technical details, but your ideas make the feature valuable.


Opening a Pull Request

When you're happy with your changes, it's time to share them with me and the community.

New to forking? Forking creates your own copy of a repository where you can make changes. Learn more in this GitHub guide on forking.

Create and submit your changes:

BASH
# Fork the repo first, then:
git add .
git commit -m "Add [tool name]: brief description"
git push origin main
gh pr create --title "Add [tool name]" --body "Added [tool] to the collection as suggested in issue #[number]"

What's Next?

Congratulations! You just contributed to a real project with deployed (once I merge your PR) proof of your AI-assisted development skills. 🎉

Next contribution ideas:

  • Browse GitHub issues for requested features
  • Add a tool you use daily that's missing
  • Improve the mobile experience
  • Write a tip about something you've learned
  • Suggest new features

Every expert was once a beginner. With AI assistance, you can contribute real value while learning.

- Dakota (@GhostScientist)