open-index/open-npm huggingface dataset:
npm package: @marimo-team/blocks
Description: React components for building your own Python notebook
Latest version: 0.0.2

# @marimo-team/blocks

React components for building your own Python editor/notebook in the browser, powered by [marimo](https://github.com/marimo-team/marimo) and [Pyodide](https://github.com/pyodide/pyodide).

## Installation

```bash
npm install @marimo-team/blocks
# or
yarn add @marimo-team/blocks
# or
pnpm add @marimo-team/blocks
```

## Usage

```tsx
import {
  Provider as MarimoProvider,
  CellEditor,
  CellOutput,
  CellRunButton,
  NotebookRunButton,
} from "@marimo-team/blocks";

function MyNotebook() {
  return (
    <MarimoProvider
      pyodideUrl="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"
      dependencies={["numpy", "pandas"]}
      onReady={() => console.log("Pyodide ready!")}
    >
      <div className="cell">
        <CellEditor
          id="cell1"
          code="import numpy as np\nnp.random.rand(10)"
          onChange={(code) => console.log("Code changed:", code)}
        />
        <CellOutput id="cell1" />
        <CellRunButton
          id="cell1"
          onExecutionComplete={(error) => {
            if (error) console.error("Execution failed:", error);
          }}
        />
      </div>

      <NotebookRunButton
        onExecutionComplete={() => console.log("All cells executed!")}
      />
    </MarimoProvider>
  );
}
```

## Components

### Provider

The root component that initializes Pyodide and provides context to child components.

### CellEditor

A code editor component built on CodeMirror with Python syntax highlighting.

### CellOutput

Displays the output of Python code execution, including stdout, stderr, and rich output types.

### CellRunButton

A button to execute a single cell's code.

### NotebookRunButton

A button to execute all cells in sequence.

## Custom Renderers

You can add custom renderers to handle specific MIME types in cell outputs. Here's an example using [@textea/json-viewer](https://www.npmjs.com/package/@textea/json-viewer) for JSON output:

```tsx
import { JsonViewer } from "@textea/json-viewer";

<MarimoProvider
  dependencies={["numpy"]}
  renderers={[
    {
      mimeType: "application/json",
      priority: 1,
      render: (data) => (
        <JsonViewer value={data} displayDataTypes={false} />
      ),
    },
  ]}
>
  {/* ... */}
</MarimoProvider>
```

## Development

```bash
# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run tests
pnpm test

# Build for production
pnpm build
```

## License

Apache-2.0
npm package: @marimo-team/codemirror-mcp
Description: CodeMirror plugin for Model Context Provider
Latest version: 0.1.5

# codemirror-mcp

A CodeMirror extension that implements the [Model Context Protocol](https://modelcontextprotocol.io) (MCP) for resource mentions and prompt commands.

## Features

- Resource Completion: Autocomplete for `@resource` mentions
- Resource Decorations: Visual styling for `@resource` mentions with click handling
- Prompt Completion: Autocomplete for `/prompt` commands
- Theme Support: Customizable styling

## Installation

```bash
npm install @marimo-team/codemirror-mcp @modelcontextprotocol/sdk
# or
pnpm add @marimo-team/codemirror-mcp @modelcontextprotocol/sdk
```

### Peer Dependencies

This module requires the following peer dependencies:

- `@codemirror/view`
- `@codemirror/state`
- `@modelcontextprotocol/sdk`

## Usage

```ts
import { WebSocketClientTransport } from "@modelcontextprotocol/sdk/client/websocket.js";
import { mcpExtension, extractResources } from '@marimo-team/codemirror-mcp';
import { EditorView } from '@codemirror/view';

const transport = new WebSocketClientTransport(new URL('ws://localhost:8080'));

const view = new EditorView({
  extensions: [
    // ... other extensions

    mcpExtension({
      // Required options
      transport: transport,

      // Optional options
      logger: console,
      clientOptions: {
        name: 'your-client',
        version: '1.0.0'
      },
      onResourceClick: (resource) => {
        // Open resource
        // e.g. open in a tab, etc.
      },
    }),

    // Handle submit
    keymap.of([
      {
        key: 'Enter',
        run: () => {
          const resources = extractResources(view);
          const formattedResources = resources
            .map(
              ({ resource }) =>
                `${resource.uri} (${resource.type}): ${resource.description || resource.name}`
            )
            .join('\n');
          const prompt = `${view.state.doc.toString()}\n\nResources:\n${formattedResources}`;
          // ... submit prompt to AI server
          // const response = await generateText(prompt);
        },
      },
    ]),
  ],
  parent: document.querySelector('#editor'),
});
```

## Resources

- Use `@resource-uri` syntax to reference resources
- Resources are visually decorated and clickable
- Click handling for resource interactions
- Hover tooltips show resource details
- Customizable theme

## Prompts

- Use `/command` syntax for prompt commands
- Autocomplete for available prompts

## Development

```bash
# Install dependencies
pnpm install

# Run tests
pnpm test

# Run demo
pnpm dev
```

## License

MIT
npm package: @marimo-team/codemirror-sql
Description: CodeMirror plugin for SQL
Latest version: 0.2.4

# codemirror-sql

A CodeMirror extension for SQL linting and visual gutter indicators. Built by and used in [marimo](https://github.com/marimo-team/marimo).

## Features

- ⚡ **Real-time validation** - SQL syntax checking as you type with detailed error messages
- 🎨 **Visual gutter** - Color-coded statement indicators and error highlighting
- 💡 **Hover tooltips** - Schema info, keywords, and column details on hover
- 🔮 **CTE autocomplete** - Auto-complete support for CTEs
- 🎯 **Query-aware resolution** - Context-sensitive schema and column suggestions
- 🔍 **Additional dialects** - DuckDB, BigQuery
- 🛠️ **Custom renderers** - Customizable tooltip rendering for tables, columns, and keywords

## Installation

```bash
npm install @marimo-team/codemirror-sql
# or
pnpm add @marimo-team/codemirror-sql
```

## Usage

### Basic Setup

```ts
import { sql, StandardSQL } from "@codemirror/lang-sql";
import { basicSetup, EditorView } from "codemirror";
import { sqlExtension, cteCompletionSource } from "@marimo-team/codemirror-sql";

const schema = {
  users: ["id", "name", "email", "active"],
  posts: ["id", "title", "content", "user_id"],
};

const editor = new EditorView({
  doc: "SELECT * FROM users WHERE active = true",
  extensions: [
    basicSetup,
    sql({
      dialect: StandardSQL,
      schema: schema,
      upperCaseKeywords: true,
    }),
    StandardSQL.language.data.of({
      autocomplete: cteCompletionSource,
    }),
    sqlExtension({
      linterConfig: {
        delay: 250, // Validation delay in ms
      },
      gutterConfig: {
        backgroundColor: "#3b82f6", // Current statement color
        errorBackgroundColor: "#ef4444", // Error highlight color
        hideWhenNotFocused: true,
      },
      enableHover: true,
      hoverConfig: {
        schema: schema,
        hoverTime: 300,
        enableKeywords: true,
        enableTables: true,
        enableColumns: true,
      },
    }),
  ],
  parent: document.querySelector("#editor"),
});
```

## Additional Dialects

This extension adds support for additional dialects:

- **DuckDB**
- **BigQuery**

## Keyword Completion

The extension includes keyword documentation for common **SQL keywords** including used in hover and completion,
which can be found in the `src/data` directory.

## Demo

See the [demo](https://marimo-team.github.io/codemirror-sql/) for a full example.

## Development

```bash
# Install dependencies
pnpm install

# Run tests
pnpm test

# Run demo
pnpm dev
```

## License

Apache 2.0