Examples

Real-World Examples

Common development scenarios using kit-dev-mcp

Understanding a New Codebase

Scenario: Onboarding to a new project

You've just joined a team and need to understand their React + FastAPI application.

You:

Using Kit, help me understand this codebase at /Users/me/new-project

AI:

I'll analyze the codebase structure and key components for you.

[Opening repository...]

[Extracting symbols and analyzing structure...]

[Building smart context...]

Here's what I found:

  • Full-stack application with React frontend and FastAPI backend
  • Authentication using JWT tokens (see backend/auth/jwt_handler.py)
  • PostgreSQL database with SQLAlchemy ORM
  • Redux for state management in frontend
  • Docker compose setup for local development

Key entry points:

  • Backend: backend/main.py - FastAPI application initialization
  • Frontend: frontend/src/App.tsx - Main React component
  • Database models: backend/models/ directory

Implementing a New Feature

Scenario: Adding OAuth2 authentication

You need to add Google OAuth2 login to an existing application.

You:

Using Kit, help me implement Google OAuth2 authentication

AI:

I'll help you implement Google OAuth2. Let me research the best approach and check your current auth setup.

[Researching OAuth2 documentation...]

[Analyzing existing authentication code...]

[Building implementation context...]

Based on my analysis:

  1. You already have JWT authentication in place (auth/jwt_handler.py)
  2. I found the authlib package would work well with your FastAPI backend
  3. Here's the implementation plan:

1. Install dependencies: pip install authlib httpx

2. Create backend/auth/oauth2.py for Google OAuth flow

3. Add OAuth endpoints to your FastAPI router

4. Update frontend with Google login button

I've found similar patterns in your codebase that we can follow...

Debugging with Documentation

Scenario: Debugging a React hooks issue

Your useEffect hook is causing infinite re-renders.

You:

Using Kit, help me fix this infinite re-render in components/Dashboard.tsx

AI:

Let me analyze the component and research React hooks best practices.

[Reading Dashboard.tsx...]

[Researching React useEffect documentation...]

[Analyzing dependencies...]

I found the issue! In Dashboard.tsx line 45:

// Problem:

useEffect(() => {

setData({...data, newField});

}, [data]); // data is recreated each render!

The fix (based on React docs):

// Solution:

useEffect(() => {

setData(prev => ({...prev, newField}));

}, []); // Use functional update instead

Code Review Preparation

Scenario: Reviewing a pull request

You need to review a colleague's pull request for a new feature.

You:

Using Kit, help me review the changes in the feature/user-profile branch

AI:

I'll analyze the changes and provide a comprehensive review.

[Reviewing diff between main and feature/user-profile...]

[Running tests on the feature branch...]

[Checking for similar patterns...]

Review Summary:

  • ✓ Code follows existing patterns
  • ⚠ Found potential issue in user_profile.py line 67
  • ℹ Similar implementation exists in admin_profile.py

Specific feedback:

  1. Missing input validation for email field
  2. Consider reusing the ProfileValidator from utils/validators.py
  3. The database migration looks good

Tips for Effective Use

Start with Context

Always begin by opening the repository and building context for your task. This helps the AI understand your codebase structure.

Use Natural Language

Start requests with "Using Kit, ..." to ensure the AI uses the MCP tools rather than trying to guess or hallucinate.

Leverage Documentation

Use deep_research_package when working with unfamiliar libraries to get comprehensive documentation and examples from multiple sources.

Test as You Go

Use grep_ast to find code patterns by structure using tree-sitter. This helps identify specific code patterns like error handlers or async functions.