Skip to content

Ib page creation #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Corb3nik merged 3 commits into from
Nov 29, 2025
Merged

Ib page creation #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ce26460
Update page document to use vue
Corb3nik Nov 29, 2025
e154318
Update examples
Corb3nik Nov 29, 2025
569c2e6
More tooltip placement fixes
Corb3nik Nov 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions AGENTS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,13 @@ Example structure:

This convention ensures consistency across all Vue component examples in the documentation.

#### UI Component Guidelines

- **Never use `sdk.ui` methods**: Methods like `sdk.ui.button()`, `sdk.ui.card()`, `sdk.ui.well()`, `sdk.ui.httpRequestEditor()`, etc. are deprecated and should not be used in documentation examples
- **Always use PrimeVue components**: Use PrimeVue components (e.g., `Button` from `primevue/button`, `Card` from `primevue/card`) for all UI elements
- **Style with Tailwind CSS**: Use Tailwind CSS utility classes for layout and styling instead of inline styles or custom CSS
- **Vue is the standard**: All page creation examples should use Vue.js components, not DOM manipulation (`document.createElement`, `appendChild`, etc.)

#### For Reference

- Be accurate, complete, and concise
Expand Down
123 changes: 8 additions & 115 deletions src/guides/ai.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,14 @@ const provider = sdk.ai.createProvider();

This returns an `AIProvider` instance that can be used with the `ai` library.

