What is the use of Swagger UI?

What is Swagger UI?

Swagger UI is an open-source tool that automatically generates interactive API documentation from OpenAPI Specification (formerly Swagger) files. It lets developers explore and test REST APIs directly in a browser.

What Swagger UI Does

textCopy
OpenAPI spec (YAML/JSON) → Swagger UI renders → Interactive docs in browser

• Displays all API endpoints, methods, parameters
• Shows request/response schemas
• Lets you execute API calls directly in the browser
• Auto-generates code examples in multiple languages

Quick Setup with FastAPI

FastAPI includes Swagger UI automatically at

/docs

pythonCopy
from fastapi import FastAPI
from pydantic import BaseModel
from typing import Optional

app = FastAPI(
    title="AI Question API",
    description="API for managing Gen AI roadmap & core concepts",
    version="1.0.0"
)

class Question(BaseModel):
    id: int
    question: str
    difficulty: str
    tags: list[str]
    answer: Optional[str] = None

class QuestionCreate(BaseModel):
    question: str
    difficulty: str
    tags: list[str]

@app.get("/questions", response_model=list[Question], tags=["Questions"])
async def get_questions(
    difficulty: Optional[str] = None,
    tag: Optional[str] = None
):
    '''Get all questions with optional filtering by difficulty or tag'''
    # Implementation here
    return []

@app.get("/questions/{question_id}", response_model=Question, tags=["Questions"])
async def get_question(question_id: int):
    '''Get a specific question by ID'''
    return {"id": question_id, "question": "Example", "difficulty": "Medium", "tags": []}

@app.post("/questions", response_model=Question, status_code=201, tags=["Questions"])
async def create_question(question: QuestionCreate):
    '''Create a new question'''
    return {"id": 146, **question.dict(), "answer": None}

Run:

uvicorn main:app --reload

Access:

• textCopy

  http://localhost:8000/docs

  → Swagger UI (interactive)
• textCopy

  http://localhost:8000/redoc

  → ReDoc (alternative docs)
• textCopy

  http://localhost:8000/openapi.json

  → Raw OpenAPI spec

Swagger UI Features

OpenAPI Specification

Swagger UI renders from an OpenAPI spec:

yamlCopy
# openapi.yaml
openapi: 3.0.0
info:
  title: My AI API
  version: 1.0.0

paths:
  /questions:
    get:
      summary: List all questions
      parameters:
        - name: difficulty
          in: query
          schema:
            type: string
            enum: [Easy, Medium, Hard]
      responses:
        '200':
          description: List of questions
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/Question'

components:
  schemas:
    Question:
      type: object
      properties:
        id:
          type: integer
        question:
          type: string
        difficulty:
          type: string

Custom Swagger UI Configuration

pythonCopy
from fastapi import FastAPI

app = FastAPI(
    title="Gen AI Learning API",
    description='''
## Gen AI Roadmap Concepts API

Access and manage 145+ Gen AI roadmap & core concepts.

### Features
- Search questions by difficulty and tags
- Get detailed answers
- Track progress
    ''',
    version="2.3.0",
    docs_url="/docs",          # Swagger UI URL
    redoc_url="/redoc",        # ReDoc URL
    openapi_url="/openapi.json"
)

Swagger vs Alternatives