ChatGPT Integration

Use HeroPrompt templates effectively with OpenAI's ChatGPT assistant.

Why ChatGPT Works Well with HeroPrompt

ChatGPT (GPT-4, GPT-3.5) excels at:

Conversational refinement — Iterate on outputs naturally
Code generation — Produce working implementations quickly
Creative tasks — Generate content, brainstorm ideas
Broad knowledge — Handle diverse domains

Many HeroPrompt templates are optimized for ChatGPT with:

Clear, conversational instructions
Role-play framing ("You are a senior developer...")
Explicit format specifications

Using Prompts with ChatGPT

Web Interface (chat.openai.com)

Copy prompt from HeroPrompt
Open ChatGPT at chat.openai.com
Paste prompt in chat
Replace variables — Change {{variable_name}} to actual values
Send and refine based on results

Tip: Use GPT-4 (paid) or GPT-4o (free, limited) for best code quality.

ChatGPT API

Use HeroPrompt templates programmatically via OpenAI API:

python

from openai import OpenAI

client = OpenAI(api_key="your-api-key")

# Prompt template from HeroPrompt
prompt = """
Create a {{language}} function that {{task}}.
The function should handle {{edge_cases}}.
Provide complete, production-ready code with comments.
"""

# Replace variables
prompt = prompt.replace("{{language}}", "JavaScript")
prompt = prompt.replace("{{task}}", "validates passwords")
prompt = prompt.replace("{{edge_cases}}", "length, complexity, common passwords")

response = client.chat.completions.create(
    model="gpt-4-turbo",
    messages=[
        {"role": "system", "content": "You are a senior software engineer."},
        {"role": "user", "content": prompt}
    ]
)

print(response.choices[0].message.content)

Custom GPTs

Create a Custom GPT for repeated workflows:

Go to chat.openai.com/gpts
Click "Create a GPT"
Add instructions — Paste your favorite HeroPrompt templates
Add knowledge — Upload synced prompts as knowledge files
Save and share with your team

Example Custom GPT:

Name: "Frontend Dev Assistant"
Instructions: Include React, TypeScript, and accessibility prompts
Knowledge: Upload synced HeroPrompt templates from CLI

ChatGPT-Specific Optimizations

1. System Messages

Use system messages to set context that persists across the conversation:

python

{
  "role": "system",
  "content": "You are a Python expert specializing in data engineering. Always use type hints, docstrings, and follow PEP 8."
}

Tip: Save your favorite HeroPrompt templates as system messages for consistent outputs.

2. Role-Play Framing

ChatGPT responds well to role-play instructions:

text

You are a senior DevOps engineer with 10 years of Kubernetes experience.
Your task is to design a highly available, auto-scaling deployment.

Use the Optimizer → "Enhance & Clarify" to add role-play framing automatically.

3. Step-by-Step Guidance

For complex tasks, ask ChatGPT to break down the problem:

text

Think step-by-step:
1. Analyze the requirements
2. Plan the architecture
3. Implement the solution
4. Add error handling
5. Write tests

Use the Optimizer → "Chain of Thought" mode to add this structure.

4. Format Specifications

Be explicit about output format:

text

Provide the response in this format:
1. **Summary** (3 sentences)
2. **Implementation** (code with comments)
3. **Testing** (example test cases)
4. **Deployment** (step-by-step instructions)

ChatGPT Model Selection

Choose the right model for your task:

Model	Best For	Context	Speed	Cost
GPT-4 Turbo	Complex code, reasoning	128k tokens	Medium	$$$
GPT-4o	Balanced — code, writing	128k tokens	Fast	$$
GPT-3.5 Turbo	Quick tasks, prototyping	16k tokens	Fastest	$

Recommendation: Use GPT-4o for most HeroPrompt templates. It's faster and cheaper than GPT-4 Turbo with similar quality.

Tips for Best Results

1. Iterate Conversationally

ChatGPT's strength is iteration. Start broad, then refine:

text

You: "Create a React login component"
ChatGPT: [Provides basic component]
You: "Add form validation with Yup"
ChatGPT: [Adds validation]
You: "Make it mobile-responsive"
ChatGPT: [Adds responsive styles]

2. Use Follow-Up Questions

Ask for explanations, alternatives, or improvements:

text

"Explain why you chose this approach"
"What are the trade-offs?"
"Can you optimize this for performance?"
"Add TypeScript types"

3. Leverage Memory (ChatGPT Plus)

ChatGPT Plus remembers context across conversations:

Mention your tech stack once, and it remembers
Reference previous prompts: "Use the API design pattern we discussed"
Build on prior work without repeating context

4. Use Code Interpreter (ChatGPT Plus)

For data-related prompts, enable Code Interpreter:

ChatGPT can execute Python code
Generate charts, analyze data, test functions
Verify code works before copying

Custom Instructions (ChatGPT Plus)

Set global instructions that apply to every chat:

Click your profile → Settings → Custom Instructions
Add context:

text

I'm a full-stack developer using Next.js 14, TypeScript, and PostgreSQL.
Always provide TypeScript code with type definitions.
Use functional React components with hooks.
Follow Airbnb JavaScript style guide.

Now every HeroPrompt template will use these preferences automatically.

ChatGPT Plugins (Legacy)

Note: Plugins are deprecated in favor of Custom GPTs. If you're using plugins:

WebPilot — Fetch latest documentation
Code Interpreter — Execute and test code
Zapier — Integrate with external tools

These are now built into Custom GPTs and GPT-4o.

Troubleshooting

ChatGPT's code has bugs

Solution:

Ask ChatGPT to review: "Check this code for bugs"
Test the code and report errors
Iterate: "Fix the error on line 15 where..."

Output is too verbose

Solution: Add explicit constraints:

text

Provide only the code, no explanations or comments.
Max 50 lines.

ChatGPT refuses to generate content

Solution: Rephrase your request to comply with OpenAI's usage policies. Avoid:

Malicious code (malware, exploits)
Content that violates rights or laws
Scraping or automated data collection

Context limit reached

Solution:

Use GPT-4 Turbo (128k tokens) instead of GPT-3.5 (16k)
Break large prompts into smaller chunks
Start a new conversation and reference prior work

Advanced: OpenAI Assistants API

For production workflows, use the Assistants API:

python

from openai import OpenAI

client = OpenAI()

# Create assistant with HeroPrompt template as instructions
assistant = client.beta.assistants.create(
    name="Frontend Dev Assistant",
    instructions="You are a React expert. Use TypeScript, hooks, and functional components.",
    model="gpt-4-turbo"
)

# Create thread and run
thread = client.beta.threads.create()
message = client.beta.threads.messages.create(
    thread_id=thread.id,
    role="user",
    content="Create a user profile component with avatar upload"
)

run = client.beta.threads.runs.create(
    thread_id=thread.id,
    assistant_id=assistant.id
)

# Retrieve response (poll for completion)
# ...

Benefits:

Persistent conversations
File uploads
Function calling
Retrieval over uploaded documents

Next Steps

Try the Prompt Optimizer to tailor prompts for ChatGPT
Explore Claude integration
Check VS Code integration