DEV Community: Andrew Lee

From Beginner to Codex CLI Pro

Andrew Lee — Thu, 23 Oct 2025 12:08:53 +0000

I've spent the last month living inside of Codex CLI. Here are the most helpful tips.

Copy Paste Images

I copy and paste images into Codex all the time. The easiest way to do this is to capture it into your clipboard and paste directly into the CLI

Capture to clipboard: ⌃ (control) + ⌘ (command) + ⇧ (shift) + 4
Past into Codex CLI: ⌃ (control) + v

/review

Client side review is a must before you push commits and merge PRs. You can trigger this with /review command. Codex is specifically trained to identify technical errors and it does not waste your time with a bunch of slop. Instead it focuses on 1-2 critical bugs.

I alternate between /review and please fix until there are no more issues detected. Then the code is ready to push.

Sectioned Checklist

Codex can work autonomous for over an hour. A trick to unlocking this is to create a plan and save it to a markdown file first. Then you can ask Codex to implement the markdown file.

Trick is to prime the context and then ask it go generate a sectioned checklist where each section is a phase that can be committed, prioritized by importance.

Here is a high level prompt I use to generate this plan for that is building on top of .

go ahead and do the following:
1. investigate <feature A>
2. think about how to implement <feature B>
3. create a sectioned checklist to implement <feature B> where each section is a phase can be committed.

then go ahead and implement each phase. commit and push after a phase is done before you move onto the next phase.

Here is an example of a sectioned checklist that Codex created:

You can easily get Codex to work for over an hour using this strategy.

Codex Options

I have my alias set to the following to make sure every new session is using gpt-5-codex with high reasoning, has web search enabled, and has all permissions enabled.

alias c="codex -m gpt-5-codex -c model_resoning_effort='high' --search --yolo"

Occasionally I will change the model/reasoning based on the task at hand, but I want to make sure that each new session has these defaults.

If you ever accidentally exist out a Codex session, you can always resume by selecting on previous sessions with the following command:

codex resume

Codex Cloud

Do your important work on Codex CLI and get in the habit of offloading small bugs to Codex Cloud to parallelize your work. You can now do this on the CLI with:

codex cloud

If you have good preview environment set up, it's a great way to knock out small bugs while you are focused on features.

Git Worktrees

You'll realize pretty quickly that Codex Cloud isn't meant for ambitious features. It will flat out refuse to do complex work. If you want to parallelize your ambition, you can use git worktrees to run multiple Codex CLI agents at the same time. It is possible to do it in the same branch but you'll find that Codex CLI agents will step on each other's toes without git worktrees.

It's a bit intimidating at first, but git worktrees are pretty simple after you try it.

Run the following command which will create a copy of your entire repo in ../new-feature under a git branch called new-feature which is branched off of your origin/main

git worktree add ../new-feature -b new-feature origin/main

You can then cd into the copy.

cd ../new-feature

Important to note that you'll have to install dependencies and set up your .env if you have one. After that initialize your codex there and push up to GitHub like any other branch.

Conclusion

Reminder that Codex is open source. Best way to improve is to look at the latest commits/releases. If you want more Codex tips you can follow me on X/Twitter here: andyrewlee.

How to add custom domain to Vercel using Namecheap

Andrew Lee — Fri, 11 Apr 2025 16:01:50 +0000

1. Add new domain from Vercel

Go to Settings and click Add.

Add your domain name (i.e. example.com) and select Production as the Environment. Then click Add Domain.

Select the Recommended approach which is to add www.example.com and redirect to example.com to it.

2. Add Vercel to Namecheap

You'll notice that on Vercel, there will be Invalid Configuration for example.com and www.example.com. To fix this you have to add the two records provided by Vercel.

Now navigate to namecheap.com and log in. Either from Dashboard or Domain List, find your custom domain and click Manage.

Then click on Advanced DNS and add the records provided on the Vercel dashboard. At the end, your page should look like the following.

You'll notice pretty quickly that your Vercel dashboard will say Valid Configuration if everything is set up properly.

