chatforpepol/nextjs-assistant icon
public
Published on 7/5/2025
Next.js Assistant

Rules
Prompts
Models
Context
anthropic Claude 3.7 Sonnet model icon

Claude 3.7 Sonnet

anthropic

200kinput·8.192koutput
mistral Codestral model icon

Codestral

mistral

voyage voyage-code-3 model icon

voyage-code-3

voyage

voyage Voyage AI rerank-2 model icon

Voyage AI rerank-2

voyage

lmstudio qwen2.5-coder 1.5b model icon

qwen2.5-coder 1.5b

lmstudio

deepinfra Qwen2.5 Coder 32B Instruct model icon

Qwen2.5 Coder 32B Instruct

deepinfra

lmstudio deepseek-r1 8b model icon

deepseek-r1 8b

lmstudio

together Llama 4 Scout Instruct (17Bx16E) model icon

Llama 4 Scout Instruct (17Bx16E)

together

relace Relace Instant Apply model icon

Relace Instant Apply

relace

40kinput·32koutput
gemini Gemini 2.5 Pro model icon

Gemini 2.5 Pro

gemini

1048kinput·65.536koutput
anthropic Claude 4 Sonnet model icon

Claude 4 Sonnet

anthropic

200kinput·64koutput
- Follow Next.js patterns, use app router and correctly use server and client components.
- Use Tailwind CSS for styling.
- Use Shadcn UI for components.
- Use TanStack Query (react-query) for frontend data fetching.
- Use React Hook Form for form handling.
- Use Zod for validation.
- Use React Context for state management.
- Use Prisma for database access.
- Follow AirBnB style guide for code formatting.
- Use PascalCase when creating new React files. UserCard, not user-card.
- Use named exports when creating new react components.
- DO NOT TEACH ME HOW TO SET UP THE PROJECT, JUMP STRAIGHT TO WRITING COMPONENTS AND CODE.
## Build & Development Commands - Ensure `.gitignore` is present and up to date based on project language/toolchain.
## Testing Guidelines - Recommend committing test cases alongside features or fixes.
## Code Style & Guidelines  - Use consistent formatting tools (e.g., Prettier, Black) pre-commit if available.
## Documentation Guidelines  - Include changelogs or commit logs for release notes.
## Git Rules - Use clear commit messages: `<type>: <what>` (e.g., `fix: resolve header overlap`). - Squash trivial commits when possible before merging. - Warn users when suggesting force pushes or rebase.
- Look for potential attack vectors in the code provided
- Ask users to provide more context (for example imported files etc) when needed
- Look for ways the system could be misused
- Always explain the reasoning behind security concerns
- Provide practical, context-appropriate solutions
- Keep OWASP Top 10 in mind
- Remember that security is about tradeoffs
- If you are unsure about something, ask for more context
- DO NOT ASSUME YOU KNOW EVERYTHING, ASK THE USER ABOUT THEIR REASONING
Next.jshttps://nextjs.org/docs/app
Reacthttps://react.dev/reference/
Continuehttps://docs.continue.dev
Zodhttps://zod.dev/
Vercel AI SDK Docshttps://sdk.vercel.ai/docs/
React Testing Library Docshttps://testing-library.com/docs/react-testing-library/intro/

Prompts

Learn more
Client component
Create a client component.
Create a client component with the following functionality. If writing this as a server component is not possible, explain why.
API route
Create an API route.
Create an API route with the following functionality.
Page
Creates a new Next.js page based on the description provided.
Create a new Next.js page based on the following description.
Prisma schema
Create a Prisma schema.
Create or update a Prisma schema with the following models and relationships. Include necessary fields, relationships, and any relevant enums.
Server component
Create a server component.
Create a server component with the following functionality. If writing this as a server component is not possible, explain why.
Next.js Security Review
Check for any potential security vulnerabilities in your code
Please review my Next.js code with a focus on security issues.

Use the below as a starting point, but consider any other potential issues

You do not need to address every single area below, only what is relevant to the user's code.

1. Data Exposure:
- Verify Server Components aren't passing full database objects to Client Components
- Check for sensitive data in props passed to 'use client' components
- Look for direct database queries outside a Data Access Layer
- Ensure environment variables (non NEXT_PUBLIC_) aren't exposed to client

2. Server Actions ('use server'):
- Confirm input validation on all parameters
- Verify user authentication/authorization checks
- Check for unencrypted sensitive data in .bind() calls

3. Route Safety:
- Validate dynamic route parameters ([params])
- Check custom route handlers (route.ts) for proper CSRF protection
- Review middleware.ts for security bypass possibilities

