Documentation
v1.0.0
Core AI Block
💬

Example Block

Input/output demonstrations and sample interactions

Preview

💬
Example
Core

Input:

"Create a responsive navigation component with dropdown menus for a React application using Tailwind CSS."

Output:

import React, { useState } from 'react';

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav className="bg-white shadow-lg">
      <div className="max-w-7xl mx-auto px-4">
        <div className="flex justify-between h-16">
          <div className="flex items-center">
            <img className="h-8 w-8" src="/logo.svg" alt="Logo" />
          </div>
          {/* Navigation items */}
        </div>
      </div>
    </nav>
  );
};

export default Navigation;

Explanation:

This example demonstrates creating a responsive navigation component with proper structure, styling classes, and state management for mobile dropdown functionality.

Usage

When to use Example blocks

  • Demonstrate expected input and output formats
  • Show concrete examples of desired behavior
  • Clarify complex requirements with practical samples
  • Provide reference implementations
  • Guide AI responses with specific patterns
  • Reduce ambiguity in task descriptions

Example Types

Code Examples

Input requirements with expected code output

Conversation Examples

Dialog patterns and response styles

Task Examples

Problem-solution pairs for specific tasks

Format Examples

Input/output structure demonstrations

Best practices

  • Provide diverse, representative examples
  • Include both simple and complex cases
  • Show edge cases and error handling
  • Keep examples focused and relevant
  • Add explanations for complex examples
  • Use realistic, practical scenarios

Example Patterns

Code Generation Example

Input:

"Create a TypeScript interface for a user profile with name, email, age, and optional bio"

Output:

interface UserProfile {
  name: string;
  email: string;
  age: number;
  bio?: string;
}
API Response Example

Input:

GET /api/users/123

Output:

{
  "status": "success",
  "data": {
    "id": 123,
    "name": "John Doe",
    "email": "john@example.com",
    "age": 30,
    "bio": "Software developer"
  },
  "timestamp": "2024-01-15T10:30:00Z"
}
Conversation Example

User:

"I'm getting a CORS error when calling my API from localhost. How do I fix this?"

Assistant:

CORS (Cross-Origin Resource Sharing) errors occur when your frontend and backend are on different origins. Here are the solutions:

1. Configure CORS on your backend:

app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

2. Use a proxy in development:

Add to your package.json: "proxy": "http://localhost:8000"

This should resolve your CORS issue. Let me know if you need help with a specific backend framework!

API Reference

ExampleContent Interface
inputstringrequired

The input or request part of the example

outputstringrequired

The expected output or response

explanationstringoptional

Additional context or explanation of the example

typestringoptional

Category or type of example (e.g., "code", "api", "conversation")

Related Components

🔧
Variable Block
Use variables in examples
⚠️
Constraint Block
Set example boundaries
VariableConstraint