How long does the integration take?

Change one base URL in an OpenAI-compatible client, or install the Python or TypeScript SDK; the quickstart routes a first request in a few minutes.

Will this lock us into another vendor?

No. The router is Apache-2.0 open source, your provider keys stay yours, and the API is OpenAI-compatible, so leaving is a change of base URL.

What happens when a provider fails?

The router falls back to the next model your policy allows and records the fallback in the trace, so an outage costs a retry, not an incident.

global-search - Prompt - OpenSmartRoute

Name: global-search
Author: Daniel-Braun123

Prompt file imported from Daniel-Braun123/CookBook (.github/prompts/global-search.prompt.md). Fill in {{query}} before use. Copyright stays with the author.

Implement the global search feature across both the Spring Boot backend (CookBook-be/) and the Angular frontend (CookBook-ui/). Follow every step below exactly.

Context

Frontend

Framework: Angular 17+ standalone components, Tailwind CSS, Angular Material icons
Existing search bar is in src/app/components/header/header.component.html (lines 16-31) — it is a plain <input> with isSearchFocused tracking but no logic yet
Routes are in src/app/app.routes.ts — no search route exists yet
RecipeService (src/app/services/recipe.service.ts) has getAllRecipes() and getRecipesByCategorieFilter() but no search method yet
Recipe model is in src/app/models/recipe.ts

Backend

Spring Boot project in CookBook-be/src/main/java/de/cookBook/backend/
Controller: controller/RecipesController.java — mapped to /api/recipes
Service: service/RecipeService.java
Repository: repository/RecipeRepository.java — extends JpaRepository<Recipes, Long>
Entity: entities/Recipes.java — has title (String), description (TEXT), tags (JSON)

Step 0 – Create the backend search endpoint

0a – Add a repository method to `RecipeRepository.java`

Add a Spring Data JPA derived query that searches title and description case-insensitively:

List<Recipes> findByTitleContainingIgnoreCaseOrDescriptionContainingIgnoreCase(
    String title, String description
);

Also add a helper default method for convenience:

default List<Recipes> searchByQuery(String query) {
    return findByTitleContainingIgnoreCaseOrDescriptionContainingIgnoreCase(query, query);
}

0b – Add a service method to `RecipeService.java`

public List<RecipeResponseDto> searchRecipes(String query) {
    if (query == null || query.isBlank()) {
        return List.of();
    }
    return toResponseList(recipeRepository.searchByQuery(query.trim()));
}

0c – Add a controller endpoint to `RecipesController.java`

@GetMapping("/search")
public List<RecipeResponseDto> searchRecipes(@RequestParam String query) {
    return recipeService.searchRecipes(query);
}

This exposes GET /api/recipes/search?query=Pfannkuchen.

Step 1 – Add a `searchRecipes` method to the frontend `RecipeService`

Add a new method that calls the backend endpoint created in Step 0. Guard against empty input so the HTTP call is never made with a blank query:

searchRecipes(query: string): Observable<Recipe[]> {
  if (!query?.trim()) return of([]);
  return this.http.get<Recipe[]>(this.API_URL + '/search', { params: { query: query.trim() } });
}

Import of from rxjs at the top of the file if it is not already imported.

Step 2 – Create the `SearchResultsComponent`

Create src/app/components/search-results/search-results.component.ts and its HTML template.

Behaviour

