Instructing Lovable to Use Specific Frameworks or Libraries

Why Lovable sometimes ignores your framework or library preferences

Lovable's AI generates code using its default stack: React, TypeScript, Tailwind CSS, and shadcn/ui. When you ask for a feature without specifying which library to use, Lovable picks whatever it considers the best fit — which may not match your preference. For example, asking 'add drag-and-drop to my board' might produce custom pointer event handlers instead of using the hello-pangea/dnd package you wanted. The AI does not remember preferences between sessions unless you write them down. If you told Lovable to use Zustand for state in one prompt, it might switch back to useState in the next prompt because the context window has moved past your earlier instruction. This is not a bug — it is how large language models work with conversation context. The permanent solution is AGENTS.md, a special file in your project root that Lovable reads at the start of every session. Put your library preferences there, and Lovable follows them consistently without you repeating yourself in every prompt.

• Prompt does not name the specific package — Lovable defaults to its built-in preferences
• Library preference was mentioned in an earlier prompt that has scrolled out of the context window
• No AGENTS.md file exists to persist technology choices across sessions
• Package name is misspelled or uses the wrong scope — Lovable cannot install a package it cannot find
• The requested package is incompatible with React or Vite — Lovable silently falls back to an alternative

Error messages you might see

Before you start

• A Lovable project open in the editor
• The exact npm package name you want to use (check npmjs.com for the correct name and scope)
• A clear idea of what feature the package should provide in your app

How to fix it

1# AGENTS.md
2
3## Technology Preferences
4
5- Use @tanstack/react-query for all data fetching and caching
6- Use zustand for global state management (not Redux or Context)
7- Use recharts for all charts and data visualization
8- Use @hello-pangea/dnd for drag-and-drop functionality
9- Use date-fns for date formatting and manipulation (not moment.js)
10- Use zod for all schema validation
11- Use react-hook-form with zod resolver for all forms
12
13## Code Style
14
15- Always use TypeScript strict mode
16- Prefer named exports over default exports
17- Use absolute imports with the @/ alias

// package.json — package is missing
{
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

// package.json — package is correctly installed
{
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "recharts": "^2.12.0"
  }
}

Complete code example

1# Project Technology Standards
2
3## Required Libraries
4
5Always use these packages for the specified purposes:
6
7| Purpose | Package | Notes |
8|---------|---------|-------|
9| Data fetching | @tanstack/react-query | Use useQuery and useMutation hooks |
10| Forms | react-hook-form + zod | Always use zodResolver for validation |
11| State management | zustand | For global state only; use useState for local |
12| Charts | recharts | Use ResponsiveContainer wrapper |
13| Dates | date-fns | Never use moment.js |
14| Drag and drop | @hello-pangea/dnd | For sortable lists and boards |
15| Animations | framer-motion | For page transitions and micro-interactions |
16| Icons | lucide-react | Already included via shadcn/ui |
17
18## Code Conventions
19
20- Use TypeScript strict mode for all files
21- Prefer named exports: export function Component() {}
22- Use the @/ import alias for all project imports
23- Place new components in src/components/
24- Place new pages in src/pages/
25- Place new hooks in src/hooks/
26- Place new utility functions in src/lib/
27
28## Do Not Use
29
30- Redux (use zustand instead)
31- Axios (use @tanstack/react-query with fetch)
32- moment.js (use date-fns)
33- CSS modules (use Tailwind CSS)
34- jQuery (not compatible with React)

Best practices to prevent this

• Always include the exact npm package name (with scope like @tanstack/react-query) in your prompt — Lovable cannot guess from descriptions alone
• Create an AGENTS.md file early in your project to establish technology preferences before Lovable generates code with its defaults
• Check npmjs.com for the correct package name and React 18 compatibility before asking Lovable to install it
• Include version requirements when precision matters: 'Use recharts version 2.x' prevents the AI from targeting outdated APIs
• List packages you do NOT want in AGENTS.md (like moment.js or jQuery) to prevent Lovable from defaulting to them
• When requesting a feature, describe both the library AND the desired behavior: 'Use framer-motion to animate page transitions with a fade effect'
• Verify the generated import paths match the package documentation — Lovable sometimes uses outdated or incorrect import syntax

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns