AI has exploded in popularity and technical capacity in recent years, enabling a huge amount of automations, enhancements, and features that feel like the start of a new age.
One of these paradigms is the idea that AI will eventually do more and more of the work that is currently done by people. Across a wide variety of sectors, AI has the potential to empower, or even replace, workers by doing jobs that can be easily automated. A recent study in the UK estimates that 46 percent of administrative work and 44 percent of legal work could be automated through the use of an AI.
Artificial intelligence can also be useful for developers. Any element of development work that is monotonous, easily repeatable, or very simple is a prime candidate for AI automation.
In this article, we’ll investigate the features and capabilities of the smol developer library, created by a developer, to automate routine development tasks. We’ll also walk through a tutorial to demonstrate how to use smol developer to scaffold a basic React app.
Jump ahead:
The smol developer AI tool was built by a developer called Swyx using ChatGPT. This library is designed to act like a personal, junior developer, performing a huge array of simple, routine tasks as well as some sophisticated tasks. By using a spec that you provide in a prompt, you can even use smol developer to pair program with an AI tool!
N.B., smol is a common internet term that means “small.”
According to the library’s project documentation page, you can use smol developer for a couple of use cases. smol developer will:
The library’s strength is that it is incredibly dynamic. If you‘re using it in your software development lifecycle, it can do so much.
For example, the Create React App toolchain is useful for building SPAs and optimizing React apps, but it’s a single-shot, one-problem fix. smol developer can do all of that and more; it can solve a host of problems for you.
To make more sense of this, let’s jump into the tutorial portion of our article and get smol developer to do some work for us!
To follow along with this article, you’ll need the following:
sk-SJRknbfXO0mxfrUKjMlKT8BlbkFJsxcFXSzKloIdT6xfkYF6bm):
There are multiple ways to run smol developer. For the simplicity of this article, let’s follow the easiest option!
This Git repo approach enables you to clone the repository, bring the Python script up, and then allow smol developer to do your routine work!
First, enter your API key from OpenAI into your .env file:
OPENAI_API_KEY=sk-SJRknbfXO0mxfrUKjMlKT8BlbkFJsxcFXSzKloIdT6xfkYF6bm
Next, you’ll need to run some simple command line instructions:
git clone https://github.com/smol-ai/developer.git cd developer pip install poetry poetry install
N.B.,
poetryis a dependency and package manager in the Python ecosystem that smol developer uses.
Once you’ve run the above command, you’ll be able to feed prompts directly into the command line if you wish. Unfortunately, 99% of the prompts that are really useful, will end up being longer than what you’d type on the command line.
To address this problem, smol developer allows you to type a prompt into a basic markdown file, prompt.md.
For example, you could add something like the following to the prompt.md file:
Bootstrap a basic React app for me, with an end result that will display the words “React App created with GPT-4”
Then, you simply invoke the Python script, like so:
python main.py --prompt prompt.md
And, like magic, the repo is created:
This might be the developer’s dream! 😉
To really understand the dynamic nature of smol developer, let’s take a look at a browser plugin that Swyx created to summarize articles. He did not do any coding, he simply prompted smol developer to create the plugin:
smol developer can take care of a lot of the grunt work of development! Even if you just use smol developer to create a starter template, and then you take over and manually edit and enhance the template, that’s still a huge time savings.
When developers are working on a big feature or a whole new set of features, their work is broken down into multiple smaller pieces they need to tackle to ensure the project goes smoothly.
Let’s say you’re creating a new button for your app. You might break down the work into the following smaller chunks:
When you break your software projects down into small, simple steps, smol developer can function like a junior developer and can be entrusted with portions of your project work.
For example, if you’re building a website to generate random numbers, you could break down the project into smaller problems, solved with prompts. This approach can then help you rapidly deliver something in a much easier way. Some of the prompts might look something like this:
Write a JavaScript function to generate a random number
Write an HTML page with a button that has a click handler attached
If there’s a point in the project when you can’t immediately recall how to do something, instead of searching Google for the answer, your new flow can be to just ask ChatGPT to do it for you or utilize smol developer.
From time to time, you may still get stuck trying to remember how to pull out a random item from an array. But when you’re paired with an AI, two heads are always better than one!
There are some best practices to follow that will help you ensure you’re getting the most out of this new way of working. Let’s discuss some of them.
Some developers seem to be keen to give AI tools the smallest amount of information, concerned that they might overwhelm or confuse the tool. The best prompts are generally those that are well thought out, thoroughly explained, and don’t leave very much for ChatGPT to interpret or assume.
A great example is the approximately 100-line prompt that Swyx wrote when he created the browser plugin example we discussed previously.
If you don’t know how to code, you could reach a point where you feel stuck when working with smol developer. For example, let’s say you use it via prompting to build a new website, but the website keeps crashing when you click on a certain page.
You can actually use smol developer to debug itself! There are several examples of debugging prompts in the prompt.md file.
Let’s say you don’t have the technical proficiency to enhance the starter template that smol developer creates. You could use an approach that Swyx calls logbook-driven development, where you use additional, increasingly detailed prompts to have smol developer further iterate on and enhance the website.
As a developer, there are always parts of an API that we aren’t familiar with, or can’t fully recall. This is why we often end up reading the docs for hours and hours.
Abstractions crop up all over the place. As a talented software developer, you still can’t know every intricacy of every tool you use. If you did, you‘d still be reading code specs before you ever wrote a single line of code!
Fortunately, smol developer can do most of the work for you in this new world. If you ever get stuck with smol developer and decide to handle some of the project manually, your energy required to get something “off the ground” will still be much less than developing everything yourself from scratch.
Just think of all the extra time you’ll have without having to read through the docs in detail just to get the very basics started. Instead, you might choose to just skim the docs to help make your prompts clearer or to unblock something that smol developer is struggling with.
The clearer and more detailed that you can make your prompts, the better the resulting code generated by smol developer. Here’s an example of a prompt that’s a little too broad for smol developer:
Write a browser plugin to summarize articles on a webpage
The best prompts are very verbose and detailed. For example, Swyx’s prompt for building a browser plugin is around 131 lines long. It begins like this:
a Chrome Manifest V3 extension that reads the current page, and offers a popup UI that has the page title+content and a textarea for a prompt (with a default value we specify). When the user hits submit, it sends the page title+content to the Anthropic Claude API along with the up-to-date prompt to summarize it. The user can modify that prompt and re-send the prompt+content to get another summary view of the content.
In this article, we introduced smol developer, a new AI tool built by and for developers. We investigated using smol developer to bootstrap a React app, looked at an example of using the tool to create a browser plugin, and discussed how it can be used for pair programming. We also reviewed some best practices.
I hope this article has been useful to you, whether you’re an experienced developer interested in how AI can augment your knowledge or a total newbie looking to understand how to use AI to simplify the process of creating your first software program.
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
Learn more →
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Cypress is one of today’s foremost tools for testing web applications. Let’s explore when and why you should adopt Cypress in your projects.
Similar to CSS @scope, but with better browser support, this library will help you create scoped styles easily in CSS.
Knowing how to reduce unused JavaScript can help you save time, optimize performance, and improve efficiency.
MiniSim makes virtual emulator testing easy — learn how to use it to test both Android and iOS apps on macOS in this detailed post.
One Reply to "Bootstrap a React app with smol developer"
Great resource. Thankyou for this