# model-context-playground

A React component for interacting with Model Context Servers.

## Installation

```bash
npm install model-context-playground
```


## Usage

```tsx
import React from 'react'
import { ModelContextPlayground } from 'model-context-playground'

const App: React.FC = () => {
  return (
    <ModelContextPlayground />
  )
}

export default App
```

## Styling

This component uses Tailwind CSS for styling. You have two options:

### Option 1: Use with Tailwind CSS (Recommended)

If your project already uses Tailwind CSS, the component will inherit your theme and work seamlessly. Make sure to include the component's path in your Tailwind content configuration:

```js
// tailwind.config.js
module.exports = {
  content: [
    // ... your existing paths
    './node_modules/model-context-playground/dist/**/*.{js,ts,jsx,tsx}',
  ],
  // ... rest of config
}
```

### Option 2: Use Pre-compiled CSS

If you don't want to set up Tailwind CSS, you can import the pre-compiled CSS file that contains all necessary styles:

```tsx
// Import the pre-compiled CSS
import 'model-context-playground/styles.css';

// Then use the component normally
import { ModelContextPlaygorund } from 'model-context-playground';
```

The pre-compiled CSS file includes all Tailwind utilities used by the component, so you don't need to install or configure Tailwind CSS in your project.

## License

MIT © Benjamin Goodman