Read the ?q= query param from the URL on init via ActivatedRoute
Call recipeService.searchRecipes(query) and display results using the existing <app-recipe-card> component
Show a loading skeleton while fetching
Show a friendly empty-state message ("Keine Rezepte für „{query}" gefunden") when results are empty
Include <app-header> and <app-footer> so the page is self-contained

Template structure (Tailwind + existing design tokens)

<app-header />
<main class="container mx-auto px-4 py-8">
  <h1 class="font-display text-3xl font-bold mb-2">Suchergebnisse für „{{ query }}"</h1>
  <p class="text-muted-foreground mb-8">{{ recipes.length }} Rezepte gefunden</p>
  <!-- loading / empty-state / recipe grid -->
</main>
<app-footer />

Step 3 – Register the new route

In src/app/app.routes.ts add a lazy-loaded route before the ** wildcard:

{
  path: 'search',
  loadComponent: () =>
    import('./components/search-results/search-results.component')
      .then(m => m.SearchResultsComponent)
}

Step 4 – Create the `SearchOverlayComponent`

Create src/app/components/search-overlay/search-overlay.component.ts and its template.

Behaviour

Accepts @Input() visible = false and emits @Output() closed = new EventEmitter<void>()
Contains a centred search input (auto-focused via cdkTrapFocus or a ViewChild + focus() call in ngOnChanges)

Below the input shows pre-assigned suggestion chips:

suggestions = ['Pfannkuchen', 'Pasta', 'Salat', 'Suppe', 'Pizza', 'Kuchen'];

Clicking a chip sets the input value and immediately navigates: router.navigate(['/search'], { queryParams: { q: term } })
Pressing Enter or clicking a search button with a non-empty query does the same navigation
Pressing Escape or clicking the dark backdrop emits closed

Template structure

<!-- backdrop -->
<div class="fixed inset-0 bg-black/50 z-50" (click)="close()"></div>

<!-- modal panel -->
<div class="fixed top-24 left-1/2 -translate-x-1/2 w-full max-w-2xl z-50 px-4">
  <div class="bg-card rounded-2xl shadow-2xl p-6">
    <!-- search input -->
    <!-- suggestion chips -->
  </div>
</div>

Step 5 – Wire the overlay into `HeaderComponent`

`header.component.ts`

Add isSearchOverlayOpen = false
Inject Router
Add method openSearchOverlay() and closeSearchOverlay()

`header.component.html`

Make the existing search input a button-like trigger that calls openSearchOverlay() on (click) (keep focus animation)

Render the overlay conditionally:

<app-search-overlay
  *ngIf="isSearchOverlayOpen"
  [visible]="isSearchOverlayOpen"
  (closed)="closeSearchOverlay()"
/>

Import SearchOverlayComponent in the imports array of HeaderComponent

Step 6 – Expand mobile support

Inside the mobile menu section of header.component.html, add the same trigger button that opens the overlay (reuse the overlay, do not duplicate it).

Constraints

Use existing Tailwind utility classes and CSS variables (bg-card, text-foreground, text-primary, text-muted-foreground, border-border) — do not introduce new colours
All new frontend components must be standalone
Do not modify any existing frontend component other than HeaderComponent and RecipeService
Do not modify any existing backend class other than RecipesController, RecipeService, and RecipeRepository
No new dependencies on either side — use only what is already in package.json and build.gradle
The backend search is case-insensitive and matches partial strings in both title and description

Install global-search and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

Implement the global search feature across **both** the Spring Boot backend (`CookBook-be/`) and the Angular frontend (`CookBook-ui/`). Follow every step below exactly. ## Context ### Frontend - Framework: Angular 17+ standalone components, Tailwind CSS, Angular Material icons - Existing search bar is in `src/app/components/header/header.component.html` (lines 16-31) — it is a plain `<input>` with `isSearchFocused` tracking but no logic yet - Routes are in `src/app/app.routes.ts` — no search route exists yet - `RecipeService` (`src/app/services/recipe.service.ts`) has `getAllRecipes()` and `getRecipesByCategorieFilter()` but no search method yet - `Recipe` model is in `src/app/models/recipe.ts` ### Backend - Spring Boot project in `CookBook-be/src/main/java/de/cookBook/backend/` - Controller: `controller/RecipesController.java` — mapped to `/api/recipes` - Service: `service/RecipeService.java` - Repository: `repository/RecipeRepository.java` — extends `JpaRepository<Recipes, Long>` - Entity: `entities/Recipes.java` — has `title` (String), `description` (TEXT), `tags` (JSON) --- ## Step 0 – Create the backend search endpoint ### 0a – Add a repository method to `RecipeRepository.java` Add a Spring Data JPA derived query that searches `title` and `description` case-insensitively: ```java List<Recipes> findByTitleContainingIgnoreCaseOrDescriptionContainingIgnoreCase( String title, String description ); ``` Also add a helper default method for convenience: ```java default List<Recipes> searchByQuery(String query) { return findByTitleContainingIgnoreCaseOrDescriptionContainingIgnoreCase(query, query); } ``` ### 0b – Add a service method to `RecipeService.java` ```java public List<RecipeResponseDto> searchRecipes(String query) { if (query == null || query.isBlank()) { return List.of(); } return toResponseList(recipeRepository.searchByQuery(query.trim())); } ``` ### 0c – Add a controller endpoint to `RecipesController.java` ```java @GetMapping("/search") public List<RecipeResponseDto> searchRecipes(@RequestParam String query) { return recipeService.searchRecipes(query); } ``` This exposes `GET /api/recipes/search?query=Pfannkuchen`. --- ## Step 1 – Add a `searchRecipes` method to the frontend `RecipeService` Add a new method that calls the backend endpoint created in Step 0. Guard against empty input so the HTTP call is never made with a blank query: ```ts searchRecipes(query: string): Observable<Recipe[]> { if (!query?.trim()) return of([]); return this.http.get<Recipe[]>(this.API_URL + '/search', { params: { query: query.trim() } }); } ``` Import `of` from `rxjs` at the top of the file if it is not already imported. --- ## Step 2 – Create the `SearchResultsComponent` Create `src/app/components/search-results/search-results.component.ts` and its HTML template. ### Behaviour - Read the `?q=` query param from the URL on init via `ActivatedRoute` - Call `recipeService.searchRecipes(query)` and display results using the existing `<app-recipe-card>` component - Show a loading skeleton while fetching - Show a friendly empty-state message ("Keine Rezepte für „{query}" gefunden") when results are empty - Include `<app-header>` and `<app-footer>` so the page is self-contained ### Template structure (Tailwind + existing design tokens) ```html <app-header /> <main class="container mx-auto px-4 py-8"> <h1 class="font-display text-3xl font-bold mb-2">Suchergebnisse für „{{ query }}"</h1> <p class="text-muted-foreground mb-8">{{ recipes.length }} Rezepte gefunden</p>  </main> <app-footer /> ``` --- ## Step 3 – Register the new route In `src/app/app.routes.ts` add a lazy-loaded route **before** the `**` wildcard: ```ts { path: 'search', loadComponent: () => import('./components/search-results/search-results.component') .then(m => m.SearchResultsComponent) } ``` --- ## Step 4 – Create the `SearchOverlayComponent` Create `src/app/components/search-overlay/search-overlay.component.ts` and its template. ### Behaviour - Accepts `@Input() visible = false` and emits `@Output() closed = new EventEmitter<void>()` - Contains a centred search input (auto-focused via `cdkTrapFocus` or a `ViewChild + focus()` call in `ngOnChanges`) - Below the input shows pre-assigned suggestion chips: ```ts suggestions = ['Pfannkuchen', 'Pasta', 'Salat', 'Suppe', 'Pizza', 'Kuchen']; ``` - Clicking a chip sets the input value and immediately navigates: `router.navigate(['/search'], { queryParams: { q: term } })` - Pressing Enter or clicking a search button with a non-empty query does the same navigation - Pressing Escape or clicking the dark backdrop emits `closed` ### Template structure ```html  <div class="fixed inset-0 bg-black/50 z-50" (click)="close()"></div>  <div class="fixed top-24 left-1/2 -translate-x-1/2 w-full max-w-2xl z-50 px-4"> <div class="bg-card rounded-2xl shadow-2xl p-6">   </div> </div> ``` --- ## Step 5 – Wire the overlay into `HeaderComponent` ### `header.component.ts` - Add `isSearchOverlayOpen = false` - Inject `Router` - Add method `openSearchOverlay()` and `closeSearchOverlay()` ### `header.component.html` - Make the existing search input a **button-like trigger** that calls `openSearchOverlay()` on `(click)` (keep focus animation) - Render the overlay conditionally: ```html <app-search-overlay *ngIf="isSearchOverlayOpen" [visible]="isSearchOverlayOpen" (closed)="closeSearchOverlay()" /> ``` - Import `SearchOverlayComponent` in the `imports` array of `HeaderComponent` --- ## Step 6 – Expand mobile support Inside the mobile menu section of `header.component.html`, add the same trigger button that opens the overlay (reuse the overlay, do not duplicate it). --- ## Constraints - Use existing Tailwind utility classes and CSS variables (`bg-card`, `text-foreground`, `text-primary`, `text-muted-foreground`, `border-border`) — do not introduce new colours - All new frontend components must be **standalone** - Do not modify any existing frontend component other than `HeaderComponent` and `RecipeService` - Do not modify any existing backend class other than `RecipesController`, `RecipeService`, and `RecipeRepository` - No new dependencies on either side — use only what is already in `package.json` and `build.gradle` - The backend search is case-insensitive and matches partial strings in both `title` and `description`

{ "prompt": "Implement the global search feature across **both** the Spring Boot backend (`CookBook-be/`) and the Angular frontend (`CookBook-ui/`). Follow every step below exactly.\n\n## Context\n\n### Frontend\n- Framework: Angular 17+ standalone components, Tailwind CSS, Angular Material icons\n- Existing search bar is in `src/app/components/header/header.component.html` (lines 16-31) — it is a plain `<input>` with `isSearchFocused` tracking but no logic yet\n- Routes are in `src/app/app.routes.ts` — no search route exists yet\n- `RecipeService` (`src/app/services/recipe.service.ts`) has `getAllRecipes()` and `getRecipesByCategorieFilter()` but no search method yet\n- `Recipe` model is in `src/app/models/recipe.ts`\n\n### Backend\n- Spring Boot project in `CookBook-be/src/main/java/de/cookBook/backend/`\n- Controller: `controller/RecipesController.java` — mapped to `/api/recipes`\n- Service: `service/RecipeService.java`\n- Repository: `repository/RecipeRepository.java` — extends `JpaRepository<Recipes, Long>`\n- Entity: `entities/Recipes.java` — has `title` (String), `description` (TEXT), `tags` (JSON)\n\n---\n\n## Step 0 – Create the backend search endpoint\n\n### 0a – Add a repository method to `RecipeRepository.java`\n\nAdd a Spring Data JPA derived query that searches `title` and `description` case-insensitively:\n\n```java\nList<Recipes> findByTitleContainingIgnoreCaseOrDescriptionContainingIgnoreCase(\n String title, String description\n);\n```\n\nAlso add a helper default method for convenience:\n\n```java\ndefault List<Recipes> searchByQuery(String query) {\n return findByTitleContainingIgnoreCaseOrDescriptionContainingIgnoreCase(query, query);\n}\n```\n\n### 0b – Add a service method to `RecipeService.java`\n\n```java\npublic List<RecipeResponseDto> searchRecipes(String query) {\n if (query == null || query.isBlank()) {\n return List.of();\n }\n return toResponseList(recipeRepository.searchByQuery(query.trim()));\n}\n```\n\n### 0c – Add a controller endpoint to `RecipesController.java`\n\n```java\n@GetMapping(\"/search\")\npublic List<RecipeResponseDto> searchRecipes(@RequestParam String query) {\n return recipeService.searchRecipes(query);\n}\n```\n\nThis exposes `GET /api/recipes/search?query=Pfannkuchen`.\n\n---\n\n## Step 1 – Add a `searchRecipes` method to the frontend `RecipeService`\n\nAdd a new method that calls the backend endpoint created in Step 0. Guard against empty input so the HTTP call is never made with a blank query:\n\n```ts\nsearchRecipes(query: string): Observable<Recipe[]> {\n if (!query?.trim()) return of([]);\n return this.http.get<Recipe[]>(this.API_URL + '/search', { params: { query: query.trim() } });\n}\n```\n\nImport `of` from `rxjs` at the top of the file if it is not already imported.\n\n---\n\n## Step 2 – Create the `SearchResultsComponent`\n\nCreate `src/app/components/search-results/search-results.component.ts` and its HTML template.\n\n### Behaviour\n- Read the `?q=` query param from the URL on init via `ActivatedRoute`\n- Call `recipeService.searchRecipes(query)` and display results using the existing `<app-recipe-card>` component\n- Show a loading skeleton while fetching\n- Show a friendly empty-state message (\"Keine Rezepte für „{query}\" gefunden\") when results are empty\n- Include `<app-header>` and `<app-footer>` so the page is self-contained\n\n### Template structure (Tailwind + existing design tokens)\n```html\n<app-header />\n<main class=\"container mx-auto px-4 py-8\">\n <h1 class=\"font-display text-3xl font-bold mb-2\">Suchergebnisse für „{{ query }}\"</h1>\n <p class=\"text-muted-foreground mb-8\">{{ recipes.length }} Rezepte gefunden</p>\n \n</main>\n<app-footer />\n```\n\n---\n\n## Step 3 – Register the new route\n\nIn `src/app/app.routes.ts` add a lazy-loaded route **before** the `**` wildcard:\n\n```ts\n{\n path: 'search',\n loadComponent: () =>\n import('./components/search-results/search-results.component')\n .then(m => m.SearchResultsComponent)\n}\n```\n\n---\n\n## Step 4 – Create the `SearchOverlayComponent`\n\nCreate `src/app/components/search-overlay/search-overlay.component.ts` and its template.\n\n### Behaviour\n- Accepts `@Input() visible = false` and emits `@Output() closed = new EventEmitter<void>()`\n- Contains a centred search input (auto-focused via `cdkTrapFocus` or a `ViewChild + focus()` call in `ngOnChanges`)\n- Below the input shows pre-assigned suggestion chips:\n ```ts\n suggestions = ['Pfannkuchen', 'Pasta', 'Salat', 'Suppe', 'Pizza', 'Kuchen'];\n ```\n- Clicking a chip sets the input value and immediately navigates: `router.navigate(['/search'], { queryParams: { q: term } })`\n- Pressing Enter or clicking a search button with a non-empty query does the same navigation\n- Pressing Escape or clicking the dark backdrop emits `closed`\n\n### Template structure\n```html\n\n<div class=\"fixed inset-0 bg-black/50 z-50\" (click)=\"close()\"></div>\n\n\n<div class=\"fixed top-24 left-1/2 -translate-x-1/2 w-full max-w-2xl z-50 px-4\">\n <div class=\"bg-card rounded-2xl shadow-2xl p-6\">\n \n \n </div>\n</div>\n```\n\n---\n\n## Step 5 – Wire the overlay into `HeaderComponent`\n\n### `header.component.ts`\n- Add `isSearchOverlayOpen = false`\n- Inject `Router`\n- Add method `openSearchOverlay()` and `closeSearchOverlay()`\n\n### `header.component.html`\n- Make the existing search input a **button-like trigger** that calls `openSearchOverlay()` on `(click)` (keep focus animation)\n- Render the overlay conditionally:\n ```html\n <app-search-overlay\n *ngIf=\"isSearchOverlayOpen\"\n [visible]=\"isSearchOverlayOpen\"\n (closed)=\"closeSearchOverlay()\"\n />\n ```\n- Import `SearchOverlayComponent` in the `imports` array of `HeaderComponent`\n\n---\n\n## Step 6 – Expand mobile support\n\nInside the mobile menu section of `header.component.html`, add the same trigger button that opens the overlay (reuse the overlay, do not duplicate it).\n\n---\n\n## Constraints\n\n- Use existing Tailwind utility classes and CSS variables (`bg-card`, `text-foreground`, `text-primary`, `text-muted-foreground`, `border-border`) — do not introduce new colours\n- All new frontend components must be **standalone**\n- Do not modify any existing frontend component other than `HeaderComponent` and `RecipeService`\n- Do not modify any existing backend class other than `RecipesController`, `RecipeService`, and `RecipeRepository`\n- No new dependencies on either side — use only what is already in `package.json` and `build.gradle`\n- The backend search is case-insensitive and matches partial strings in both `title` and `description`", "variables": [ "query" ], "notes": "Implement the global search feature with animated focus, pre-assigned search terms, and a dedicated search-results route in the CookBook Angular app.", "metadata": { "source": { "provider": "github-prompts", "repository": "https://github.com/Daniel-Braun123/CookBook", "path": ".github/prompts/global-search.prompt.md", "ref": "187cdc48089d245f72b466f802f125d051f587a6", "url": "https://github.com/Daniel-Braun123/CookBook/blob/187cdc48089d245f72b466f802f125d051f587a6/.github/prompts/global-search.prompt.md", "key": "Daniel-Braun123/CookBook/.github/prompts/global-search.prompt.md" } } }

global-search

About

Context

Frontend

Backend

Step 0 – Create the backend search endpoint

0a – Add a repository method to `RecipeRepository.java`

0b – Add a service method to `RecipeService.java`

0c – Add a controller endpoint to `RecipesController.java`

Step 1 – Add a `searchRecipes` method to the frontend `RecipeService`

Step 2 – Create the `SearchResultsComponent`

Behaviour

Template structure (Tailwind + existing design tokens)

Step 3 – Register the new route

Step 4 – Create the `SearchOverlayComponent`

Behaviour

Template structure

Step 5 – Wire the overlay into `HeaderComponent`

`header.component.ts`

`header.component.html`

Step 6 – Expand mobile support

Constraints

Install global-search and it becomes one more candidate the router can pick - when it fits.

What it costs to adopt - in engineering time.

One base URL

No vendor lock-in

Failover built in

Use it

Manifest

Reviews

About

Context

Frontend

Backend

Step 0 – Create the backend search endpoint

0a – Add a repository method to RecipeRepository.java

0b – Add a service method to RecipeService.java

0c – Add a controller endpoint to RecipesController.java

Step 1 – Add a searchRecipes method to the frontend RecipeService

Step 2 – Create the SearchResultsComponent

Behaviour

Template structure (Tailwind + existing design tokens)

Step 3 – Register the new route

Step 4 – Create the SearchOverlayComponent

Behaviour

Template structure

Step 5 – Wire the overlay into HeaderComponent

header.component.ts

header.component.html

Step 6 – Expand mobile support

Constraints

Install global-search and it becomes one more candidate the router can pick - when it fits.

What it costs to adopt - in engineering time.

One base URL

No vendor lock-in

Failover built in

Use it

Manifest

Reviews

0a – Add a repository method to `RecipeRepository.java`

0b – Add a service method to `RecipeService.java`

0c – Add a controller endpoint to `RecipesController.java`

Step 1 – Add a `searchRecipes` method to the frontend `RecipeService`

Step 2 – Create the `SearchResultsComponent`

Step 4 – Create the `SearchOverlayComponent`

Step 5 – Wire the overlay into `HeaderComponent`

`header.component.ts`

`header.component.html`