@builderai/dev-notes

v1.0.13

Published

8 months ago

visualizador de guias de desarrollo

0High
0Medium
0Low

builderai

Cheatsheet Manager

A web component for managing and generating development cheatsheets with AI assistance.

Features

📋 Browse and view existing cheatsheets
🔍 Search through your cheatsheet collection
✨ Generate new cheatsheets using AI (Gemini API)
🎨 Syntax highlighting for code snippets
🌐 Built as a web component for easy integration

Installation

As a dependency in your project

npm install @builderai/cheatsheet

Development setup

Clone the repository
Install dependencies:

npm install

Create a .env file with your Gemini API key:

GEMINI_API_KEY=your_api_key_here
CHEATSHEET_DIR=./cheatsheets
PORT=9876

Usage

As a web component

<script type="module">
  import '@builderai/cheatsheet/dev-notes';
</script>

<dev-notes></dev-notes>

Development server

Run the development server:

npm run dev

This will:

Build the component with Rollup in watch mode
Start the Express server for API endpoints
Serve the application at http://localhost:9876

Building

Build for production:

npm run build

API Endpoints

The component interacts with the following API endpoints:

GET /api/cheatsheets - List all available cheatsheets
GET /api/cheatsheets/:filename - Get the content of a specific cheatsheet
POST /api/generate - Generate a new cheatsheet using AI

Project Structure

/
├── dist/               # Compiled output
├── public/             # Static assets
├── src/
│   ├── components/     # Web components
│   │   └── dev-notes.js
│   ├── index.html      # HTML template
│   └── index.ts        # Entry point
├── cheatsheets/        # Generated cheatsheets
├── server.js           # Express server for API
├── rollup.config.js    # Rollup configuration
└── package.json        # Project metadata

Technologies

Lit - For creating web components
Express - Backend server
Rollup - Module bundler
Prism.js - Syntax highlighting
Gemini API - AI content generation

License


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <mi-componente>
        <h1>Componente</h1>
    </mi-componente>
    <script type="module">
        import "https://esm.sh/@builderai/dev-notes"
    </script>
</body>
</html>