Welcome to Framer, Cursor!

framer

cursor.tsx

import { motion } from "framer-motion"

type ButtonProps = {
  onClick?: () => void
  children: React.ReactNode
  disabled?: boolean
  className?: string
}

export function Button({ onClick, children, disabled = false, className = "" }: ButtonProps) {
  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: "spring", stiffness: 400, damping: 17 }}
      onClick={onClick}
      disabled={disabled}
      className={cn(
        "rounded-md bg-primary px-4 py-2 font-medium text-black shadow-sm",
        "hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
    >
      {children}
    </motion.button>
  )
}

chat

composer

cursor.tsx

Current File

Could you make it easier to switch certificates in the transport listeners?

I'll help modify the code to make certificate switching more flexible. The main changes will be to enhance the lsAccept trait and modify how certificates

are handled in the TlsSettings. Here are the key changes:

cursor.tsx

Ask

Copy

Apply

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
  onClick={onClick}
>
  {children}
</motion.button>

cursor.tsx

Current File

Ask follow up

gpt-4o

⮐

chat

⌘

⮐

codebase

framer

cursor.tsx

import { motion } from "framer-motion"

type ButtonProps = {
  onClick?: () => void
  children: React.ReactNode
  disabled?: boolean
  className?: string
}

export function Button({ onClick, children, disabled = false, className = "" }: ButtonProps) {
  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: "spring", stiffness: 400, damping: 17 }}
      onClick={onClick}
      disabled={disabled}
      className={cn(
        "rounded-md bg-primary px-4 py-2 font-medium text-black shadow-sm",
        "hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
    >
      {children}
    </motion.button>
  )
}

chat

composer

cursor.tsx

Current File

Could you make it easier to switch certificates in the transport listeners?

I'll help modify the code to make certificate switching more flexible. The main changes will be to enhance the lsAccept trait and modify how certificates

are handled in the TlsSettings. Here are the key changes:

cursor.tsx

Ask

Copy

Apply

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
  onClick={onClick}
>
  {children}
</motion.button>

cursor.tsx

Current File

Ask follow up

gpt-4o

⮐

chat

⌘

⮐

codebase

framer

cursor.tsx

import { motion } from "framer-motion"

type ButtonProps = {
  onClick?: () => void
  children: React.ReactNode
  disabled?: boolean
  className?: string
}

export function Button({ onClick, children, disabled = false, className = "" }: ButtonProps) {
  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: "spring", stiffness: 400, damping: 17 }}
      onClick={onClick}
      disabled={disabled}
      className={cn(
        "rounded-md bg-primary px-4 py-2 font-medium text-black shadow-sm",
        "hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
    >
      {children}
    </motion.button>
  )
}

chat

composer

cursor.tsx

Current File

Could you make it easier to switch certificates in the transport listeners?

I'll help modify the code to make certificate switching more flexible. The main changes will be to enhance the lsAccept trait and modify how certificates

are handled in the TlsSettings. Here are the key changes:

cursor.tsx

Ask

Copy

Apply

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
  onClick={onClick}
>
  {children}
</motion.button>

cursor.tsx

Current File

Ask follow up

gpt-4o

⮐

chat

⌘

⮐

codebase

Download for Mac

Watch Demo

Download for Mac

Watch Demo

Trusted by engineers at

Tab, tab, tab

Cursor lets you breeze through changes by predicting your next edit.

Tab, tab, tab

Cursor lets you breeze through changes by predicting your next edit.

Tab, tab, tab

Cursor lets you breeze through changes by predicting your next edit.

todo.tsx

import React, { useState } from "react"

const TodoComponent: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([])
  const [input, setInput] = useState<string>("")

  return (
    <>
      <button onClick={() => setTodos([...todos, input])}>Add</button>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </>
  )
}

export default TodoComponent

todo.tsx

import React, { useState } from "react"

const TodoComponent: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([])
  const [input, setInput] = useState<string>("")

  return (
    <>
      <button onClick={() => setTodos([...todos, input])}>Add</button>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </>
  )
}

export default TodoComponent

todo.tsx

import React, { useState } from "react"

const TodoComponent: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([])
  const [input, setInput] = useState<string>("")

  return (
    <>
      <button onClick={() => setTodos([...todos, input])}>Add</button>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </>
  )
}

export default TodoComponent

todo.tsx

import React, { useState } from "react"