Deploy MCP to Vercel and use it with Cursor

Andrew Lee — Thu, 10 Apr 2025 19:35:26 +0000

1. Deploy to Vercel using template

Navigate to https://vercel.com/templates/next.js/model-context-protocol-mcp-with-next-js and click on Deploy.

2. Set up Upstash for Redis

Go to the Storage tab and add Upstash for Redis.

Afterwards go to Settings and verify that environment variables are properly populated.

3. Clone your repo and deploy

Clone the repo created in Step 1 and add app/layout.tsx and app/page.tsx. Committing and pushing will trigger a deploy.

// app/layout.tsx
export const metadata = {
  title: 'Remote MCP',
  description: 'Remote MCP on Vercel tutorial',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// app/page.tsx
export default function HomePage() {
  return (
    <h1>Remote MCP</h1>
  );
}

4. Connect to your Remote MCP using Cursor

Add the following to your mcp.json after going to Settings -> MCP -> Add new global MCP server.

{
  "mcpServers": {
    // ...
    "Remote MCP Demo": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://your-vercel-name.vercel.app/sse"
      ]
    }
  }
}

5. Trigger your remote MCP

If you want to add a custom domain to this MCP, you can follow this tutorial: https://dev.to/andyrewlee/how-to-add-custom-domain-to-vercel-using-namecheap-dp8.

Stand out in interviews with your Cursor setup

Andrew Lee — Sat, 05 Apr 2025 07:07:01 +0000

Some companies only hire for engineers that are fully utilizing AI. Whether this makes sense is topic for another time. Here are some ways to wow your interviewer at these companies with your Cursor setup.

1. Have Chat on the left

What a statement! Not only did you take the extra effort to customize your Cursor but you also show that prompting is the most important part of your workflow.

You can do this by going to View -> Appearance -> Move Primary Sidebar Right.

2. Have opinions on what model you are using

Instead of auto-selecting your model, explicitly choose the right model for the task and explain to the interviewer why you chose it.

Here's an example of what you can say today (this will soon be outdated as new models come out):

I use Gemini 2.5 Pro for coding. Claude 3.7 is too ambitious with changes so I'm able to make better incremental changes with Gemini 2.5 Pro. For non-coding tasks I use GPT 4.5. While GPT 4.5 didn't meet people's high expectations, it's been able to outperform other models on non-coding tasks.

This demonstrates to the interviewer that you have an informed opinion on the latest models and can enthusiastically talk about them.

3. Add active files to context

You will most likely want to add all open files into context during the interview. Instead of manually adding each one, you can type / in the chat and then click Add open files to context.

This nifty trick will signal to the interviewer that you are not a casual.

Bonus: Use your own MCP

Build yourself a simple local MCP to help you during the interview. Here is an example one you can use to review your code from different perspectives: https://dev.to/andyrewlee/how-to-build-mcp-server-that-triggers-an-agent-using-ai-sdk-pd1. This demonstrates to the interviewer that you want to give Cursor even more powers.

How to build MCP server that triggers an Agent using AI SDK

Andrew Lee — Fri, 04 Apr 2025 08:04:05 +0000

1. Set up your project

mkdir code-reviewer
cd code-reviewer
npm init -y
npm pkg set type=module

2. Install dependencies

npm install @modelcontextprotocol/sdk
npm install ai
npm install @ai-sdk/openai

3. Create index.js

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

// Contents of parallel-code-review.js is copied pasted from
// https://sdk.vercel.ai/docs/foundations/agents#parallel-processing
import { parallelCodeReview } from "./parallel-code-review.js";

const server = new McpServer({
  name: "Code Reviewer",
  version: "1.0.0"
});

server.tool("code_review",
  { code: z.string() },
  async ({ code }) => {
    const { summary } = await parallelCodeReview(code);
    return {
      content: [{ type: "text", text: summary }],
    };
  }
);

const transport = new StdioServerTransport();
await server.connect(transport);

The code in parallel-code-review.js is copied pasted from the example in https://sdk.vercel.ai/docs/foundations/agents#parallel-processing.

