First Iteration

Prompt

I have a JSON based api http://localhost:3000/dashboard/get_timings?project_id=${project_id}&identifier=${metric_name}&start_time=${iso8601_date}&end_time=${iso8601_date} that returns a set of values associated with a timestamp.

The response format is {"timings": [{"timestamp": iso8601_date, "value": float_value}, ...]}

Generate a web page that shows a line chart loading the data from such an API.
On load the data for the last 15 minutes should be fetched.
The graph should have the timestamp on X axis and the values on the Y axis.

The chart should also have 2 buttons to Zoom-In and Zoom-Out. Zoom levels should be: 15 minutes, 30 minutes, 1 hour, 8 hours.

There should also be 2 buttons, one that moves back in time of 50% of the current zoom level and one that moves forward by 50% of the current zoom level. For example if the current zoom is 30 minutes, clicking back should move back by 15 minutes.

Changing the zoom level should also change the scale of the Y axis

Result

The query provides no answer crashing with

Artifact failed to load
The generated artifact uses libraries we don't support: dayjs

Claude somehow decided by itself to use something that it then causes an error to itself 🤷🏻

Second Iteration

I asked for a plain Javascript answer, as it decided to use Typescript and React when I never asked for it.

Prompt

provide a plain Javascript answer, feel free to use libraries available via CDN, but do not require any transpiling

Result

1. The generated API call for the JSON endpoint was wrong, Claude stated It fetches data from the provided API endpoint, using the projectId, metricName, start_time, and end_time parameters. The initial load fetches data for the last 15 minutes. and indeed generated a call passing projectId=X and metricName=X when explicitly stated in my first prompt that the parameters are named project_id=X and identifier=X
2. It generated again a React component. I guess my prompt was open to interpretation and React could be used without requiring server side transpiling, but the result was broken in any case failing to render with a SyntaxError: Unexpected token '<' error.

Third Iteration

Prompt

the parameters in the JSON API are named project_id and identifier. Also the React component doesn't render with a "SyntaxError: Unexpected token '<'" error

Result

The parameters in the fetch call are now correct, but the react component has the same error as before. Claude replaced

      ReactDOM.render(
        <DashboardTimingsChart projectId="myProjectId" metricName="myMetricName" />,
        document.getElementById('root')
      );

with

    ReactDOM.render(
      React.createElement(DashboardTimingsChart, { project_id: 'myProjectId', identifier: 'myMetricName' }),
      document.getElementById('root')
    );

but the error was in the component render function itself so it didn't fix anything.

Fourth Iteration

Prompt

The error is in the render method itself,

Result

Claude replaced the whole render function, migrating it from JSX to a set of React.createElement.

The html error was now gone, but the Javascript still didn't work. It errored with ReferenceError: Recharts is not defined in

      const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } = Recharts;

PS: Rechart script was correctly included in the header

<script src="https://unpkg.com/recharts/umd/Recharts.js"></script>

Fifth Iteration

Prompt

It gives an ReferenceError: Recharts is not defined error

Result

Claude replaced

  <script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>

with

  <script src="https://unpkg.com/recharts/umd/Recharts.js"></script>

which obviously didn't fix anything as it's just the not minified version.

Sixth Iteration

Prompt

maybe you want to use a <script type="module"> to import things from Recharts?

Result

Claude updated the codebase to correctly import things from Rechart module, but the code still didn't work as it was using a class that didn't exist in Rechart

SyntaxError: The requested module 'https://unpkg.com/[email protected]/umd/Recharts.js' does not provide an export named 'CartesianGrid' (at 672e440205f1826c5053a874:97:49)