Like many developers, I started my AI journey with ChatGPT. It was amazing for quick coding help and debugging, but something was missing. Each conversation felt like starting from scratch – explaining my tech stack, business logic, and project goals over and over. It was like having a brilliant colleague with no memory of our previous work together.
Then I discovered Claude with Projects, and everything clicked. Imagine upgrading from a helpful coding assistant to having a dedicated technical architect who intimately knows your entire project. That’s the game-changing difference Projects made in my development workflow.
From Chat Assistant to Development Partner
The real magic happened when I realized Projects wasn’t just a chat history feature – it was a way to build a comprehensive project context that Claude could reference in every conversation. It transformed our interactions from isolated Q&A sessions into deeply contextualized collaborative development.
Understanding Project Artifacts
Projects have some practical limits that shape how we use them:
- Maximum 2GB total size for all files
- Maximum 100 files per project
- Files must be under 100MB each
- Currently supported formats: .txt, .md, .pdf, and common code files (.py, .js, etc.)
These constraints actually help us focus on what matters. The most valuable artifacts for your project typically include:
- Database schemas and data models
- API specifications
- Business rules and requirements
- Architecture decision records
- UI/UX mockups and wireframes
- Key configuration files
What About Your Codebase?
A natural question to have is whether to include your entire codebase in Projects. I hesitate to do that, as that’s not the best use of the storage limits. In addition, the pace of change for the codebase would force you to continuously manage changes in your repo and Projects Artifacts. If there was a way to reference the github repo – then that would be a totally different discussion.
Instead, focus on the high-level artifacts that define your system’s structure and behavior. The goal is to give Claude context about your system’s architecture and design, not every implementation detail.
The Power of Schema Context: A Real Example 🏢
I’m building a property management application using JHipster, and having the entity schemas in my Project has been a game-changer. Here’s our core Property entity:
entity Property {
propertyName String,
address String required,
propertyType PropertyType,
squareFootage Integer,
yearBuilt Integer,
pictureUrl String,
propertyStatus PropertyStatus,
propertySource PropertySource,
parcelNumber String,
lastSyncDate LocalDate,
numberOfBedrooms Integer,
numberOfBathrooms Float,
lotSize String,
propertyTaxId String
}How This Schema Supercharges Development
When this schema is in my Project, Claude can be a lot more realistic with the code that it generates. It won’t need to use hypothetical data model any more, but can instead directly reference my model:
1. Building UI Components
Me: “Can you create a property details card component that highlights key selling points?”
Claude: “I’ll create a card that organizes the property details in a user-friendly layout, grouping related information:”
import React from 'react';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Home, Ruler, Calendar, Bath, Bed } from 'lucide-react';
const PropertyCard = ({ property }) => {
const getStatusColor = (status) => {
const colors = {
AVAILABLE: 'bg-green-100 text-green-800',
RENTED: 'bg-blue-100 text-blue-800',
PENDING: 'bg-yellow-100 text-yellow-800',
MAINTENANCE: 'bg-red-100 text-red-800'
};
return colors[status] || 'bg-gray-100 text-gray-800';
};
return (
<Card className="w-full max-w-lg shadow-sm hover:shadow-md transition-shadow">
<CardHeader className="space-y-2">
<div className="flex justify-between items-start">
<h3 className="text-xl font-semibold">{property.propertyName}</h3>
<Badge className={getStatusColor(property.propertyStatus)}>
{property.propertyStatus}
</Badge>
</div>
<p className="text-gray-600">{property.address}</p>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-4">
<div className="flex items-center gap-2">
<Home className="w-5 h-5 text-gray-500" />
<div>
<p className="text-sm text-gray-600">Property Type</p>
<p className="font-medium">{property.propertyType}</p>
</div>
</div>
<div className="flex items-center gap-2">
<Ruler className="w-5 h-5 text-gray-500" />
<div>
<p className="text-sm text-gray-600">Size</p>
<p className="font-medium">
{property.squareFootage} sqft • {property.lotSize} lot
</p>
</div>
</div>
</div>
<div className="space-y-4">
<div className="flex items-center gap-2">
<div className="flex items-center">
<Bed className="w-5 h-5 text-gray-500" />
<span className="ml-1 font-medium">{property.numberOfBedrooms}</span>
<span className="mx-2">•</span>
<Bath className="w-5 h-5 text-gray-500" />
<span className="ml-1 font-medium">{property.numberOfBathrooms}</span>
</div>
</div>
<div className="flex items-center gap-2">
<Calendar className="w-5 h-5 text-gray-500" />
<div>
<p className="text-sm text-gray-600">Year Built</p>
<p className="font-medium">{property.yearBuilt}</p>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
);
};
export default PropertyCard;2. Building Search Features
Me: “I need a search filter component for the property listing page.”
Claude immediately knows what fields are available and their types, providing relevant filter options:
import React from 'react';
import { Select } from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import { Slider } from '@/components/ui/slider';
const PropertyFilters = ({ onFilterChange }) => {
return (
<div className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Select
name="propertyType"
onChange={onFilterChange}
placeholder="Property Type"
>
{/* Claude knows the enum values from schema */}
<option value="SINGLE_FAMILY">Single Family</option>
<option value="MULTI_FAMILY">Multi Family</option>
<option value="CONDO">Condo</option>
</Select>
<div className="space-y-2">
<label className="text-sm">Bedrooms</label>
<Select name="beds" onChange={onFilterChange}>
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
<option value="4">4+</option>
</Select>
</div>
<div className="space-y-2">
<label className="text-sm">Square Footage</label>
<Slider
defaultValue={[0, 5000]}
max={10000}
step={100}
className="mt-2"
onValueChange={(value) =>
onFilterChange({ target: { name: 'squareFootage', value }})
}
/>
</div>
</div>
</div>
);
};3. Form Validation
When building forms, Claude automatically knows:
- Which fields are required (like
address) - Appropriate input types (Integer for bedrooms)
- Date handling (for
lastSyncDate) - Enum validations (for
propertyType,propertyStatus,propertySource)
This context awareness means every suggestion is:
- Type-safe
- Schema-compliant
- Consistent with your data model
- Properly validated
Transforming Your Development Workflow
Projects has fundamentally changed how I work with AI. No more copying and pasting context in every new chat. No more explaining my project structure repeatedly. Each new conversation starts with Claude already understanding my project’s foundation.
The workflow becomes natural: as we develop new features or refine existing ones, we can easily add our work back into the Project artifacts. This creates a virtuous cycle where each interaction builds upon the last, making Claude an increasingly valuable development partner.
The best part? Instead of saying “Let me explain my project again,” you can jump straight to “Let’s build this feature.” And that’s when development with AI gets really exciting.
Fingers crossed for a better integration with git in the future. That would really accelerate the feature development to the next level. 🚀