// Source: https://sdk.vercel.ai/docs/foundations/agents#parallel-processing
import { openai } from '@ai-sdk/openai';
import { generateText, generateObject } from 'ai';
import { z } from 'zod';

// Example: Parallel code review with multiple specialized reviewers
export async function parallelCodeReview(code) {
  // ...
}

AI SDK defaults to looking at OPENAI_API_KEY which we will provide in next step.

4. Add to Cursor (or your MCP host of choice)

{
  "mcpServers": {
    // other MCP servers...
    "Code Reviewer": {
      "command": "node",
      "args": [
        "/absolute/path/to/your/code-reviewer/index.js"
      ],
      "env": {
        "OPENAI_API_KEY": "sk-proj-xxxxxxx"
      }
    }
  }
}

5. Trigger your MCP by asking to use code reviewer

Build and use your own MCP in Cursor in 5 minutes

Andrew Lee — Sat, 15 Mar 2025 06:42:08 +0000

1. Set up your project

mkdir cursor-mcp
cd cursor-mcp
npm init -y
npm pkg set type=module

2. Install dependencies

npm install @modelcontextprotocol/sdk

3. Create index.js

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

const server = new McpServer({
  name: "Hello World",
  version: "1.0.0"
});

server.tool("add",
  { a: z.number(), b: z.number() },
  async ({ a, b }) => ({
    content: [{ type: "text", text: String(a + b) }]
  })
);

const transport = new StdioServerTransport();
await server.connect(transport);

4. Add to Cursor

Go to Settings, MCP, and add new MCP server.

The command is node /absolute/path/to/your/index.js. For example node /Users/andyrewlee/mcp-server/index.js.

5. Trigger your MCP by asking Cursor to add 24 and 81

In Agent mode prompt 8 + 24 and watch the add tool in your MCP get triggered.

How to update an array of objects in React state

Andrew Lee — Tue, 15 Nov 2022 05:18:51 +0000

Let’s go over how we can update an array of objects in React state. We have to treat React state as immutable, therefore we have to ensure we create a new copy when mutating the array.

Let’s implementhandleMarkComplete in the following example:

import { useState } from "react";

const List = () => {
  const [todos, setTodos] = useState([
    { id: 1, task: "gym", isComplete: false },
    { id: 2, task: "tan", isComplete: false },
    { id: 3, task: "laundry", isComplete: false },
  ]);

  const handleMarkComplete = (id) => {
    // 1. Find the todo with the provided id
    // 2. Mark the todo as complete
    // 3. Update the todo list with the updated todo
  };

  return (
    <div>
      {todos.map((todo) => (
        <div
          key={todo.id}
          onClick={() => handleMarkComplete(todo.id)}
        >
          {todo.task}
        </div>
      ))}
    </div>
  );
}

Let’s write our implementation without the spread operator so we understand what’s going on.

const handleMarkComplete = (id) => {
  // 1. Find the todo with the provided id
  const currentTodoIndex = todos.findIndex((todo) => todo.id === id);
  // 2. Mark the todo as complete
  const updatedTodo = Object.assign({}, todos[currentTodoIndex]);
  updatedTodo.isComplete = true;
  // 3. Update the todo list with the updated todo
  const newTodos = todos.slice();
  newTodos[currentTodoIndex] = updatedTodo;
  setTodos(newTodos);
};

Now that we know what’s going on, let’s use the spread operator.

const handleMarkComplete = (id) => {
  // 1. Find the todo with the provided id
  const currentTodoIndex = todos.findIndex((todo) => todo.id === id);
  // 2. Mark the todo as complete
  const updatedTodo = {...todos[currentTodoIndex], isComplete: true};
  // 3. Update the todo list with the updated todo
  const newTodos = [...todos];
  newTodos[currentTodoIndex] = updatedTodo;
  setTodos(newTodos);
};

We can refactor further by combining spread operators with slice.

