OAP
GitHubDownload
Your AI PanelOpen-source · v1.1.3

One single send.
JSON that's validated, ready to plug in.

OneShotAiPanel runs a task in a single turn: it connects to the LLM you configure (opencode, shadcn, fallback or your own adapter), streams and validates JSON against schemas, then plugs the results into your stack.

Try the playgroundGitHubDownload
✓ Real-time streaming✓ Validated JSON schemas (zod)✓ Diff of existing content✓ i18n fr / en

Presentation

How it works

A React component that connects to the LLM of your choice and turns a request into validated deliverables, without manual copy-paste.

1. Describe the task

A user prompt, a system prompt and context files. The component assembles the final prompt.

2. Configure the model connection

The component connects to the provider you configure via the adapter (opencode, shadcn, fallback) or your own onSend. Without this connection, nothing runs.

3. A single send

The model responds with streaming JSON. Each ticket expects a precise, schema-controlled structure.

4. Automatic validation

The response is validated against the schemas. On mismatch, targeted feedback is sent back for a second turn.

5. Diff & review

If content already exists, a line-by-line diff shows you what changes before integrating.

6. Plug

Retrieve the selected content via onPlug and wire it into your code, adapter or SDK.

Wireframe

Explore the component

The real component, read-only. Hover and click the numbered spots to understand each area.

OneShot AI Panel
Status
System prompt
Additional instructions
Additional context
Source files

Each file must point to an absolute path or URL (local file, CDN, server, drive...) that the agent can read.

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

Tickets describe concrete tasks for the agent to complete. Each ticket may have a description, an explanation, and an expected response schema. A ticket marked « done » is excluded from the prompt.

Login form

Email + password, error handling.

Sign up

Account creation with validation.

Route protection

Middleware for private routes.

AI Response
No response
Click « Generate » to get a response

Click a numbered spot to explore each area. Hover for a preview.

1

Header

The header bar carries the task title, a help button (integration points and credits) and the settings button. Everything is configurable via props (title, showInfoButton, showSettingsButton…).

Configuration

All options, by props

Configuration happens at the integration layer. Here are the main options.

Content

  • titlestring

    Title shown in the component header.

  • systemPromptstring

    The role and rules given to the model.

  • initialUserPromptstring

    The initial request pre-filled in the user field.

Context

  • filesAiPanelContextFile[]

    Project files provided as context to the model.

  • ticketsAiPanelTicket[]

    Task breakdown, each ticket with its JSON schema.

Contract

  • parserAiPanelResponseParser

    Customize response parsing and validation.

  • invalidMode'warn' | 'block'

    Warn or block when the response does not validate the schemas.

Adapter

  • adapterAiAdapterConfig

    Provider (opencode, shadcn, fallback), model and API key.

  • onSendAiPanelSendHandler

    Replace the send with your own logic (SDK, proxy…).

Events

  • onPlugfn(response, keys)

    Called when the user integrates the selected contents.

i18n

  • language'fr' | 'en'

    Interface language.

  • labelsPartial<AiPanelLabels>

    Fine-grained override of any label.

UI

  • actionLabelstring

    Label of the main run button.

  • showInfoButtonboolean

    Shows the help / integration / credits button.

  • showSettingsButtonboolean

    Shows the settings button.

  • showInfoIntegrationboolean

    Shows the integration point in the help panel.

  • showInfoCreditsboolean

    Shows the credits in the help panel.

Diff

See before integrating

When a ticket already has content, the component compares and lets you choose.

A ticket with existing content?

The component computes a line-by-line diff between the existing content and the model's proposal. You keep, replace or mix before integrating.

Playground

Try it here

The component really runs on this page. Tune the props, pick the display, launch.

Allowed JSON types in the ticket response format:

objectarraystringnumberintegerbooleannull

The response format describes the expected value for each ticket. Example:{ "type": "object", "properties": { "email": { "type": "string" } }, "required": ["email"] }

Ready to play

The generation is fully simulated (streaming + validation), no server.

Counters

The site in numbers

Public counters, fed in real time. One click, one number.

0Visits
0GitHub clicks
0Downloads

Best-effort counting · 1 visit per session.