::: tip
The AI provider is compatible with all features of the `ai` library, including text generation, streaming, tool calling, and more. Refer to the [ai SDK documentation](https://ai-sdk.dev/) for advanced usage.
:::

::: info
The AI provider uses Caido's configured AI settings. Users can configure their AI provider preferences in Caido's settings.
:::

::: warning
AI operations can be resource-intensive and may have rate limits. Consider implementing error handling and user feedback for long-running AI operations.
:::
Expand Down Expand Up @@ -49,84 +57,6 @@ export const init = async (sdk: CaidoSDK) => {
};
```

### AI-Powered Request Analysis

This example creates a page with a button that analyzes HTTP requests using AI. When clicked, it extracts text from the active editor, sends it to the AI provider for security analysis, and displays the results.

```ts
import type { Caido } from "@caido/sdk-frontend";
import { generateText } from "ai";

export type CaidoSDK = Caido;

const createPage = (sdk: CaidoSDK) => {
const container = document.createElement("div");
container.style.padding = "20px";
container.style.display = "flex";
container.style.flexDirection = "column";
container.style.gap = "16px";

const analyzeButton = sdk.ui.button({
variant: "primary",
label: "Analyze Request",
});

const resultText = document.createElement("div");
resultText.style.padding = "16px";
resultText.style.backgroundColor = "#f5f5f5";
resultText.style.borderRadius = "4px";
resultText.style.minHeight = "100px";

analyzeButton.addEventListener("click", async () => {
const editor = sdk.window.getActiveEditor();
if (!editor) {
sdk.window.showToast("No active editor", { variant: "warning" });
return;
}

const requestText = editor.getSelectedText() || editor.getEditorView().state.doc.toString();

if (!requestText) {
sdk.window.showToast("No request text found", { variant: "warning" });
return;
}

resultText.textContent = "Analyzing...";
analyzeButton.disabled = true;

try {
const provider = sdk.ai.createProvider();
const { text } = await generateText({
model: provider,
prompt: `Analyze this HTTP request and identify potential security issues:\n\n${requestText}`,
});

resultText.textContent = text;
} catch (error) {
resultText.textContent = `Error: ${error}`;
sdk.log.error("AI analysis failed:", error);
} finally {
analyzeButton.disabled = false;
}
});

container.appendChild(analyzeButton);
container.appendChild(resultText);

const card = sdk.ui.card({
body: container,
});

sdk.navigation.addPage("/ai-analyzer", {
body: card,
});
};

export const init = (sdk: CaidoSDK) => {
createPage(sdk);
};
```

### AI-Powered Code Generation

This example registers a command that uses AI to generate Caido plugin code based on a user's description. The command prompts for a description, generates code using AI, and logs the result.
Expand Down Expand Up @@ -164,40 +94,3 @@ export const init = (sdk: CaidoSDK) => {
sdk.commandPalette.register("ai-generate-code");
};
```

### Streaming AI Responses

This example demonstrates how to stream AI responses in real-time. It processes HTTP request text through AI analysis and calls a callback function for each chunk of the response as it arrives.

```ts
import type { Caido } from "@caido/sdk-frontend";
import { streamText } from "ai";

export type CaidoSDK = Caido;

const streamAnalysis = async (sdk: CaidoSDK, requestText: string, onChunk: (text: string) => void) => {
const provider = sdk.ai.createProvider();

const { textStream } = await streamText({
model: provider,
prompt: `Analyze this HTTP request:\n\n${requestText}`,
});

for await (const chunk of textStream) {
onChunk(chunk);
}
};

export const init = (sdk: CaidoSDK) => {
// Use streaming for real-time AI responses
// Implementation depends on your UI needs
};
```

::: tip
The AI provider is compatible with all features of the `ai` library, including text generation, streaming, tool calling, and more. Refer to the [ai SDK documentation](https://ai-sdk.dev/) for advanced usage.
:::

::: info
The AI provider uses Caido's configured AI settings. Users can configure their AI provider preferences in Caido's settings.
:::
133 changes: 8 additions & 125 deletions src/guides/application_events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

You can subscribe to various application events to react to state changes in Caido, such as project selection, workflow lifecycle, replay session changes, and backend plugin events.

::: tip
Application events enable reactive programming patterns. Use them to keep your plugin's state synchronized with Caido's state.
:::

## Subscribing to Backend Plugin Events

To listen for events sent from your backend plugin:
Expand Down Expand Up @@ -35,6 +39,10 @@ const handler = sdk.projects.onCurrentProjectChange((event) => {
handler.stop();
```

::: info
All event subscription methods return a `ListenerHandle` with a `stop()` method. Call `stop()` when your plugin is unloaded to prevent memory leaks.
:::

## Subscribing to Workflow Events

### Workflow Created
Expand Down Expand Up @@ -99,88 +107,6 @@ For more details on navigation events, see [How to Listen to Page Navigation Cha

## Examples

### Comprehensive Event Monitor

This example creates a comprehensive event monitoring page that subscribes to all major application events (projects, workflows, replay sessions, navigation, and backend events). It displays all events in a scrollable log with timestamps and event types.

```ts
import type { Caido } from "@caido/sdk-frontend";

export type CaidoSDK = Caido;

const createPage = (sdk: CaidoSDK) => {
const container = document.createElement("div");
container.style.padding = "20px";
container.style.display = "flex";
container.style.flexDirection = "column";
container.style.gap = "16px";

const eventLog = document.createElement("div");
eventLog.id = "event-log";
eventLog.style.maxHeight = "400px";
eventLog.style.overflowY = "auto";
eventLog.style.padding = "8px";
eventLog.style.backgroundColor = "#f5f5f5";
eventLog.style.borderRadius = "4px";
eventLog.style.fontFamily = "monospace";
eventLog.style.fontSize = "12px";

const addLogEntry = (type: string, message: string) => {
const entry = document.createElement("div");
entry.style.marginBottom = "4px";
entry.style.padding = "4px";
entry.style.borderLeft = "3px solid #2196f3";
entry.innerHTML = `<strong>[${type}]</strong> ${message} <span style="color: #666;">(${new Date().toLocaleTimeString()})</span>`;
eventLog.appendChild(entry);
eventLog.scrollTop = eventLog.scrollHeight;
};

// Subscribe to all events
sdk.projects.onCurrentProjectChange((event) => {
addLogEntry("Project", `Changed to: ${event.projectId || "None"}`);
});

sdk.workflows.onCreatedWorkflow((workflow) => {
addLogEntry("Workflow", `Created: ${workflow.name}`);
});

sdk.workflows.onUpdatedWorkflow((workflow) => {
addLogEntry("Workflow", `Updated: ${workflow.name}`);
});

sdk.workflows.onDeletedWorkflow((workflowId) => {
addLogEntry("Workflow", `Deleted: ${workflowId}`);
});

sdk.replay.onCurrentSessionChange((event) => {
addLogEntry("Replay", `Session changed to: ${event.sessionId || "None"}`);
});

sdk.navigation.onPageChange((event) => {
addLogEntry("Navigation", `Page changed to: ${event.routeId}`);
});

// Backend events (if your backend sends events)
sdk.backend.onEvent("custom-event", (data) => {
addLogEntry("Backend", `Custom event: ${JSON.stringify(data)}`);
});

container.appendChild(eventLog);

const card = sdk.ui.card({
body: container,
});

sdk.navigation.addPage("/event-monitor", {
body: card,
});
};

export const init = (sdk: CaidoSDK) => {
createPage(sdk);
};
```

### Project-Specific Configuration

This example manages project-specific configuration by listening to project change events. When switching projects, it cleans up resources from the previous project and loads configuration for the new project.
Expand Down Expand Up @@ -245,46 +171,3 @@ export const init = (sdk: CaidoSDK) => {
});
};
```

### Real-Time Updates

This example demonstrates real-time UI updates based on application events. It listens to replay session changes and page navigation events, calling update functions to keep the UI synchronized with the current state.

```ts
import type { Caido } from "@caido/sdk-frontend";

export type CaidoSDK = Caido;

export const init = (sdk: CaidoSDK) => {
// Update UI in real-time based on events
sdk.replay.onCurrentSessionChange((event) => {
if (event.sessionId) {
// Update UI to reflect current session
updateSessionUI(event.sessionId);
}
});

sdk.navigation.onPageChange((event) => {
// Update UI based on current page
updatePageUI(event.routeId);
});

const updateSessionUI = (sessionId: string) => {
// Update UI elements related to the current session
sdk.log.debug("Updating UI for session:", sessionId);
};

const updatePageUI = (routeId: string) => {
// Update UI elements based on the current page
sdk.log.debug("Updating UI for page:", routeId);
};
};
```

::: tip
Application events enable reactive programming patterns. Use them to keep your plugin's state synchronized with Caido's state.
:::

::: info
All event subscription methods return a `ListenerHandle` with a `stop()` method. Call `stop()` when your plugin is unloaded to prevent memory leaks.
:::
Loading