You’re a JavaScript developer with big dreams to build amazing things. But before you can even start on that next incredible app idea, you’re stuck spending hours setting up boilerplate code and infrastructure. There’s the dev environment to configure, CI pipelines to set up, and plenty of generic features to build, like user profiles and auth flows.
You feel like that’s not exactly the best use of your time or talent. That’s when you start hunting for shortcuts. Tools and resources that can handle the mundane parts of your app so you can focus on that special feature you’re trying to build.
You probably already rely on AI coding assistants to some extent, but the real magic happens when they’re paired with other development tools and resources designed to jumpstart our projects.
While AI can streamline many tasks, understanding how to use tried-and-true tools and resources effectively is critical. These can guide your AI assistant to generate cleaner, better-tested, and more efficient code.
Project templates provide pre-configured setups for various tech stacks. They’ve been around for a long time but, perhaps counterintuitively, have become even more important with the rise of AI coding assistants.
Example: starter templates on Vercel.com and Remix.run
A template provides the best context for your AI assistant, saving hours of meticulous prompt-engineering and lengthy conversations with your AI comrade. A template is detailed. It defines the development environment, dependencies to use, data transfer methodology, frameworks, state management, styling solutions, and so on.
A template also has coding conventions and development standards embedded in it. With a solid, tested, and verified base, you’re spared from piecing together the entire thing prompt-by-prompt.
Customizing a pre-made project (template) using Cursor AI and the @Codebase mention
In addition to the template itself, some AI assistants (like Cursor AI) also support a general instruction file to guide the AI in every suggestion it makes. For example, see this collection of Cusror AI instructions, written by senior developers, to use inside the .cursorrules file:
https://cursor.directory/
Coding isn’t just about writing frontend or backend logic — it’s about setting up the entire ecosystem for your app to thrive. Tools like AWS CDK, Pulumi, or Terraform let you define your cloud infrastructure as code.
Modern IoC tools like SST are highly “aware” of the functional side of your codebase. They embed into your app’s logic to make for a streamlined and more failproof development. Modren IoC tools often provide incredibly abstract APIs, which makes it simpler for you and your AI companion to comprehend.
Using IoC allows your AI coding assistant to assist you more. It can manipulate and extend your infrastructure, just like it does with your logic and UI. Your codebase is all your AI needs to service you well. Nothing is hidden away, including the resources that power your app.
/**
* SST Example; the code for nextjs deployment
* along with the creation of an S3 bucket (acesible to it)
**/
const bucket = new sst.aws.Bucket("MyBucket", {
access: "public"
});
new sst.aws.Nextjs("MyWeb", {
link: [bucket]
});
There’s been a noticeable shift towards embedding UI components directly into projects instead of installing them as (immutable) npm packages, giving you more flexibility to tweak and extend them.
One major advantage of having your own instance of UI componetns as part of your codebase is that it makes it easier for your AI coding assistant to compose new UIs on demand while referring to your customized collection of components and their (potentially) modified behavior and APIs.
Some component collections like shadcn/ui offer a CLI tool to help you with the “copy-paste” process. Other tools like Bit can help you do the same with any UI library hosted on the Bit Platform. Any component can either be installed or copied into your project.
A custom collection of Radix components hosted on Bit Platform
In the case of Bit Platform, a dedicated AI assistant can also generate a custom collection of shared components based on your favorite component libraries.
Generating a shared collection of custom Material UI components on Bit Platform
Composable software or composable codebases are two closely related concepts that have also been around in software development for some time now.
In essence, a composable codebase is designed with modular, reusable, and independently manageable components or modules. These modules can be assembled in different ways to produce new systems or modify existing ones. A system can be composed during build-time, runtime, or a hybrid, forming the frontend, backend, and even its infrastructure.
Example: A composable React Apollo server application compsosed of reusbale components
The ‘composable’ approach is loved and adopted by many for the standardized, maintainable, and highly adaptable code it produces.
‘Standardized’ because the same components are reused across the system. ‘Maintainable’ because components in the system form a clear dependency graph that describes how they relate to each other, but also because the total lines of code (LOC) are drastically reduced. Lastly, it is ‘adaptable’ because components can be used in different constellations to address new needs as they come.
AI coding assistants are giving composability a whole new spin.
Platforms like Bit have embraced this approach, offering a home for independent components, along with an AI-powered coding assistant. This assistant goes beyond simple code generation; it understands the system’s dependency graph and prioritizes reusing existing components over creating new code from scratch.
This strategic reuse ensures the codebase remains efficient and maintainable, avoiding unnecessary bloat. Moreover, since the reused components have already been tested and validated, you‘re guaranteed a better night's sleep.
For example, see the following prompt given to Bit’s AI assistant:
Generating a new feature using Bit’s AI coding assistant
The generated component would be a composition of existing independent componetns from your codebase:
The AI generated component ‘contact-us-form’ is composed of existing components from the codebase
The component is then built and tested before it joins your codebase, which is, in a way, a curated collection of reusable components:
An AI generated component is built and tested before it joins your codebase on Bit Platform
Nobody got into coding because they were psyched about setting up boilerplate or wrestling with pipelines. The real magic happens when you get to focus on the creative, game-changing stuff that actually matters. AI coding assistants are here to help however, using them without a plan or methodology in mind, can often result in lengthy and tedious conversations with your AI partner.
The above is the detailed content of AI Coding Assistants, Starter Templates, and More: A Guide to Working Less. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
