AI tools can accelerate a hackathon, but only if the workflow stays disciplined.
The wrong way: open ten tools, paste random prompts, chase generated code, lose the architecture.
The right way: choose one primary editor, one primary model, one assistant for review, and one deployment target.
This section goes deeper — how to actually set up each tool, when to trust AI and when to override it, and how to stay productive when the AI generates nonsense.
| Tool | Strengths | Limitations | Best workflow |
|---|---|---|---|
| Cursor | Fast coding inside the editor, strong AI assist | Can tempt over-generation | Use for implementation and refactor support |
| Windsurf | Agentic coding workflow | Needs clear task boundaries | Use for multi-file changes |
| Copilot | Familiar, reliable autocomplete | Less opinionated workflow support | Use for fast inline coding |
| Claude | Strong reasoning and writing | Not a full editor by itself | Use for architecture, debugging, and docs |
| Gemini | Good for multimodal and broad assistance | Workflow varies by product surface | Use for planning and research support |
| OpenRouter | Access to multiple models | Need to manage model choice | Use for flexible model routing |
| Bolt | Fast app scaffolding | Can be limiting for deep customization | Use for quick prototypes |
| Lovable | Fast product generation | Less control than coding directly | Use for landing pages and early MVPs |
| v0 | UI generation for React patterns | UI-first, not full system design | Use for clean components and pages |
| Firebase Studio | Firebase-oriented app flow | Best if you stay in the Firebase ecosystem | Use for Firebase-heavy products |
| Replit | Fast online development | May be less ideal for complex local setups | Use for quick, shareable prototypes |
| Codeium | AI assistance and completion | Different strengths depending on environment | Use for coding support |
| Continue.dev | Open-source AI assistant workflow | Requires setup | Use for customizable local workflows |
| Aider | Git-aware coding assistant | Best with disciplined prompts | Use for codebase edits and refactors |
| RooCode | Agentic coding workflow | Requires task clarity | Use for structured implementation |
| Cline | Autonomous coding agent | Can overshoot scope | Use for large tasks with guardrails |
flowchart TD
A[Plan in Claude] --> B[Generate UI in v0]
B --> C[Implement in Cursor]
C --> D[Connect model with OpenRouter]
D --> E[Store data in Supabase]
E --> F[Deploy on Vercel]
Note (verified Sept 2026): model names and mode names change every few months. Pick a current frontier model in Settings → Models and use the current multi-file / agent mode — the workflow below stays the same.
Install and configure:
.cursorrules / project-rules file in the project root:# Project rules
- Use TypeScript with strict mode
- Use Tailwind CSS for styling
- Use Next.js App Router
- Prefer server components over client components
- Use Supabase for data and auth
- No comments unless the logic is non-obvious
Keyboard shortcuts to know (verify in-app — they get remapped):
Pro tip: Before asking Cursor to generate code, open the relevant files first. Cursor uses the open files as context. If you have the wrong file open, you’ll get the wrong code.
Editor autocomplete is table stakes now. The win is a tight agent loop:
README, the stack doc, and the
target files. Paste the error + the failing test, not just “it broke.”npm run build / pytest and paste the
output” catches 80% of agent hallucinations.app/, components/, lib/ —
keep auth, migrations, .env* human-reviewed.git commit after each working step so you can
git revert a bad agent run in seconds.Suggested split for a team of 3: one person drives the agent in the editor, one reviews every diff + runs the app, one owns docs/pitch/deploy. Rotate every 4–6 hours so nobody “vibes” code they can’t explain to judges.
If you wire model-to-tool protocols (MCP servers, function calling):
rm -rf, no auto-deploy.?demo=1 (see 10-deployment-mastery/).What Copilot does best: autocomplete, small function completion, boilerplate generation, test writing.
What it does poorly: architecture decisions, multi-file refactors, debugging complex state.
Workflow:
# Good prompt for Copilot:
def calculate_bmi(weight_kg, height_m):
# Calculate BMI and return category
Copilot will generate the formula and category logic. Review it, then move on.
Claude is your architect, debugger, and documentation writer. Use it in a browser tab or the Claude app alongside your editor.
Architecture prompt:
I'm building a [type] app for [user] that [core action].
Tech stack: Next.js, Supabase, Tailwind, Vercel.
Give me:
1. The database schema (Supabase SQL)
2. The main components and their responsibilities
3. The API routes I need
4. The order to build things in (what comes first)
Keep it practical for a hackathon — skip auth complexity if it's not the core feature.
Debugging prompt:
Here's the error: [paste error]
Here's the code: [paste relevant code]
Here's what I expected: [describe expected behavior]
Here's what actually happens: [describe actual behavior]
What's wrong and how do I fix it?
v0 generates React components from text descriptions. It’s best for landing pages, dashboards, and common UI patterns.
What to prompt:
A dashboard page for a habit tracker app.
Shows a grid of habit cards with streak counts,
a weekly progress chart, and a "add new habit" button.
Clean, modern design with subtle gradients.
Use Tailwind CSS and shadcn/ui components.
What v0 does well:
What v0 does poorly:
Workflow: Generate with v0 → copy to your project → customize colors and spacing → connect to your data → deploy.
Run through this for every chunk of AI-generated code. It takes 2 minutes and saves you hours of debugging.
Does it actually work? Run it. Don’t assume.
Are there hardcoded values? Replace any localhost:3000, test@email.com, or dummy API keys with environment variables.
Is error handling present? AI code often has happy-path-only logic. Add try/catch blocks and error states.
Are imports correct? AI sometimes imports from packages you haven’t installed or from wrong paths.
Is the data flow clear? Trace the data from input to output. If you can’t explain it, the judges can’t follow it.
Are there unused variables or functions? Clean them up. Dead code confuses everyone.
Is the styling consistent? AI mixes Tailwind classes, inline styles, and CSS modules. Pick one approach.
Are there any security issues? Check for exposed API keys, SQL injection, or XSS vulnerabilities.
Does it handle edge cases? What happens with empty arrays, null values, or long strings?
Would you be embarrassed to explain this line to a judge? If yes, rewrite it or add a comment.
Sometimes the AI gives you garbage. Here’s how to keep moving.
What to do: Read the error message. Seriously. 80% of the time, it tells you exactly what’s wrong. Fix the first error, then rebuild. Errors often cascade.
What to do: Stop prompting. Write the code yourself. Even if it’s ugly. A working ugly function beats a non-working elegant one.
What to do: Skip it. Use something you know. The hackathon isn’t the time to learn a new library from scratch.
What to do: This is the most dangerous scenario. The code looks right but has a logic bug. Test it with real data, not just “does it compile.”
What to do: Simplify your architecture. If the AI can’t generate coherent code for it, a judge probably can’t follow it either.
Keep these patterns ready for when you need to write code without AI help:
// Basic CRUD operations
async function fetchAll(endpoint) {
const res = await fetch(`/api/${endpoint}`);
return res.json();
}
async function createOne(endpoint, data) {
const res = await fetch(`/api/${endpoint}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
return res.json();
}
// Simple state management
function useState(initial) {
let value = initial;
const subscribers = [];
return {
get: () => value,
set: (newVal) => {
value = newVal;
subscribers.forEach(fn => fn(value));
},
subscribe: (fn) => subscribers.push(fn),
};
}
// Basic form handler
function handleForm(form, onSubmit) {
form.addEventListener('submit', (e) => {
e.preventDefault();
const data = Object.fromEntries(new FormData(form));
onSubmit(data);
});
}
These prompts are tuned for hackathon speed. Copy them, customize the brackets.
Create a Next.js 14 app with App Router, TypeScript, Tailwind CSS, and Supabase.
Set up a basic project structure with:
- app/ directory with layout.tsx and page.tsx
- lib/supabase.ts for client setup
- components/ directory
- .env.example with required variables
Include a basic auth check on the dashboard page.
Design a Supabase SQL schema for a [type] app.
Tables needed:
- [describe entities]
Include foreign keys, indexes, and RLS policies.
Keep it simple — this is a hackathon, not a production system.
Create a Next.js API route at app/api/[endpoint]/route.ts that:
- GET: fetches [data] from Supabase
- POST: creates a new [item] with validation
Include error handling and proper status codes.
Build a dashboard page that shows:
- A header with the user's name
- 3 metric cards (total items, active items, completed)
- A table of recent items
- A "create new" button
Use Tailwind CSS. Make it responsive.
Create a form component for [purpose] with:
- [list fields]
- Client-side validation
- Loading state during submission
- Success/error feedback
Use controlled inputs with useState.
Add Supabase auth to this Next.js app:
- Login page with email/password
- Protected dashboard route
- Auth context for the whole app
- Logout functionality
Redirect unauthenticated users to login.
Integrate [API name] into the app:
- Create a server-side API route that calls [API]
- Pass the API key from environment variables
- Add error handling and loading states
- Cache the response for 5 minutes
Create a Recharts bar chart that displays [data].
Use these colors: [colors]
Make it responsive and add a tooltip.
Include a legend if there are multiple series.
Make this page mobile responsive.
Current issues: [list problems]
Keep the desktop layout but stack elements vertically on mobile.
Use Tailwind responsive prefixes (sm:, md:, lg:).
This code has a bug:
[paste code]
Expected behavior: [describe]
Actual behavior: [describe]
Error message: [paste if any]
Find the bug and fix it. Explain what was wrong.
Review this code for a hackathon demo:
[paste code]
Check for:
- Logic errors
- Missing error handling
- Security issues
- Performance problems
- Anything that would break during a demo
Write a README for this hackathon project:
- One-sentence description
- How to run it locally
- What APIs it uses
- What's the main feature
- What you'd build next with more time
Keep it under 200 words.
Create a Vercel deployment configuration for this Next.js app.
Include:
- vercel.json with any needed settings
- Environment variable documentation
- Build command verification
- Any rewrites or redirects needed
Write 3 quick test cases for the [function/component name]:
- Happy path
- Edge case (empty input)
- Error case
Use [test framework]. Keep tests simple and focused.
Refactor this code to be cleaner:
[paste code]
Focus on:
- Removing duplication
- Better naming
- Simpler logic
- Easier to understand
Don't change the functionality.
Stop thinking of AI as a tool. Start thinking of it as a teammate with specific strengths and weaknesses.
What AI is good at:
What AI is bad at:
How to work with your AI teammate:
AI API costs can sneak up on you during a hackathon. Here’s how to stay free:
| Tool | Free Tier | Strategy |
|---|---|---|
| Cursor | 2000 completions/month, 50 slow premium requests | Use fast requests for implementation, slow for planning |
| Copilot | Free for students, $10/month otherwise | Student email = free |
| Claude | Free tier with usage limits | Use web interface, not API, for planning |
| OpenAI | credit varies | Use a cheaper/mini model for demos, not the flagship |
| v0 | Limited free generations | Generate once, customize manually |
| Replit | Free tier with limited AI | Use for small tasks only |
Cost-saving habits:
Here’s the optimal split for a hackathon:
Human does:
AI does:
The workflow:
The golden rule: You should be able to explain every line of code in your project. If AI wrote it and you can’t explain it, you don’t own it — and judges will notice.
Use prompts that specify:
“Build a student deadline tracker with a clean dashboard, add login, store deadlines in Supabase, and make the UI mobile friendly.”
Use AI as a speed multiplier, not as a substitute for product judgment. The fastest way to build a hackathon project is: you decide, AI generates, you review, you deploy. That’s the loop. Stick to it.