Home
Home
About
About
Research
Research
Blog
Blog
Jobs
Jobs
Join waitlist
Software that builds software
Teaching AI to act in its natural
environment, the computer.
Code completion that operates across your repository.
Magic helps you edit code across your entire repository.
function
LondonTemperature
() {
const
WEATHER_URL
= "
...
";
const
[
temperature
,
setTemperature
] =
useState
();
useEffect
(() => {
fetch
(
WEATHER_URL
)
.then(response => response.json())
.then(({
daily
}) =>
setTemperature
(
daily
.temperature_2m_max))
}, []);
return
<
div
className
=
"p-4 border rounded"
>
The highest temperature in London today is
<
span
className
=
"font-bold"
> {
temperature
}°C</
span
>.
</
div
>;
}
suggested by
Join Waitlist
For decades, technology has been just a tool. Soon, it will be your partner.
What if you had a colleague inside your computer? We're working on
fundamental research challenges
to make this possible, and
we're hiring!
Hey, what is this code doing?
Seems to be a calculator app written in React.
Can we add multiplication and division?
Sure thing!
Hey, what is this code doing?
function
AlgebraModule
() {
...
return
<>
<
Button
operation
={(a, b) => a + b}
name
=
"Add"
/>
<
Button
operation
={(a, b) => a - b}
name
=
"Subtract"
/>
<
Button
operation
={(a, b) => a * b}
name
=
"Multiply"
/>
<
Button
operation
={(a, b) => a / b}
name
=
"Divide"
/>
<
div
>
{result}
</
div
>
</>;
}
Hey, what is this code doing?
Seems to be a calculator app written in React.
Can we add multiplication and division?
Sure thing.
Division by zero leads to an error. Should we add an error?
Yes, let’s do that.
Also, put the inputs in one line and the buttons in a grid.
Done.
Hey, what is this code doing?
function
AlgebraModule
() {
const
[numberA, setNumberA] =
useState
(0);
const
[numberB, setNumberB] =
useState
(0);
const
[result, setResult] =
useState
(0);
function
Button
(
...
) {
...
};
function
Input
(
...
) {
...
};
return
<
div
>
<
div
className
=
"flex my-4"
/>
<
Input
getter
={numberA}
setter
={setNumberA}/>
<
Input
getter
={numberB}
setter
={setNumberB}/>
</
div
>
<
div
className
=
"grid grid-cols-2 gap-4 my-4"
>
<
Button
operation
={(a, b) => a + b}
name
=
"Add"
/>
<
Button
operation
={(a, b) => a - b}
name
=
"Subtract"
/>
<
Button
operation
={(a, b) => a * b}
name
=
"Multiply"
/>
<
Button
operation
={(a, b) => a / b}
name
=
"Divide"
/>
</
div
>
{
result
===
NaN
? <
div
className
=
"text-error text-xl"
>
Error: The result is not a number.
</
div
>
:
<
div
className
=
"
text-center p-4 font-bold"
/>
{result}
</
div
>
}
</
div
>;
}