const handleMarkComplete = (id) => {
  // 1. Find the todo with the provided id
  const currentTodoIndex = todos.findIndex((todo) => todo.id === id);
  // 2. Mark the todo as complete
  const updatedTodo = {...todos[currentTodoIndex], isComplete: true};
  // 3. Update the todo list with the updated todo
  const newTodos = [
    ...todos.slice(0, currentTodoIndex),
    updatedTodo,
    ...todos.slice(currentTodoIndex + 1)
  ];
  setTodos(newTodos);
};

There is an alternate approach we can take by using the map function. This function might look cleaner but it’s not as efficient as our previous example because we are building up the array one item at a time.

const handleMarkComplete = (id) => {
  const newTodos = todos.map((todo) => {
    if (todo.id === id) {
      return {...todo, isComplete: true};
    }
    return todo;
  });

  setTodos(newTodos);
};

Conclusion

The spread operator is syntactic sugar that we should use once we understand what it does underneath the hood. If we need a refresher on how to update objects and arrays in React state, I wrote an article here: Cheat Sheet for Updating Objects and Arrays in React State.

Why I use TailwindCSS for all of my projects

Andrew Lee — Sun, 13 Nov 2022 11:27:54 +0000

I use TailwindCSS for all of my projects. Here are three reasons why.

1. Most engineers are bad at CSS

I remember my first time working in a large codebase. CSS was an absolute mess with multiple !important values fighting over one another. Most engineers suck at CSS and don't understand its cascading nature. It's a tragedy that CSS gets overlooked by most engineers, but it's rare to find engineers who truly devote themselves into learning it.

It only takes one bad engineer to ruin CSS for everyone else. With TailwindCSS, bad engineers can't ruin the codebase because their bad code is scoped to the components that they are working on and engineers do not have to think about the cascading nature of CSS.

2. There is TailwindUI Fallback (or other copy paste alternatives)

Main benefit of TailwindCSS is that we can copy paste other people's code and expect it to look the same. There is a big community of paid (i.e. TailwindUI) and free TailwindCSS components that engineers can copy paste into their code.

3. Isn't tied to JavaScript

CSS in JS has a lot of the same benefits as TailwindCSS. For example, we can scope the style changes to component so that bad CSS is harder to infect other parts of the codebase. The main downside to CSS in JS is that it's tied to JavaScript. TailwindCSS is language agnostic which makes it a safer choice because some engineers avoid JS like the plague.

Why (most) startups should only write TypeScript

Andrew Lee — Sun, 13 Nov 2022 10:53:20 +0000

As an early engineer at a startup, you get to make the choice of what language to use. This is a big decision...choose TypeScript.

Before I go on further, there are some edge cases where this is not the case.

You (or your team) have deep expertise in another language (i.e. Ruby, Go, etc.)
You (or your team) are building specific technology with a dominant language (i.e. Python for machine learning)
You (or your team) want to optimize for fun/happiness and another language provides that

Now that we got the edge cases out of the way, here is why (most) startups should only write TypeScript.

One language for frontend/backend/mobile

There are huge benefits to using one language for everything. We can share code and every engineer can be full stack.

JavaScript/TypeScript is the only language in the world that can be used to build a complex web frontend (i.e. React), backend (i.e. Express), and a mobile app (React Native).

In the early stages of the startup, it's all about finding product market fit as quick and efficiently as possible. We can choose to optimize each product if necessary (i.e. converting React Native to Swift) once the startup is mature.

Easy to recruit/onboard engineers

Advocates of obscure languages will claim choosing such a language will attract better engineers to the team. This may be true in the beginning, but costs soon outweigh the benefits as the startup scales.

Recruiting and onboarding engineers is hard enough, we shouldn't make it harder by choosing an obscure language. Everyone already knows TypeScript or can pick it up within a week because of its familiar syntax and robust community. There's also endless packages/libraries to speed up development.

Satisfies both static and dynamic type advocates

TypeScript provides just enough structure to satisfy static type advocates and just enough flexibility for dynamic type advocates. It's the happy medium that will prevent your team from looking for something else.

Conclusion

