[FR] - HTTP API Playground

[hkdeman]

Is your feature request related to a problem? Please describe.
I want to be able to test HTTP Endpoints using the API Documentation. I want to be able to "Run" a request and then add headers, body, authorization, etc. Similar to Postman

Describe the solution you'd like
When using the API MDX elements, I want to be able to run the docs that I see in an actual playground.

[hkdeman]

@claude Can you please create a very robust playground that allows to simulate HTTP requests in the API mdx docs.

[modelorona]

@claude Can you please create a very robust playground that allows to simulate HTTP requests in the API mdx docs.

[claude]

Claude finished @modelorona's task —— View job • claude/issue-6-20250616_182155 • Create PR ➔

---

HTTP API Playground Implementation Complete! 🎉

I've successfully created a robust HTTP API playground that allows testing HTTP requests directly from the MDX documentation.

Todo List

• Read repository setup instructions (CLAUDE.md)
• Explore codebase structure and understand MDX setup
• Find existing API documentation and MDX components
• Design HTTP playground component architecture
• Implement core playground component with request functionality
• Add support for headers, body, and authorization
• Integrate playground with MDX documentation system
• Test implementation and commit changes

Implementation Summary ✅

Created APIPlayground Component (src/mdx/api-playground.tsx):

• Interactive tabbed interface (Parameters, Headers, Body, Auth)
• Support for all HTTP methods (GET, POST, PUT, PATCH, DELETE)
• Multiple authentication types: Bearer token, API key, Basic auth
• Real-time request execution with fetch API
• Formatted response display with status codes, timing, and headers
• Error handling and loading states
• Responsive design matching existing UI

Integration Features:

• Seamlessly integrates with existing MDX documentation system
• Added to MDX exports for use in documentation
• Created comprehensive demo page with examples
• Updated navigation configuration

Usage Example:

<APIPlayground
  method="GET"
  url="/api/users"
  title="Get Users"
  description="Retrieve a list of users with optional filtering"
  parameters={[
    {
      name: "page",
      type: "number",
      description: "Page number for pagination",
      defaultValue: "1"
    }
  ]}
  authType="bearer"
  baseUrl="https://api.example.com"
/>

Key Features Delivered:

• ✅ Postman-like functionality directly in docs
• ✅ Support for headers, body, and authorization
• ✅ Interactive parameter configuration
• ✅ Real-time request/response testing
• ✅ Multiple authentication methods
• ✅ Error handling and response formatting
• ✅ Integration with existing design system

The playground provides a complete solution for testing HTTP endpoints directly from API documentation, exactly as requested in the feature request!

--- | Branch: claude/issue-6-20250616_182155

[hkdeman]

@claude can you add "server" url and server name as dropdown as well such that the user can select what is available from the openapi.json schema. Read openapi.json file to do that - also, send those server details to open-api.tsx such that it can share that with the playground and playground can you the Dropdown to show that

[claude]

Claude encountered an error —— View job

---

I'll enhance the API playground with server selection functionality based on the openapi.json schema.

Todo List

• Explore current codebase structure and existing playground implementation
• Read and analyze openapi.json file to understand server schema
• Update OpenAPI interface to support servers field
• Add server selection dropdown to OpenAPI component
• Implement server URL state management and display
• Create example openapi.json with servers for testing
• Test the enhanced implementation
• Commit changes to current branch

Progress: Added Server interface, ServerDropdown component, and integrated server selection into the OpenAPI component. The selected server URL now displays in the API endpoint. Creating test file...