4. Data Access:
- Ensure parameterized queries for database operations
- Verify proper authorization checks in data fetching functions
- Look for sensitive data exposure in error messages

Key files to focus on: files with 'use client', 'use server', route.ts, middleware.ts, and data access functions.
Page
Creates a new Next.js page based on the description provided.
Create a new Next.js page based on the following description.
API route inspection
Analyzes API routes for security issues
Review this API route for security vulnerabilities. Ask questions about the context, data flow, and potential attack vectors. Be thorough in your investigation.
Data validation check
Checks input validation and sanitization
Analyze this code for data validation vulnerabilities. Ask about data sources, validation rules, and how the data is used throughout the application.
My prompt
Sequential Thinking Activation
<!-- Sequential Thinking Workflow -->
<assistant>
    <toolbox>
        <mcp_server name="sequential-thinking"
                        role="workflow_controller"
                        execution="sequential-thinking"
                        description="Initiate the sequential-thinking MCP server">
            <tool name="STEP" value="1">
                <description>Gather context by reading the relevant file(s).</description>
                <arguments>
                    <argument name="instructions" value="Seek proper context in the codebase to understand what is required. If you are unsure, ask the user." type="string" required="true"/>
                    <argument name="should_read_entire_file" type="boolean" default="true" required="false"/>
                </arguments>
                <result type="string" description="Context gathered from the file(s). Output can be passed to subsequent steps."/>
            </tool>
            <tool name="STEP" value="2">
                <description>Generate code changes based on the gathered context (from STEP 1).</description>
                <arguments>
                    <argument name="instructions" value="Generate the proper changes/corrections based on context from STEP 1." type="string" required="true"/>
                    <argument name="code_edit" type="object" required="true" description="Output: The proposed code modifications."/>
                </arguments>
                <result type="object" description="The generated code changes (code_edit object). Output can be passed to subsequent steps."/>
            </tool>
            <tool name="STEP" value="3">
                <description>Review the generated changes (from STEP 2) and suggest improvements.</description>
                <arguments>
                    <argument name="instructions" type="string" value="Review the changes applied in STEP 2 for gaps, correctness, and adherence to guidelines. Suggest improvements or identify any additional steps needed." required="true"/>
                </arguments>
                <result type="string" description="Review feedback, suggested improvements, or confirmation of completion. Final output of the workflow."/>
            </tool>
        </mcp_server>
    </toolbox>
</assistant>
Next.js Caching Review
Understand the caching behavior of your code
Your task is to analyze the user's code to help them understand it's current caching behavior, and mention any potential issues.
Be concise, only mentioning what is necessary.
Use the following as a starting point for your review:

1. Examine the four key caching mechanisms:
   - Request Memoization in Server Components
   - Data Cache behavior with fetch requests
   - Full Route Cache (static vs dynamic rendering)
   - Router Cache for client-side navigation

2. Look for and identify:
   - Fetch configurations (cache, revalidate options)
   - Dynamic route segments and generateStaticParams
   - Route segment configs affecting caching
   - Cache invalidation methods (revalidatePath, revalidateTag)

3. Highlight:
   - Potential caching issues or anti-patterns
   - Opportunities for optimization
   - Unexpected dynamic rendering
   - Unnecessary cache opt-outs

4. Provide clear explanations of:
   - Current caching behavior
   - Performance implications
   - Recommended adjustments if needed

Lastly, point them to the following link to learn more: https://nextjs.org/docs/app/building-your-application/caching

Context

Learn more
@diff
Reference all of the changes you've made to your current branch
@codebase
Reference the most relevant snippets from your codebase
@url
Reference the markdown converted contents of a given URL
@folder
Uses the same retrieval mechanism as @Codebase, but only on a single folder
@terminal
Reference the last command you ran in your IDE's terminal and its output
@code
Reference specific functions or classes from throughout your project
@file
Reference any file in your current workspace
@currentFile
Reference the currently open file
@docs
Reference the contents from any documentation site
@repo-map
Reference the outline of your codebase
@open
Reference the contents of all of your open files
@problems
Get Problems from the current file
@os
Reference the architecture and platform of your current operating system

No Data configured

MCP Servers

Learn more

Playwright

npx -y @executeautomation/playwright-mcp-server

Memory

npx -y @modelcontextprotocol/server-memory

Browser MCP

npx -y @browsermcp/mcp@latest

Sequential Thinking

docker run --rm -i mcp/sequentialthinking

Filesystem

npx -y @modelcontextprotocol/server-filesystem ${{ secrets.chatforpepol/nextjs-assistant/anthropic/filesystem-mcp/PATH }}

Brave Search

npx -y @modelcontextprotocol/server-brave-search

Context 7

npx -y @upstash/context7-mcp@latest