Your First Project

Three ways to start a project

When you open Codewick, the welcome screen gives you three paths:

1. Describe an idea in natural language

Click New Project, then type what you want to build in the chat panel. This is the most common starting point and the one we’ll walk through in detail below.

2. Open an existing codebase

Click Open Folder and select any directory on your Mac. Codewick will index the project and make it available to the AI for context. You can then use the chat to ask for changes, additions, or explanations of the existing code.

3. Browse Codewick Ideas

Click Explore Ideas to open the template gallery. Codewick Ideas is a curated collection of starter projects — things like a personal blog, a SaaS dashboard, a portfolio site, or a REST API. Pick one, and Codewick will generate the full project scaffold and drop you into the workspace ready to customize.

Walkthrough: building from a description

Let’s create a project from scratch using natural language. This walkthrough takes about five minutes.

Step 1: Start a new project

1. Open Codewick.
2. Click New Project on the welcome screen.
3. Give your project a name (e.g., “recipe-app”) and choose a location on your filesystem.
4. Codewick creates the project folder and opens the workspace.

Step 2: Describe what you want

In the chat panel on the left, type a description of your app. For example:

Build a recipe manager app. I want to add recipes with a title,
ingredients list, and step-by-step instructions. Include a search
bar to filter by recipe name or ingredient. Use React with
Tailwind CSS. Make it look clean and modern.

Press Enter (or click the send button) to submit.

Step 3: Watch the pipeline work

Once you send your message, Codewick’s six-stage pipeline activates. You can watch the progress in the chat panel:

Orchestration — The orchestration model reads your description and determines the scope. It identifies this as a front-end React application with state management and search functionality.

Planning — The planning model breaks the work into discrete tasks:

• Set up the React project with Tailwind CSS
• Create a data model for recipes
• Build the recipe form component
• Build the recipe list and card components
• Implement search and filtering
• Add responsive layout and styling

Each task is listed in the chat with a checkbox. You’ll see them checked off as the pipeline progresses.

Building — The building model writes the code. Files appear in the editor one by one. You’ll see package.json, component files, utility functions, and configuration created in real time.

UI Generation — The UI model refines the front-end markup, component structure, and Tailwind classes to produce a polished interface.

Debugging — The debugging model runs the application, catches any errors (missing imports, type mismatches, runtime exceptions), and fixes them automatically.

Review — The review model evaluates the final code for quality — checking for best practices, accessibility, and edge cases. If it finds issues, it sends them back through the pipeline for a targeted fix.

Step 4: See the result

When the pipeline completes:

• The editor (center panel) shows all generated files. Click any file in the explorer to view and edit it.
• The browser (right panel) loads a live preview of your application. You can interact with it — add recipes, search, and test the full flow.
• The chat shows a summary of what was built, with links to the key files.

The whole process typically takes 30 to 90 seconds depending on complexity.

Accepting and rejecting AI changes

After the AI generates code, you have full control over what stays.

Accepting changes

By default, all generated files are written to your project directory. If you’re happy with the result, you don’t need to do anything — the code is already there. You can continue prompting to add features, fix issues, or make adjustments.

Rejecting changes

If the AI produced something you don’t want:

• Undo the last action — Click the Undo button in the chat or press Cmd + Z in the chat panel. This rolls back to the checkpoint before the last AI action.
• Roll back to a specific checkpoint — Open the Checkpoints panel from the left rail. Every AI action creates a checkpoint with a timestamp and description. Click any checkpoint to restore your project to that exact state.
• Reject individual files — In the editor, right-click a file tab and select Revert to Checkpoint. This rolls back a single file without affecting the rest of the project.

Editing AI-generated code

The code in the editor is yours. Edit it like any file — Codewick uses the Monaco editor (the same engine as VS Code), so you get syntax highlighting, IntelliSense, multi-cursor editing, and all the keyboard shortcuts you’re used to.

When you make manual edits and then ask the AI for further changes, Codewick includes your edits as context. The AI will respect and build on your modifications rather than overwriting them.

Tips for writing good prompts

The quality of AI output depends heavily on how you describe what you want. Here are some practical guidelines:

Be specific about the tech stack

// Vague
"Build me a website"

// Better
"Build a single-page portfolio site using Next.js and Tailwind CSS
with a hero section, project grid, and contact form"

Describe behavior, not just appearance

// Vague
"Add a settings page"

// Better
"Add a settings page where users can update their display name,
email, and profile photo. Changes should save to localStorage
and persist across sessions."

Break large requests into steps

Instead of asking for an entire application in one message, build iteratively:

1. “Set up a Next.js project with Tailwind and a basic layout”
2. “Add a sidebar navigation with links to Dashboard, Projects, and Settings”
3. “Build the Dashboard page with a chart showing weekly activity”

This gives you checkpoints between each step and lets you steer the direction as you go.

Reference existing files

If you’ve already built part of the app, reference what exists:

"Add a dark mode toggle to the Navbar component. Follow the same
styling patterns used in the Sidebar component."

Codewick’s AI has full context of your project files, so referencing specific components or patterns helps it stay consistent.

Use the browser for visual feedback

Click on any element in the browser preview to select it. Then type a change in the chat:

"Make this card have rounded corners and a subtle shadow on hover"

Codewick maps the selected element to its source code and applies the change precisely.

Understanding checkpoints

Checkpoints are Codewick’s safety net. Here’s how they work:

• A checkpoint is created automatically after every AI action — every time the pipeline runs, a snapshot of your entire project state is saved.
• Checkpoints are named with a timestamp and a brief description of what changed (e.g., “Added recipe search component”).
• You can browse checkpoints in the Checkpoints panel on the left rail.
• Restoring a checkpoint instantly reverts all files to that state. It does not delete later checkpoints — you can move forward again if you change your mind.
• Checkpoints are local. They’re stored alongside your project and don’t require git. However, Codewick also supports git, and you can commit at any checkpoint.

Checkpoints vs. git

Checkpoints and git serve different purposes:

	Checkpoints	Git
Granularity	Every AI action	When you explicitly commit
Purpose	Undo and experiment	Version history and collaboration
Storage	Local project metadata	.git directory
Sharing	Not shared	Push to remotes

Use checkpoints for rapid iteration with the AI. Use git when you’re ready to lock in progress and share it.

Common first-project scenarios

Here are a few ideas to try if you’re not sure what to build:

• “Build a personal portfolio site with my name, a project gallery, and a contact form using React and Tailwind” — A great way to see the full pipeline in action.
• “Create a REST API with Express.js that has CRUD endpoints for a task manager with an SQLite database” — Tests the backend code generation without UI.
• “Build a markdown note-taking app with a live preview panel, local storage persistence, and a dark mode toggle” — A practical tool that covers state management and styling.
• “Open my existing project at ~/Projects/my-app and add user authentication with email and password” — Tests Codewick’s ability to work within an existing codebase.

What’s next?

Now that you’ve built your first project, learn how to navigate the full workspace efficiently in The Workspace.