If you are in a situation to choose a language for a startup, make the pragmatic choice and go with TypeScript. If you go with any other language, the team might end up resenting you in the future.

Mutual recursion in JavaScript

Andrew Lee — Sun, 13 Nov 2022 09:07:40 +0000

Mutual recursion is a subset of recursion where a pair of functions are defined in terms of each other.

function isEven(n) {
  if (n === 0) {
    return true;
  }
  return isOdd(n - 1);
}

function isOdd(n) {
  if (n === 0) {
    return true;
  }
  return isEven(n - 1);
}

I didn't realize this was possible until I walked through each function call. Let's walk through the examples step by step:

isEven(0)

// 1
isEven(0) // => true

isEven(1)

// 1
isEven(1)

// 2
isOdd(0) // => false

isEven(2)

// 1
isEven(2)

// 2
isOdd(1)

// 3
isEven(0) // => true

isEven(3)

// 1
isEven(3)

// 2
isOdd(2)

// 3
isEven(1)

// 4
isOdd(0) // => false

isEven(4)

// 1
isEven(4)

// 2
isOdd(3)

// 3
isEven(2)

// 4
isOdd(1)

// 5
isEven(0) // => true

Challenge

Now it's your turn! Try to walk through the following calls:

isOdd(0) // => false
isOdd(1) // => true
isOdd(2) // => false
isOdd(3) // => true
isOdd(4) // => false

Stand out in a React interview by rendering a list like a pro

Andrew Lee — Sun, 13 Nov 2022 08:18:46 +0000

We often get asked to render a list in a React interview. In this article we are going to look at a basic implementation and come up with four ways we can improve it to stand out from the rest.

Standard Implementation

Let's look at a basic implementation where we render a list based on an array of items. Try to think of at least three different ways we can improve the following implementation before reading further.

import { useState, useEffect } from "react";

const App = () => {
  const [posts, setPosts] = useState([]);
  const [currentPost, setCurrentPost] = useState(undefined);

  useEffect(() => {
    const initialize = async () => {
      const res = await fetch("https://jsonplaceholder.typicode.com/posts");
      const json = await res.json();
      setPosts(json);
    };
    initialize();
  }, []);

  const onPostClick = (post) => {
    setCurrentPost(post);
  };

  return (
    <div>
      {currentPost && <h1>{currentPost.title}</h1>}
      <PostList posts={posts} onPostClick={onPostClick} />
    </div>
  );
};

const PostList = ({ posts, onPostClick }) => {
  return (
    <div>
      {posts.map((post) => (
        <Post post={post} onPostClick={onPostClick} />
      ))}
    </div>
  );
};

const Post = ({ post, onPostClick }) => {
  const onClick = () => {
    onPostClick(post);
  };

  return <div onClick={onClick}>{post.title}</div>;
};

export default App;

Improvements

Here are the four improvements that we can make to stand out. It’s important we articulate the why during the course of the interview.

1. Specify Key

By providing a key prop to our list item components, we help React identify each item when it compares the original tree with its subsequent tree. It’s important to emphasize that the key prop needs to be unique and we shouldn’t use an index as a key (changing the order on the list doesn’t change the identity of the item).

{posts.map((post) => (
  <Post key={post.id} post={post} onPostClick={onPostClick} />
))}

2. Optimize Rendering

Every time we click on a list item, we are re-rendering PostList and every Post.

const Post = ({ post, onPostClick }) => {
  console.log("post rendered");

  const onClick = () => {
    onPostClick(post);
  };

  return <div onClick={onClick}>{post}</div>;
};

We can optimize our PostList component by using the memo function provided by React. When we wrap our component with memo, we are telling React to not re-render this component unless the props have changed.

import { useState, useEffect, memo } from "react";

const PostList = memo(({ posts, onPostClick }) => {
  return (
    <div>
      {posts.map((post) => (
        <Post post={post} onPostClick={onPostClick} />
      ))}
    </div>
  );
});

However, we will notice that our component continues to re-render even with memo. Our App re-renders every time currentPost state changes. Every re-render it is re-creating the onPostClick function. When a function is re-created (even if it’s the same implementation), it has a new identity. Therefore, the props technically did change, which means PostList will re-render.