const TodoComponent: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([])
  const [input, setInput] = useState<string>("")

  return (
    <>
      <button onClick={() => setTodos([...todos, input])}>Add</button>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </>
  )
}

export default TodoComponent

todo.tsx

import React, { useState } from "react"

const TodoComponent: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([])
  const [input, setInput] = useState<string>("")

  return (
    <>
      <button onClick={() => setTodos([...todos, input])}>Add</button>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </>
  )
}

export default TodoComponent

chat

composer

How could I make it easier to switch certificates in the transport listeners?

cursor.tsx

Current File

I'll help modify the code to make certificate switching more flexible. The main changes will be to enhance the lsAccept trait and modify how certificates

are handled in the settings. Here are the key changes:

cursor.tsx

Ask

Copy

Apply

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
  onClick={onClick}
>
  {children}
</motion.button>

cursor.tsx

Current File

Ask follow up

gpt-4o

⮐

chat

⌘

⮐

codebase

todo.tsx

import React, { useState } from "react"

const TodoComponent: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([])
  const [input, setInput] = useState<string>("")

  return (
    <>
      <button onClick={() => setTodos([...todos, input])}>Add</button>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </>
  )
}

export default TodoComponent

chat

composer

How could I make it easier to switch certificates in the transport listeners?

cursor.tsx

Current File

I'll help modify the code to make certificate switching more flexible. The main changes will be to enhance the lsAccept trait and modify how certificates

are handled in the settings. Here are the key changes:

cursor.tsx

Ask

Copy

Apply

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
  onClick={onClick}
>
  {children}
</motion.button>

cursor.tsx

Current File

Ask follow up

gpt-4o

⮐

chat

⌘

⮐

codebase

todo.tsx

import React, { useState } from "react"

const TodoComponent: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([])
  const [input, setInput] = useState<string>("")

  return (
    <>
      <button onClick={() => setTodos([...todos, input])}>Add</button>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </>
  )
}

export default TodoComponent

chat

composer

How could I make it easier to switch certificates in the transport listeners?

cursor.tsx

Current File

I'll help modify the code to make certificate switching more flexible. The main changes will be to enhance the lsAccept trait and modify how certificates

are handled in the settings. Here are the key changes:

cursor.tsx

Ask

Copy

Apply

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
  onClick={onClick}
>
  {children}
</motion.button>

cursor.tsx

Current File

Ask follow up

gpt-4o

⮐

chat

⌘

⮐

codebase

todo.tsx

import React, { useState } from "react"

const TodoComponent: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([])
  const [input, setInput] = useState<string>("")

  return (
    <>
      <button onClick={() => setTodos([...todos, input])}>Add</button>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </>
  )
}

export default TodoComponent

chat

composer

How could I make it easier to switch certificates in the transport listeners?

cursor.tsx

Current File

I'll help modify the code to make certificate switching more flexible. The main changes will be to enhance the lsAccept trait and modify how certificates

are handled in the settings. Here are the key changes:

cursor.tsx

Ask

Copy

Apply

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
  onClick={onClick}
>
  {children}
</motion.button>

cursor.tsx

Current File

Ask follow up

gpt-4o

⮐

chat

⌘

⮐

codebase

Apply instantly

Get answers from your codebase or refer to files or docs. Use the model’s code in one click.

Apply instantly

Get answers from your codebase or refer to files or docs. Use the model’s code in one click.

Apply instantly

Get answers from your codebase or refer to files or docs. Use the model’s code in one click.

Codebase knowledge

Cursor lets you write code using simple instructions. Update entire classes or functions with a simple prompt.

Codebase knowledge

Cursor lets you write code using simple instructions. Update entire classes or functions with a simple prompt.

Codebase knowledge

Cursor lets you write code using simple instructions. Update entire classes or functions with a simple prompt.

todo.tsx

import React, { useState } from "react"

const TodoComponent: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([])
  const [input, setInput] = useState<string>("")

  return (
    <>
      <button onClick={() => setTodos([...todos, input])}>Add</button>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </>
  )
}

export default TodoComponent

Parellize this because the api is slow

Submit Edit

gpt-4o

todo.tsx

import React, { useState } from "react"

const TodoComponent: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([])
  const [input, setInput] = useState<string>("")

  return (
    <>
      <button onClick={() => setTodos([...todos, input])}>Add</button>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </>
  )
}

export default TodoComponent

Parellize this because the api is slow

Submit Edit

