OAP
GitHubTélécharger
Votre Panel AIOpen-source · v1.1.3

Un seul envoi.
Du JSON validé, prêt à intégrer.

OneShotAiPanel exécute une tâche en un tour : il se connecte au LLM que vous configurez (opencode, shadcn, fallback ou votre adaptateur), streame et valide le JSON contre des schémas, puis plug les contenus dans votre stack.

Essayer le playgroundGitHubTélécharger
✓ Streaming temps réel✓ Schémas JSON validés (zod)✓ Diff des contenus existants✓ i18n fr / en

Présentation

Comment ça marche

Un composant React qui se connecte au LLM de votre choix et transforme une demande en livrables validés, sans copier-coller manuel.

1. Décrivez la tâche

Un prompt utilisateur, un prompt système et les fichiers de contexte. Le composant assemble le prompt final.

2. Configurez la connexion au modèle

Le composant se connecte au provider que vous configurez via l'adapter (opencode, shadcn, fallback) ou votre propre onSend. Sans cette connexion, rien ne fonctionne.

3. Un envoi unique

Le modèle répond en streaming JSON. Les tickets attendent chacun une structure précise, contrôlée par schéma.

4. Validation automatique

La réponse est validée contre les schémas. En cas d'écart, un feedback ciblé est renvoyé pour un second tour.

5. Diff & review

Si du contenu existe déjà, un diff ligne à ligne vous montre ce qui change avant d'intégrer.

6. Plug

Récupérez les contenus sélectionnés via onPlug et branchez-les dans votre code, votre adapter ou votre SDK.

Wireframe

Explorez le composant

Le vrai composant, en lecture seule. Survolez et cliquez les points numérotés pour comprendre chaque zone.

OneShot AI Panel
Statut
Prompt système
Instructions supplémentaires
Contexte additionnel
Fichiers source

Chaque fichier doit pointer vers un chemin absolu ou une URL (fichier local, CDN, serveur, drive...) que l'agent pourra consulter.

auth.ts
src/lib/auth.ts
package.json
package.json
Tickets

Les tickets décrivent les tâches concrètes à réaliser par l'agent. Chaque ticket peut avoir une description, une explication, et un schéma de réponse attendu. Un ticket marqué « fait » est exclu du prompt.

Formulaire de connexion

Email + mot de passe, gestion des erreurs.

Inscription

Création de compte avec validation.

Protection des routes

Middleware pour les routes privées.

Réponse IA
Aucune réponse
Cliquez sur « Générer » pour obtenir une réponse

Cliquez sur un point numéroté pour explorer chaque zone. Survolez pour un aperçu.

1

En-tête

Le bandeau d'en-tête porte le titre de la tâche, un bouton d'aide (points d'intégration et crédits) et le bouton de configuration. Tout est configurable par props (title, showInfoButton, showSettingsButton…).

Configuration

Toutes les options, par props

La configuration se fait au niveau de la couche d'intégration. Voici les options principales.

Contenu

  • titlestring

    Titre affiché dans l'en-tête du composant.

  • systemPromptstring

    Le rôle et les règles donnés au modèle.

  • initialUserPromptstring

    La demande initiale pré-remplie dans le champ utilisateur.

Contexte

  • filesAiPanelContextFile[]

    Fichiers du projet fournis comme contexte au modèle.

  • ticketsAiPanelTicket[]

    Découpage de la tâche, chaque ticket avec son schéma JSON.

Contrat

  • parserAiPanelResponseParser

    Personnalise le parsing et la validation de la réponse.

  • invalidMode'warn' | 'block'

    Avertir ou bloquer quand la réponse ne valide pas les schémas.

Adapter

  • adapterAiAdapterConfig

    Provider (opencode, shadcn, fallback), modèle et clé API.

  • onSendAiPanelSendHandler

    Remplacer l'envoi par votre propre logique (SDK, proxy…).

Événements

  • onPlugfn(response, keys)

    Appelé quand l'utilisateur intègre les contenus sélectionnés.

i18n

  • language'fr' | 'en'

    Langue de l'interface.

  • labelsPartial<AiPanelLabels>

    Surcharge fine de n'importe quel libellé.

UI

  • actionLabelstring

    Libellé du bouton principal d'exécution.

  • showInfoButtonboolean

    Affiche le bouton d'aide / intégration / crédits.

  • showSettingsButtonboolean

    Affiche le bouton de configuration.

  • showInfoIntegrationboolean

    Affiche le point d'intégration dans le panneau d'aide.

  • showInfoCreditsboolean

    Affiche les crédits dans le panneau d'aide.

Diff

Voir avant d'intégrer

Quand un ticket possède déjà un contenu, le composant compare et laisse choisir.

Un ticket avec un contenu existant ?

Le composant calcule un diff ligne à ligne entre le contenu existant et la proposition du modèle. Vous gardez, remplacez ou mélangez avant d'intégrer.

Playground

Essayez-le ici

Le composant tourne réellement sur cette page. Réglez les props, choisissez l'affichage, lancez.

Types JSON autorisés dans le format de réponse des tickets :

objectarraystringnumberintegerbooleannull

Le format de réponse décrit la valeur attendue pour chaque ticket. Exemple :{ "type": "object", "properties": { "email": { "type": "string" } }, "required": ["email"] }

Prêt à jouer

La génération est simulée de bout en bout (streaming + validation), sans serveur.

Compteurs

Le site en chiffres

Des compteurs publics, alimentés en temps réel. Un clic, un chiffre.

0Visites
0Clics GitHub
0Téléchargements

Comptage best-effort · 1 visite par session.