open-index/open-npm huggingface dataset:
npm package: @readsonic/nextjs
Description: ReadSonic Next.js Component
Author: Richard Kovacs
Latest version: 1.4.2

# Official ReadSonic Next.js Component

Official Next.js component for [ReadSonic](https://readsonic.io).

## Installation

### NPM

```bash
npm install @readsonic/nextjs
```

### Yarn

```bash
yarn add @readsonic/nextjs
```

### PNPM

```bash
pnpm add @readsonic/nextjs
```

## Usage

Add the `<ReadSonic />` component to your page. The component should be placed in the component that wraps all of your blog posts.

For example, if you have a `app/blog/[slug].tsx` page that renders all of your blog posts, you should add the `<ReadSonic />` component to that page, or to a component that is rendered by that page.

```tsx
import ReadSonic from '@readsonic/nextjs';

export default function Post() {
  return (
    <div>
      <ReadSonic />  <-- Add this component
      <h1>Post Title</h1>
      <article>
        <p>Post content</p>
        <p>...</p>
      </article>
    </div>
  );
}
```

> **IMPORTANT**: ReadSonic currently reads everything that is between the `<article>` and `</article>` tags on your page, but nothing else. Use these tags on your blog posts to ensure that ReadSonic reads the correct content.


## Props

By default, `<ReadSonic />` will render a play button wherever it is placed on the page. You can customize the component with the `className` prop.

```tsx
<ReadSonic className="my-custom-class" />
```
npm package: @readwise/readwise-mcp
Description: Readwise MCP
Author: Readwise
Latest version: 0.0.7
Deprecated: This package is deprecated. Use the new Readwise MCP server at https://readwise.io/mcp — supports both Readwise and Reader data, no local installation
  needed.

# Readwise MCP

[![pre-commit](https://img.shields.io/badge/pre--commit-enabled-brightgreen?logo=pre-commit)](https://github.com/pre-commit/pre-commit)

## Overview

The [Model Context Protocol (MCP)](https://modelcontextprotocol.io) standardizes how applications provide context to Large Language Models (LLMs), ensuring a clean separation between context management and direct LLM interaction.

This project is a local [MCP server](https://spec.modelcontextprotocol.io) designed to act as a bridge between LLM clients (such as [Claude](https://claude.ai)) and [Readwise](https://readwise.io).

[Watch a demo!](https://github.com/user-attachments/assets/22927b1b-c63a-482c-a964-c649526d1424)

## Installation in Claude

0. Please make sure you have [Node](https://nodejs.org/en/download) installed.
1. Open Claude desktop app.
2. Navigate to Settings > Developer.
3. Click `Edit Config`.
4. Add the following entry to the `claude_desktop_config.json` file, replacing `ACCESS_TOKEN` value with your [Readwise Access Token](https://readwise.io/access_token).
```
{
  "mcpServers": {
    "Readwise MCP": {
      "command": "npx",
      "args": [
        "-y",
        "@readwise/readwise-mcp"
      ],
      "env": {
        "ACCESS_TOKEN": "XXXXXXXXX"
      }
    }
  }
}
```

### Troubleshooting

For general troubleshooting guidance, please refer to the official Model Context Protocol Claude Desktop [Troubleshooting section](https://modelcontextprotocol.io/quickstart/user#troubleshooting).

Below are specific solutions to common issues we've encountered and resolved.

#### "Could not attach to MCP server Readwise MCP"
A very likely reason for this to happen is that you have an incorrect npx/Node version set up. If you're using `nvm`, try running `nvm use 18` in your terminal. If not, consider reinstalling Node.

#### Errors when calling Readwise tools
When using this MCP server, you may occasionally encounter MCP errors during your conversations with Claude. If you experience such errors, we recommend trying to switch between different Claude models (e.g., from Claude 3.5 Haiku to Claude 3.7 Sonnet) as this often resolves the issue.
npm package: @readyapi/api-client
Description: the open source API testing client
Author: KhulnaSoft
Latest version: 1.2.10
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Scalar API Client

[![Version](https://img.shields.io/npm/v/%40scalar/api-client)](https://www.npmjs.com/package/@readyapi/api-client)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/api-client)](https://www.npmjs.com/package/@readyapi/api-client)
[![License](https://img.shields.io/npm/l/%40scalar%2Fapi-client)](https://www.npmjs.com/package/@readyapi/api-client)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

## Installation

```bash
npm install @readyapi/api-client
```

## Usage

```vue
<script setup>
import { ApiClient } from '@readyapi/api-client'
</script>

<template>
  <ApiClient />
</template>
```

## Props

### proxyUrl?: string

Pass an URL of [a request proxy](https://github.com/khulnasoft/readyapi.js/tree/main/packages/api-client-proxy) to avoid CORS issues.

## Composable

You can use `useRequestStore()` to interact with the API client.

### readOnly

```js
const { readOnly } = useRequestStore()

readOnly.value = false
```

### activeRequest

```js
const { activeRequest } = useRequestStore()

console.log(activeRequest)
```

### setActiveRequest

```js
const { setActiveRequest } = useRequestStore()

setActiveRequest({
  url: 'https://echo.scalar.com'
  type: 'GET,
  path: '/foobar'
})
```
npm package: @readyapi/api-client-proxy
Description: an api request proxy based on express
Author: KhulnaSoft
Latest version: 0.0.1

# ReadyAPI Client Proxy

[![Version](https://img.shields.io/npm/v/%40readyapi/api-client-proxy)](https://www.npmjs.com/package/@readyapi/api-client-proxy)
[![Downloads](https://img.shields.io/npm/dm/%40readyapi/api-client-proxy)](https://www.npmjs.com/package/@readyapi/api-client-proxy)
[![License](https://img.shields.io/npm/l/%40readyapi%2Fapi-client-proxy)](https://www.npmjs.com/package/@readyapi/api-client-proxy)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

The Ready API Client Proxy redirects requests to another server to avoid CORS issues. Works well with the Ready API Client.

## Installation

```bash
npm install @readyapi/api-client-proxy
```

## Usage

Create a new Node.js project and run the following code to run your own instance:

```ts
import { createApiClientProxy } from '@readyapi/api-client-proxy'

const { listen } = createApiClientProxy()

listen(5051, () => {
  console.log(`🥤 API Client Proxy listening on http://localhost:5051`)
})
```
npm package: @readyapi/api-client-react
Description: the open source API testing client for react
Author: KhulnaSoft
Latest version: 0.3.10

# Scalar API Client React

[![Version](https://img.shields.io/npm/v/%40scalar/api-client-react)](https://www.npmjs.com/package/@readyapi/api-client-react)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/api-client-react)](https://www.npmjs.com/package/@readyapi/api-client-react)
[![License](https://img.shields.io/npm/l/%40scalar%2Fapi-client-react)](https://www.npmjs.com/package/@readyapi/api-client-react)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

## Installation

```bash
npm install @readyapi/api-client-react
```

## Usage

```ts
import { ApiClientReact } from '@readyapi/api-client-react'
import React, { useState } from 'react'

export const Wrapper = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Click me to open the Api Client
      </button>

      <ApiClientReact
        close={() => setIsOpen(false)}
        isOpen={isOpen}
        request={{
          url: 'https://api.sampleapis.com',
          type: 'GET',
          path: '/simpsons/products',
        }}
      />
    </>
  )
}
```

You will also need one of the following classes on a parent element:

```css
.dark-mode
.light-mode
```

## Props

### close: function

function to close the dialog, as seen above

### isOpen: boolean

boolean which controls the visibility of the dialog containing the client

### request: ClientRequestConfig

```ts
export type ClientRequestConfig = {
  id?: string
  name?: string
  url: string
  /** HTTP Request Method */
  type: string
  /** Request path */
  path: string
  /** Variables */
  variables?: BaseParameter[]
  /** Query parameters */
  query?: Query[]
  /** Cookies */
  cookies?: Cookie[]
  /** Request headers */
  headers?: Header[]
  /** Content type matched body */
  body?: string
  /** Optional form data body */
  formData?: FormDataItem[]
}
```

## ApiClientReactBase

We also export the base component if you do not want the modal.
`ApiClientReactBase`

Details on how to use it can be found in the source code for `ApiClientReact`
npm package: @readyapi/api-reference-react
Description: The react client only integration for api references
Author: KhulnaSoft
Latest version: 0.1.57

# Scalar API Reference React Component

[![Version](https://img.shields.io/npm/v/%40scalar/api-reference-react)](https://www.npmjs.com/package/@readyapi/api-reference-react)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/api-reference-react)](https://www.npmjs.com/package/@readyapi/api-reference-react)
[![License](https://img.shields.io/npm/l/%40scalar%2Fapi-reference-react)](https://www.npmjs.com/package/@readyapi/api-reference-react)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

## Installation

```bash
npm install @readyapi/api-reference-react
```

## Usage

```ts
import { ApiReferenceReact } from '@readyapi/api-reference-react'
import React from 'react'

function App() {
  return (
    <ApiReferenceReact
      configuration={{
        spec: {
          url: 'https://petstore3.swagger.io/api/v3/openapi.json',
        },
      }}
    />
  )
}

export default App
```

### Example

You can find an example in this repo under [examples/react](https://github.com/khulnasoft/readyapi.js/tree/main/examples/react)

## Props

ApiReference only takes one prop which is the configuration object.

### configuration: ReferenceProps

You can find the full configuration options under
[packages/api-reference](https://github.com/khulnasoft/readyapi.js/tree/main/packages/api-reference).
npm package: @readyapi/docusaurus
Description: Docusaurus integration for api references
Author: KhulnaSoft
Latest version: 0.2.15

# Scalar Docusaurus API Reference Plugin "Scalasaurus"

[![Version](https://img.shields.io/npm/v/%40scalar/docusaurus)](https://www.npmjs.com/package/@readyapi/docusaurus)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/docusaurus)](https://www.npmjs.com/package/@readyapi/docusaurus)
[![License](https://img.shields.io/npm/l/%40scalar%2Fdocusaurus)](https://www.npmjs.com/package/@readyapi/docusaurus)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

![scalasaurus](docusaurus.png)

## Installation

```bash
npm install @readyapi/docusaurus
```

## Usage

Simple add to the plugins section of your Docusaurus config. If you are using
typescript you can import the type options type as well

```ts
import type { ScalarOptions } from '@readyapi/docusaurus'

plugins: [
  [
    ['@readyapi/docusaurus', {
      label: 'Scalar',
      route: '/scalar',
      configuration: {
        spec: {
          url: 'https://petstore3.swagger.io/api/v3/openapi.json',
        },
      },
    } as ScalarOptions],
  ],
],
```

### Example

You can find an example in this repo under [examples/docusaurus](https://github.com/khulnasoft/readyapi.js/tree/main/examples/docusaurus)

## Config

These configuration options are a WIP as this plugin is still in beta

### label: string

The label on the nav bar for this route

### route: string

Path at which the API Reference will be shown

### configuration: ReferenceProps

You can find the full configuration options under
[packages/api-reference](https://github.com/khulnasoft/readyapi.js/tree/main/packages/api-reference)
minus theme.
npm package: @readyapi/echo-server
Description: an express server which replies with the request data
Author: KhulnaSoft
Latest version: 0.0.1

# Readyapi Echo Server

[![Version](https://img.shields.io/npm/v/%40readyapi/echo-server)](https://www.npmjs.com/package/@readyapi/echo-server)
[![Downloads](https://img.shields.io/npm/dm/%40readyapi/echo-server)](https://www.npmjs.com/package/@readyapi/echo-server)
[![License](https://img.shields.io/npm/l/%40readyapi%2Fecho-server)](https://www.npmjs.com/package/@readyapi/echo-server)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

The Readyapi Echo Server is an Express server, which replies with the request data. Works well with the Ready API Client.

## Installation

```bash
npm install @readyapi/echo-server
```

## Usage

Create a new Node.js project and run the following code to run your own instance:

```ts
import { createEchoServer } from '@readyapi/echo-server'

const { listen } = createEchoServer()

listen(5052, () => {
  console.log(`🔁 Echo Server listening on http://localhost:5052`)
})
```

## Example

No matter which route you hit, the response contains all the request data and looks like that:

```json
{
  "headers": {
    "host": "localhost:5052",
    "connection": "keep-alive",
    "accept": "*/*",
    "accept-language": "*",
    "sec-fetch-mode": "no-cors",
    "user-agent": "undici",
    "cache-control": "max-age=0",
    "accept-encoding": "gzip, deflate",
    "content-length": "0"
  },
  "cookies": {},
  "method": "GET",
  "path": "/foo",
  "query": {
    "foo": "bar"
  },
  "body": {}
}
```
npm package: @readyapi/express-api-reference
Description: A middleware for using the Ready API reference with Express
Author: KhulnaSoft
Latest version: 0.0.1

# Readyapi Express API Reference Plugin

[![Version](https://img.shields.io/npm/v/%40readyapi/express-api-reference)](https://www.npmjs.com/package/@readyapi/express-api-reference)
[![Downloads](https://img.shields.io/npm/dm/%40readyapi/express-api-reference)](https://www.npmjs.com/package/@readyapi/express-api-reference)
[![License](https://img.shields.io/npm/l/%40readyapi%2Fexpress-api-reference)](https://www.npmjs.com/package/@readyapi/express-api-reference)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

This middleware provides an easy way to render a beautiful API reference based on an OpenAPI/Swagger file with Express.

## Installation

```bash
npm install @readyapi/express-api-reference
```

## Usage

[Set up Express](https://expressjs.com/en/starter/hello-world.html) and pass an OpenAPI/Swagger spec to the `apiReference` middleware:

> Wait, but how do we get the OpenApiSpecification? 🤔 There are multiple ways to generate an OpenAPI/Swagger file for Express. The most popular way is to use [`swagger-jsdoc`](https://github.com/Surnet/swagger-jsdoc).

```ts
import { apiReference } from '@readyapi/express-api-reference'

const OpenApiSpecification =
  /* … */

  app.use(
    '/reference',
    apiReference({
      spec: {
        content: OpenApiSpecification,
      },
    }),
  )
```

If you’re serving an OpenAPI/Swagger file already, you can pass an URL, too:

```ts
import { apiReference } from '@readyapi/express-api-reference'

app.use(
  '/reference',
  apiReference({
    spec: {
      url: '/openapi.json',
    },
  }),
)
```

The Express middleware takes our universal configuration object, [read more about configuration](https://github.com/khulnasoft/readyapi.js/tree/main/packages/api-reference#props) in the core package README.

### Themes

The middleware comes with a custom theme for Express. You can use one of [the other predefined themes](https://github.com/khulnasoft/readyapi.js/blob/main/packages/themes/src/index.ts#L15) (`alternate`, `default`, `moon`, `purple`, `solarized`) or overwrite it with `none`. All themes come with a light and dark color scheme.

```ts
import { apiReference } from '@readyapi/express-api-reference'

app.use(
  '/reference',
  apiReference({
    theme: 'purple',
    spec: {
      content: OpenApiSpecification,
    },
  }),
)
```

### Custom CDN

You can use a custom CDN ，default is `https://cdn.jsdelivr.net/npm/@readyapi/api-reference`.

```ts
import { apiReference } from '@readyapi/express-api-reference'

app.use(
  '/reference',
  apiReference({
    cdn: 'https://cdn.jsdelivr.net/npm/@readyapi/api-reference',
    spec: {
      content: OpenApiSpecification,
    },
  }),
)
```
npm package: @readyapi/fastify-api-reference
Description: a fastify plugin to render an API reference from an OpenAPI file
Author: KhulnaSoft
Latest version: 0.0.1

# Readyapi Fastify API Reference Plugin

[![Version](https://img.shields.io/npm/v/%40readyapi/fastify-api-reference)](https://www.npmjs.com/package/@readyapi/fastify-api-reference)
[![Downloads](https://img.shields.io/npm/dm/%40readyapi/fastify-api-reference)](https://www.npmjs.com/package/@readyapi/fastify-api-reference)
[![License](https://img.shields.io/npm/l/%40readyapi%2Ffastify-api-reference)](https://www.npmjs.com/package/@readyapi/fastify-api-reference)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

This plugin provides an easy way to render a beautiful API reference based on a OpenAPI/Swagger file with Fastify.

[![Screenshot of an API Reference](https://github.com/khulnasoft/readyapi.js/assets/6201407/d8beb5e1-bf64-4589-8cb0-992ba79215a8)](https://docs.readyapi.com/swagger-editor)

## Installation

```bash
npm install @readyapi/fastify-api-reference
```

And then register it with Fastify:

```ts
await fastify.register(require('@readyapi/fastify-api-reference'), {
  routePrefix: '/reference',
})
```

## Usage

If you have a OpenAPI/Swagger file already, you can pass an URL to the plugin:

```ts
// Render an API reference for a given OpenAPI/Swagger spec URL
fastify.register(require('@readyapi/fastify-api-reference'), {
  routePrefix: '/reference',
  configuration: {
    title: 'Our API Reference',
    spec: {
      url: '/openapi.json',
    },
  },
})
```

With the [@fastify/swagger](https://github.com/fastify/fastify-swagger) you can even generate your Swagger spec from the registered routes and directly pass it to the plugin:

```ts
await fastify.register(require('@readyapi/fastify-api-reference'), {
  routePrefix: '/reference',
  configuration: {
    spec: {
      content: () => fastify.swagger(),
    },
  },
})
```

Actually, we’re picking it up automatically, so this would be enough:

```ts
await fastify.register(require('@readyapi/fastify-api-reference'), {
  routePrefix: '/reference',
})
```

Or, if you just have a static OpenAPI spec, you can directly pass it, too:

```ts
await fastify.register(require('@readyapi/fastify-api-reference'), {
  routePrefix: '/reference',
  configuration: {
    spec: {
      content: { … }
    },
  },
})
```

The fastify plugin takes our universal configuration object, [read more about configuration](https://github.com/khulnasoft/readyapi.js/tree/main/packages/api-reference#configuration) in the core package README.

## Themes

By default, we’re using a custom Fastify theme and it’s beautiful. But you can choose [one of our other themes](https://github.com/khulnasoft/readyapi.js/tree/main/packages/themes), too:

```ts
await fastify.register(require('@readyapi/fastify-api-reference'), {
  routePrefix: '/reference',
  configuration: {
    theme: 'purple',
  },
})
```
npm package: @readyapi/galaxy
Description: OpenAPI example specification in YAML and JSON
Author: KhulnaSoft
Latest version: 0.1.1

# Scalar Galaxy OpenAPI Example

[![Version](https://img.shields.io/npm/v/%40scalar/galaxy)](https://www.npmjs.com/package/@readyapi/galaxy)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/galaxy)](https://www.npmjs.com/package/@readyapi/galaxy)
[![License](https://img.shields.io/npm/l/%40scalar%2Fgalaxy)](https://www.npmjs.com/package/@readyapi/galaxy)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)

An OpenAPI example specification in YAML and JSON to test OpenAPI tooling, run test suites or learn about OpenAPI.

## Installation

```bash
npm install @readyapi/galaxy
```

## Usage

### CDN

| Version     | Format | URL                                                            |
| ----------- | ------ | -------------------------------------------------------------- |
| Latest      | JSON   | https://cdn.jsdelivr.net/npm/@readyapi/galaxy/dist/latest.json |
| Latest      | YAML   | https://cdn.jsdelivr.net/npm/@readyapi/galaxy/dist/latest.yaml |
| OpenAPI 3.1 | JSON   | https://cdn.jsdelivr.net/npm/@readyapi/galaxy/dist/3.1.json    |
| OpenAPI 3.1 | YAML   | https://cdn.jsdelivr.net/npm/@readyapi/galaxy/dist/3.1.yaml    |

### Import as object

```ts
import galaxy from '@readyapi/galaxy/latest.json'
```

### Import as JSON string

```ts
import galaxy from '@readyapi/galaxy/latest.json?raw'
```

### Import as YAML string

```ts
import galaxy from '@readyapi/galaxy/latest.yaml?raw'
```

### Import specific OpenAPI version

```ts
import galaxy from '@readyapi/galaxy/3.1.json'
```
npm package: @readyapi/hono-api-reference
Description: A middleware for using the Scalar API reference in Hono
Author: KhulnaSoft
Latest version: 0.5.15

# Scalar Hono API Reference Plugin

[![Version](https://img.shields.io/npm/v/%40scalar/hono-api-reference)](https://www.npmjs.com/package/@readyapi/hono-api-reference)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/hono-api-reference)](https://www.npmjs.com/package/@readyapi/hono-api-reference)
[![License](https://img.shields.io/npm/l/%40scalar%2Fhono-api-reference)](https://www.npmjs.com/package/@readyapi/hono-api-reference)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

This middleware provides an easy way to render a beautiful API reference based on an OpenAPI/Swagger file with Hono.

![hono-js](https://github.com/khulnasoft/readyapi.js/assets/6176314/6f5a2102-e377-4d4e-9cfb-a512f5e0a9ba)

## Installation

```bash
npm install @readyapi/hono-api-reference
```

## Usage

Set up [Zod OpenAPI Hono](https://github.com/honojs/middleware/tree/main/packages/zod-openapi) and pass the configured URL to the `apiReference` middleware:

```ts
import { apiReference } from '@readyapi/hono-api-reference'

app.get(
  '/reference',
  apiReference({
    spec: {
      url: '/openapi.json',
    },
  }),
)
```

The Hono middleware takes our universal configuration object, [read more about configuration](https://github.com/khulnasoft/readyapi.js/tree/main/packages/api-reference#props) in the core package README.

### Themes

The middleware comes with a custom theme for Hono. You can use one of [the other predefined themes](https://github.com/khulnasoft/readyapi.js/blob/main/packages/themes/src/index.ts#L15) (`alternate`, `default`, `moon`, `purple`, `solarized`) or overwrite it with `none`. All themes come with a light and dark color scheme.

```ts
import { apiReference } from '@readyapi/hono-api-reference'

app.get(
  '/reference',
  apiReference({
    theme: 'purple',
    spec: {
      url: '/openapi.json',
    },
  }),
)
```

### Custom page title

There’s one additional option to set the page title:

```ts
import { apiReference } from '@readyapi/hono-api-reference'

app.get(
  '/reference',
  apiReference({
    pageTitle: 'Hono API Reference',
    spec: {
      url: '/openapi.json',
    },
  }),
)
```

### Custom CDN

You can use a custom CDN ，default is `https://cdn.jsdelivr.net/npm/@readyapi/api-reference`.

```ts
import { apiReference } from '@readyapi/nestjs-api-reference'

app.use(
  '/reference',
  apiReference({
    cdn: 'https://cdn.jsdelivr.net/npm/@readyapi/api-reference',
    spec: {
      content: OpenApiSpecification,
    },
  }),
)
```
npm package: @readyapi/nestjs-api-reference
Description: A middleware for using the Scalar API reference with NestJS
Author: KhulnaSoft
Latest version: 0.3.15

# Scalar NestJS API Reference Plugin

[![Version](https://img.shields.io/npm/v/%40scalar/nestjs-api-reference)](https://www.npmjs.com/package/@readyapi/nestjs-api-reference)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/nestjs-api-reference)](https://www.npmjs.com/package/@readyapi/nestjs-api-reference)
[![License](https://img.shields.io/npm/l/%40scalar%2Fnestjs-api-reference)](https://www.npmjs.com/package/@readyapi/nestjs-api-reference)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

This middleware provides an easy way to render a beautiful API reference based on an OpenAPI/Swagger file with NestJS.

## Installation

```bash
npm install @readyapi/nestjs-api-reference
```

## Usage

[Set up NestJS](https://docs.nestjs.com/first-steps) and [set up NestJS Swagger](https://docs.nestjs.com/openapi/introduction) and pass an OpenAPI/Swagger spec to the `apiReference` middleware:

```ts
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger'
import { apiReference } from '@readyapi/nestjs-api-reference'

/* ... */
const app = await NestFactory.create(AppModule)

const config = new DocumentBuilder()
  .setTitle('Cats example')
  .setDescription('The cats API description')
  .setVersion('1.0')
  .addTag('cats')
  .build()

const document = SwaggerModule.createDocument(app, config)
/* ... */

const OpenApiSpecification =
  /* … */

  app.use(
    '/reference',
    apiReference({
      spec: {
        content: document,
      },
    }),
  )
```

If you’re serving an OpenAPI/Swagger file already, you can pass an URL, too:

```ts
import { apiReference } from '@readyapi/nestjs-api-reference'

app.use(
  '/reference',
  apiReference({
    spec: {
      url: '/openapi.json',
    },
  }),
)
```

The NestJS middleware takes our universal configuration object, [read more about configuration](https://github.com/khulnasoft/readyapi.js/tree/main/packages/api-reference#props) in the core package README.

### Themes

The middleware comes with a custom theme for NestJS. You can use one of [the other predefined themes](https://github.com/khulnasoft/readyapi.js/blob/main/packages/themes/src/index.ts#L15) (`alternate`, `default`, `moon`, `purple`, `solarized`) or overwrite it with `none`. All themes come with a light and dark color scheme.

```ts
import { apiReference } from '@readyapi/nestjs-api-reference'

app.use(
  '/reference',
  apiReference({
    theme: 'purple',
    spec: {
      content: OpenApiSpecification,
    },
  }),
)
```

### Custom CDN

You can use a custom CDN ，default is `https://cdn.jsdelivr.net/npm/@readyapi/api-reference`.

```ts
import { apiReference } from '@readyapi/nestjs-api-reference'

app.use(
  '/reference',
  apiReference({
    cdn: 'https://cdn.jsdelivr.net/npm/@readyapi/api-reference',
    spec: {
      content: OpenApiSpecification,
    },
  }),
)
```
npm package: @readyapi/nextjs-api-reference
Description: a Next.js component to render API references from an OpenAPI file
Author: KhulnaSoft
Latest version: 0.3.15

# Scalar Next.js API Reference Handler

[![Version](https://img.shields.io/npm/v/%40scalar/nextjs-api-reference)](https://www.npmjs.com/package/@readyapi/nextjs-api-reference)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/nextjs-api-reference)](https://www.npmjs.com/package/@readyapi/nextjs-api-reference)
[![License](https://img.shields.io/npm/l/%40scalar%2fnextjs-api-reference)](https://www.npmjs.com/package/@readyapi/nextjs-api-reference)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

This plugin provides an easy way to render a beautiful API reference based on an OpenAPI/Swagger file with Next.js.

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/khulnasoft/readyapi.js/assets/2039539/5837adad-a605-4edb-90ec-b929ff2b803b">
  <source media="(prefers-color-scheme: light)" srcset="https://github.com/khulnasoft/readyapi.js/assets/2039539/4f58202d-f40f-47b3-aeaa-44681b424a45">
  <img alt="Screenshot of an API Reference" src="https://github.com/khulnasoft/readyapi.js/assets/2039539/4f58202d-f40f-47b3-aeaa-44681b424a45">
</picture>

## Installation

```bash
npm install @readyapi/nextjs-api-reference
```

## Usage

If you have a OpenAPI/Swagger file already, you can pass a URL to the plugin in an API [Route](https://nextjs.org/docs/app/building-your-application/routing/route-handlers):

```ts
// app/reference/route.ts
import { ApiReference } from '@readyapi/nextjs-api-reference'

const config = {
  spec: {
    url: '/openapi.json',
  },
}

export const GET = ApiReference(config)
```

Or, if you just have a static OpenAPI spec, you can directly pass it as well:

```ts
const config = {
  spec: {
    content: '...',
  },
}
```

The Next.js handler takes our universal configuration object, [read more about configuration](https://github.com/khulnasoft/readyapi.js/tree/main/packages/api-reference#configuration) in the core package README.

## Themes

By default, we’re using a custom Next.js theme and it’s beautiful. But you can choose [one of our other themes](https://github.com/khulnasoft/readyapi.js/tree/main/packages/themes), too:

```ts
const config = {
  theme: 'purple',
}
```
npm package: @readyapi/openapi-parser
Description: modern OpenAPI parser written in TypeScript
Author: KhulnaSoft
Latest version: 0.3.3

# KhulnaSoft OpenAPI Parser

[![CI](https://github.com/khulnasoft/openapi-parser/actions/workflows/ci.yml/badge.svg)](https://github.com/khulnasoft/openapi-parser/actions/workflows/ci.yml)
[![Release](https://github.com/khulnasoft/openapi-parser/actions/workflows/release.yml/badge.svg)](https://github.com/khulnasoft/openapi-parser/actions/workflows/release.yml)
[![Contributors](https://img.shields.io/github/contributors/khulnasoft/openapi-parser)](https://github.com/khulnasoft/openapi-parser/graphs/contributors)
[![GitHub License](https://img.shields.io/github/license/khulnasoft/openapi-parser)](https://github.com/khulnasoft/openapi-parser/blob/main/LICENSE)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

Modern OpenAPI parser written in TypeScript, with support for Swagger 2.0, OpenAPI 3.0 and OpenAPI 3.1

## Installation

```
npm add @readyapi/openapi-parser
```

## Usage

### Parse

```ts
import { resolve } from '@readyapi/openapi-parser'

const file = `{
  "openapi": "3.1.0",
  "info": {
    "title": "Hello World",
    "version": "1.0.0"
  },
  "paths": {}
}`

const result = await resolve(file)
```

### Validate

```ts
import { validate } from '@readyapi/openapi-parser'

const file = `{
  "openapi": "3.1.0",
  "info": {
    "title": "Hello World",
    "version": "1.0.0"
  },
  "paths": {}
}`

const result = await validate(file)

console.log(result.valid)

if (!result.valid) {
  console.log(result.errors)
}
```

### Version

```ts
import { resolve } from '@readyapi/openapi-parser'

const file = `{
  "openapi": "3.1.0",
  "info": {
    "title": "Hello World",
    "version": "1.0.0"
  },
  "paths": {}
}`

const result = await resolve(file)

console.log(result.version)
```
npm package: @readyapi/themes
Description: the default CSS variables for all Readyapi packages
Author: KhulnaSoft
Latest version: 0.0.1

# Readyapi Themes

[![Version](https://img.shields.io/npm/v/%40readyapi/themes)](https://www.npmjs.com/package/@readyapi/themes)
[![Downloads](https://img.shields.io/npm/dm/%40readyapi/themes)](https://www.npmjs.com/package/@readyapi/themes)
[![License](https://img.shields.io/npm/l/%40readyapi%2Fthemes)](https://www.npmjs.com/package/@readyapi/themes)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

## Installation

```bash
npm install @readyapi/themes
```

## Themes

The following themes are available:

- `default` (which is the … default)
- `alternate`
- `moon`
- `purple`
- `solarized`

And if you don’t want to load any theme:

- `none`
npm package: @readyapi/use-codemirror
Description: CodeMirror for Vue
Author: Readyapi
Latest version: 0.0.1

# Readyapi useCodeMirror()

[![Version](https://img.shields.io/npm/v/%40readyapi/use-codemirror)](https://www.npmjs.com/package/@readyapi/use-codemirror)
[![Downloads](https://img.shields.io/npm/dm/%40readyapi/use-codemirror)](https://www.npmjs.com/package/@readyapi/use-codemirror)
[![License](https://img.shields.io/npm/l/%40readyapi%2Fuse-codemirror)](https://www.npmjs.com/package/@readyapi/use-codemirror)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

## Installation

```bash
npm install @readyapi/use-codemirror
```

## Usage

```vue
<script setup>
import { CodeMirror } from '@readyapi/use-codemirror'
</script>

<CodeMirror
  class="my-custom-class"
  content="const foobar = true"
  readOnly
  @change="(value) => …" />
```
npm package: @readyapi/use-tooltip
Description: use tooltips with Vue
Author: KhulnaSoft
Latest version: 0.0.1

# Readyapi useTooltip()

[![Version](https://img.shields.io/npm/v/%40readyapi/use-tooltip)](https://www.npmjs.com/package/@readyapi/use-tooltip)
[![Downloads](https://img.shields.io/npm/dm/%40readyapi/use-tooltip)](https://www.npmjs.com/package/@readyapi/use-tooltip)
[![License](https://img.shields.io/npm/l/%40readyapi%2Fuse-tooltip)](https://www.npmjs.com/package/@readyapi/use-tooltip)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)

## Installation

```bash
npm install @readyapi/use-tooltip
```