gpt-4o

todo.tsx

import React, { useState } from "react"

const TodoComponent: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([])
  const [input, setInput] = useState<string>("")

  return (
    <>
      <button onClick={() => setTodos([...todos, input])}>Add</button>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </>
  )
}

export default TodoComponent

Parellize this because the api is slow

Submit Edit

gpt-4o

todo.tsx

import React, { useState } from "react"

const TodoComponent: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([])
  const [input, setInput] = useState<string>("")

  return (
    <>
      <button onClick={() => setTodos([...todos, input])}>Add</button>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </>
  )
}

export default TodoComponent

Parellize this because the api is slow

Submit Edit

gpt-4o

Build software faster

Intelligent, fast, and familiar, Cursor is the best way to code with AI.

Frontier Intelligence

Private and Secure

With Privacy Mode, your code isonly stored locally. Cursor isSOC 2 certified.

Private and Secure

With Privacy Mode, your code isonly stored locally. Cursor isSOC 2 certified.

Private and Secure

With Privacy Mode, your code isonly stored locally. Cursor isSOC 2 certified.

Private and Secure

With Privacy Mode, your code isonly stored locally. Cursor isSOC 2 certified.

Feels Familiar

Import all your extensions, themes, and keybindings in one click.

Feels Familiar

Import all your extensions, themes, and keybindings in one click.

Feels Familiar

Import all your extensions, themes, and keybindings in one click.

Feels Familiar

Import all your extensions, themes, and keybindings in one click.

Loved by developers

Developers all around the world reach for Cursor by choise.

Alex McCaw

I really like how Cursor suggests edits to existing code. It noticed I was inconsistent with my markup and popped up this suggestion that matched my other items!

Alex McCaw

I really like how Cursor suggests edits to existing code. It noticed I was inconsistent with my markup and popped up this suggestion that matched my other items!

Alex McCaw

I really like how Cursor suggests edits to existing code. It noticed I was inconsistent with my markup and popped up this suggestion that matched my other items!

Alex McCaw

I really like how Cursor suggests edits to existing code. It noticed I was inconsistent with my markup and popped up this suggestion that matched my other items!

Sam Whitmore

started using Cursor yesterday & i'm blown away. it's how Copilot should feel. i'm completely off VSCode now.

Sam Whitmore

started using Cursor yesterday & i'm blown away. it's how Copilot should feel. i'm completely off VSCode now.

Sam Whitmore

started using Cursor yesterday & i'm blown away. it's how Copilot should feel. i'm completely off VSCode now.

Sam Whitmore

started using Cursor yesterday & i'm blown away. it's how Copilot should feel. i'm completely off VSCode now.

Wes Bos

I really like how Cursor suggests edits to existing code. It noticed I was inconsistent with my markup and popped up this suggestion that matched my other items!

Wes Bos

I really like how Cursor suggests edits to existing code. It noticed I was inconsistent with my markup and popped up this suggestion that matched my other items!

Wes Bos

I really like how Cursor suggests edits to existing code. It noticed I was inconsistent with my markup and popped up this suggestion that matched my other items!

Wes Bos

I really like how Cursor suggests edits to existing code. It noticed I was inconsistent with my markup and popped up this suggestion that matched my other items!

Johannes Schickling

After many recommendations, I finally switched from VSC to Cursor and ... wow! It's absolutely incredible. If you like Copilot (or if you don't), you'll be blown away by Cursor. There is no going back. 🤯

Johannes Schickling

Marc Köhlbrugge

Cursor's new auto-complete is insane You no longer need to prompt it. It predicts what code you want based on what you're doing. Accept by hitting tab In this video I change the CSS class of one link. I then simply keep hitting tab to make the same change to all other links

Marc Köhlbrugge

shadcn

The most useful AI tool that I currently pay for is, hands down, is Cursor It's fast, autocompletes when and where you need it to, handles brackets properly, sensible keyboard shortcuts, bring- your-own-model...everything is well put together.

shadcn

We write weekly

Compiled notes from the team

Blog

Supermaven Joins Cursor

We're teaming up to build the next phase of AI coding.

Shadow Workspace

Hidden Electron windows and kernel-level folder proxies to let AIs iterate on code without affecting the user.

We raised $60m

Our goal is to create a magical tool with the aim of writing the world's software.

Our Problems

A list of problems we are excited to solve for Cursor.

More Problems