const fn1 = () => {};
const fn2 = () => {};
fn1 === fn2; // => false

We can tell React to not re-create the function by using the useCallback hook.

const onPostClick = useCallback((post) => {
  setCurrentPost(post);
}, []);

Using useCallback might have made sense in the previous example because it is preventing us from re-rendering all of the posts again. It’s important to point out that it doesn’t always make sense to wrap a function in a useCallback.

const Post = ({ post, onPostClick }) => {
  const useCalllback(onClick = () => {
    onPostClick(post);
  }, []);

  return <div onClick={onClick}>{post.title}</div>;
};

We can point out to the interviewer that using the useCallback in the Post component might not make sense because the component in this case is lightweight. We should only use useCallback if it makes sense (we can test by profiling). There are downsides to useCallback; it increases the complexity of the code and calling useCallback is additional code that gets run on every render.

3. Clean up when component un-mounts

Right now we are not doing any sort of clean up when the component un-mounts. For example, what if we decide to navigate away from the page before we get a response from our URL? We should cancel the request.

useEffect(() => {
  const initialize = async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    const json = await res.json();
    setPosts(json);
  };
  initialize();
}, []);

useEffect can be split up into two parts: code to run on mount and code to run on unmount:

useEffect(() => {
  // When component mounts what code should I run?

  return () => {
    // When component unmounts what code should I run (clean up)?
  };
}, []);

We can cancel the request by using the AbortController and calling controller.abort() on clean up.

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  const initialize = async () => {
    try {
      const res = await fetch("https://jsonplaceholder.typicode.com/posts", { signal });
      const json = await res.json();
      setPosts(json);
    } catch (err) {
      console.log(err);
    }
  };

  initialize();

  return () => {
    controller.abort();
  };
}, []);

4. Add accessibility

Final test that truly separates an exceptional candidate is if the candidate can talk about accessibility. Our sample application is too simple to add any tangible accessibility improvements, we should definitely talk about some things to look out for once our application grows in complexity. One test we can run is, can we use our sample application using the keyboard alone? One quick fix would be to convert items into buttons so that we can tab through them using our keyboard.

const Post = ({ post, onPostClick }) => {
  const onClick = () => {
    onPostClick(post);
  };

  return <button onClick={onClick}>{post}</button>;
};

Conclusion

Rendering a list in React seems like a simple interview question at first. Sometimes candidates might get frustrated why they didn’t pass the interview despite being able to implement a working solution. Next time we encounter this question, make sure to communicate to the interviewer (and implement them if given the time) the different ways we can render a list like a pro.

const over let unless I'm forced to

Andrew Lee — Sun, 05 Dec 2021 07:59:30 +0000

In the beginning, this discussion wasn't even necessary. We only had one choice in JavaScript to store value (var). Nowadays I always reach for const unless I'm forced to.

This argument isn't as strong for JavaScript, since there are no known performance gains at the moment of using a constant (const) over a variable (let). This is not the case in other languages (i.e. Swift) and maybe JavaScript will have performance gains for constants in the future.

When am I forced to use let? If I find myself changing a previously declared constant, JavaScript will throw an error.

const x = "hi";
x = "bye";

// VM226:1 Uncaught TypeError: Assignment to constant variable

This way I don't bother with thinking about which declaration I should use, I'll be alerted when I have to by following a rule.

Arrays and Objects

What about arrays and objects? When we mutate an existing object or array, JavaScript will not give us a warning. This is because they are passed by reference.

In this case I still use const even if changes are being made.

const arr = [];
arr.push(1);

When I create a new array with the new changes (common practice in React to trigger state change), JavaScript will throw me a warning.

let arr = [];
arr = [...arr, 1];

In this case I will switch my const to a let.

Conclusion

const over let unless I'm forced to

I just let my tools let me know if a variable is necessary. It also makes sense to use a variable (let) when the value stored inside of it varies throughout the lifecycle of the program.