[mcp] Prompt improvements for smarter tool composition

[poteto]

Our runtime results are still bogus, but so far this tweak let's the llm use the tools a little more intelligently.

example:

import React from 'react';

function App() {
  const [count, setCount] = React.useState(0);
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    const processData = () => {
      console.log("Processing data...");
      const newData = [];
      for (let i = 0; i < 1000000000; i++) {
        newData.push({ id: i, value: Math.random() * count });
      }
      return newData;
    };

    const processedData = processData();
    setData(processedData);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Data Length: {data.length}</p>
      <ul>
        {data.slice(0, 5).map((item) => (
          <li key={item.id}>Item {item.id}: {item.value.toFixed(2)}</li>
        ))}
      </ul>
    </div>
  );
};

why is this component slow? use the react tools to figure this out.

I'll analyze why this component is slow using the React tools. Let's first evaluate the performance of the original code.

[review-react-runtime ...]

The performance measurement tool timed out, which is a strong indication of just how severe the performance issue is in this component. Let's now try to compile the code to see if React Compiler can identify any issues:

[compile...]

Now I understand the issue. Let's analyze why this component > is extremely slow:
Main Performance Issues:

Massive Data Processing: The component is trying to create an array with a billion (1,000,000,000) objects in the processData function. This is an enormous amount of data that will:

Consume massive amounts of memory
Take an extremely long time to process
Likely crash the browser

Unnecessary Recalculation: The effect depends on [count], meaning every time the count changes, it will reprocess this enormous dataset.
Inefficient Data Handling: Even though only 5 items are displayed, the component processes a billion items.

Let's fix these issues:

[compile...]

Now let's check if our modified code performs better:

[review-react-runtime...]

Excellent! The performance has dramatically improved. Now let's check the React documentation to make sure we're following the best practices:

[query-react-dev-docs...]

(hit the maximum length conversation limit because i'm on a free plan)