Several exciting problem areas for the next phase of AI-programming.

More Problems

Several exciting problem areas for the next phase of AI-programming.

Supermaven Joins Cursor

We're teaming up to build the next phase of AI coding.

Posted By Michael 2 days ago

I’m excited to announce that Supermaven is joining Cursor! Supermaven is a fast, context-aware copilot.

Its creator, Jacob Jackson, kickstarted the modern wave of AI coding tools by inventing Tabnine in 2019 and through pioneering work at OpenAI.

Why join forces? We have a lot to do, and it seems like we can build a more useful product, faster, together. Each of us believes that AI makes possible a much better way to build software. And that purpose-built models, a tailored editing experience, and lots of clever ideas are necessary to get there.

What should we expect going forward? Lots of product improvements! For instance, we hope the not-too-distant future will bring a new version of our Tab model that’s fast, context-aware, and highly intelligent, especially at sequences of long changes (“tab, tab, tab”).

Will the plugin remain up? Yes! We’re happy to report that the Supermaven plugin will remain maintained, though Cursor will be the core focus. This is roughly the same as Supermaven’s previous plan: the team had shifted focus to an editor, because extension APIs were blocking the next useful things that they wanted to build.

Welcome Jacob and the Supermaven team! Together, we hope to build the best tool for professional programmers and invent a faster, more delightful way to build software. Onwards!

Blog

Supermaven Joins Cursor

We're teaming up to build the next phase of AI coding.

Shadow Workspace

Hidden Electron windows and kernel-level folder proxies to let AIs iterate on code without affecting the user.

We raised $60m

Our goal is to create a magical tool with the aim of writing the world's software.

Our Problems

A list of problems we are excited to solve for Cursor.

More Problems

Several exciting problem areas for the next phase of AI-programming.

More Problems

Several exciting problem areas for the next phase of AI-programming.

Supermaven Joins Cursor

We're teaming up to build the next phase of AI coding.

Posted By Michael 2 days ago

I’m excited to announce that Supermaven is joining Cursor! Supermaven is a fast, context-aware copilot.

Its creator, Jacob Jackson, kickstarted the modern wave of AI coding tools by inventing Tabnine in 2019 and through pioneering work at OpenAI.

Welcome Jacob and the Supermaven team! Together, we hope to build the best tool for professional programmers and invent a faster, more delightful way to build software. Onwards!

Blog

Supermaven Joins Cursor

We're teaming up to build the next phase of AI coding.

Shadow Workspace

Hidden Electron windows and kernel-level folder proxies to let AIs iterate on code without affecting the user.

We raised $60m

Our goal is to create a magical tool with the aim of writing the world's software.

Our Problems

A list of problems we are excited to solve for Cursor.

More Problems

Several exciting problem areas for the next phase of AI-programming.

More Problems

Several exciting problem areas for the next phase of AI-programming.

Supermaven Joins Cursor

We're teaming up to build the next phase of AI coding.

Posted By Michael 2 days ago

I’m excited to announce that Supermaven is joining Cursor! Supermaven is a fast, context-aware copilot.

Its creator, Jacob Jackson, kickstarted the modern wave of AI coding tools by inventing Tabnine in 2019 and through pioneering work at OpenAI.

Welcome Jacob and the Supermaven team! Together, we hope to build the best tool for professional programmers and invent a faster, more delightful way to build software. Onwards!

Blog

Supermaven Joins Cursor

We're teaming up to build the next phase of AI coding.

Shadow Workspace

Hidden Electron windows and kernel-level folder proxies to let AIs iterate on code without affecting the user.

We raised $60m

Our goal is to create a magical tool with the aim of writing the world's software.

Our Problems

A list of problems we are excited to solve for Cursor.

More Problems

Several exciting problem areas for the next phase of AI-programming.

More Problems

Several exciting problem areas for the next phase of AI-programming.

Supermaven Joins Cursor

We're teaming up to build the next phase of AI coding.

Posted By Michael 2 days ago

I’m excited to announce that Supermaven is joining Cursor! Supermaven is a fast, context-aware copilot.

Its creator, Jacob Jackson, kickstarted the modern wave of AI coding tools by inventing Tabnine in 2019 and through pioneering work at OpenAI.

Welcome Jacob and the Supermaven team! Together, we hope to build the best tool for professional programmers and invent a faster, more delightful way to build software. Onwards!

Try Cursor Now

Download for Free