Matt Carroll

My issue with Chakra 3 is that llm's are bad at it

Title says it all, but in general i find that llm's are pretty bad with v3 components.

both prop names and the general composition of components seem to have sufficient variance from v2 that the llm's often use the "wrong" paradigm.

i like chakra, how can i use my tools more effectively so that it works well with gen ai?

do you have context you set, or do you constantly mentioned you are using v3?

appreciate any tips :)

Add a comment

Replies

Best
Raj

Since you're using chatGPT, have you tried setting up custom instructions to provide permanent context about V3?

Seems like Chakra docs doesn't have a standalone docs page for V3 yet, but I would expect providing the migration docs at least should make 4o aware of the context window it's working with.

Also, I think this is where something like @Cursor works better as you can set it up to reference the docs for any conversations related to Chakra in .cursorrules.


Matt Carroll

@rajsb_  these are good tips! I was using the project feature and added some instructions there, but i dont always remember to start conversations in the project. I think I will give @Windsurf a try this week, so maybe I will have better luck there.

steve beyatte

Does Claude 3.5 and 3.7 also perform poorly here? Anecdotally it seems like more people use Claude for code than 4o. It's the default in Cursor/Windsurf/Supermaven as far as I know.

Matt Carroll

might help to clarify my workflow, but i often just ask 4o to build a page (giving it some types for the props and things like that).

give me a page that shows transactions in a table using chakra v3 components. here is the function signature: {blah}


Nuls Brawl

To get better AI-generated code for Chakra UI v3, always specify that you're using v3 in your prompts, provide relevant code snippets for context, and cross-check with the official docs. Be explicit about changes, like using useStyleConfig and defineStyleConfig instead of extendTheme, and break down requests into steps rather than asking for a full component at once. Mentioning modern best practices can also help nudge the AI toward newer patterns.