diff --git a/packages/backend/src/playground.ts b/packages/backend/src/playground.ts
index 0669b049d..214c9349d 100644
--- a/packages/backend/src/playground.ts
+++ b/packages/backend/src/playground.ts
@@ -1,9 +1,18 @@
-import { provider, containerEngine, type ProviderContainerConnection, type ImageInfo } from '@podman-desktop/api';
+import {
+  provider,
+  containerEngine,
+  type Webview,
+  type ProviderContainerConnection,
+  type ImageInfo,
+} from '@podman-desktop/api';
 import type { LocalModelInfo } from '@shared/src/models/ILocalModelInfo';
 import type { ModelResponse } from '@shared/src/models/IModelResponse';
 
 import path from 'node:path';
 import * as http from 'node:http';
+import { getFreePort } from './utils/ports';
+import type { QueryState } from '@shared/src/models/IPlaygroundQueryState';
+import { MSG_NEW_PLAYGROUND_QUERIES_STATE } from '@shared/Messages';
 
 const LOCALAI_IMAGE = 'quay.io/go-skynet/local-ai:v2.5.1';
 
@@ -15,13 +24,33 @@ function findFirstProvider(): ProviderContainerConnection | undefined {
   return engines.length > 0 ? engines[0] : undefined;
 }
 
+export interface PlaygroundState {
+  containerId: string;
+  port: number;
+}
+
 export class PlayGroundManager {
+  private queryIdCounter = 0;
+
+  private playgrounds: Map<string, PlaygroundState>;
+  private queries: Map<number, QueryState>;
+
+  constructor(private webview: Webview) {
+    this.playgrounds = new Map<string, PlaygroundState>();
+    this.queries = new Map<number, QueryState>();
+  }
+
   async selectImage(connection: ProviderContainerConnection, image: string): Promise<ImageInfo | undefined> {
     const images = (await containerEngine.listImages()).filter(im => im.RepoTags?.some(tag => tag === image));
     return images.length > 0 ? images[0] : undefined;
   }
 
   async startPlayground(modelId: string, modelPath: string): Promise<string> {
+    // TODO(feloy) remove previous query from state?
+
+    if (this.playgrounds.has(modelId)) {
+      throw new Error('model is already running');
+    }
     const connection = findFirstProvider();
     if (!connection) {
       throw new Error('Unable to find an engine to start playground');
@@ -35,10 +64,11 @@ export class PlayGroundManager {
         throw new Error(`Unable to find ${LOCALAI_IMAGE} image`);
       }
     }
+    const freePort = await getFreePort();
     const result = await containerEngine.createContainer(image.engineId, {
       Image: image.Id,
       Detach: true,
-      ExposedPorts: { '9000': {} },
+      ExposedPorts: { ['' + freePort]: {} },
       HostConfig: {
         AutoRemove: true,
         Mounts: [
@@ -51,13 +81,17 @@ export class PlayGroundManager {
         PortBindings: {
           '8080/tcp': [
             {
-              HostPort: '9000',
+              HostPort: '' + freePort,
             },
           ],
         },
       },
       Cmd: ['--models-path', '/models', '--context-size', '700', '--threads', '4'],
     });
+    this.playgrounds.set(modelId, {
+      containerId: result.id,
+      port: freePort,
+    });
     return result.id;
   }
 
@@ -69,42 +103,73 @@ export class PlayGroundManager {
     return containerEngine.stopContainer(connection.providerId, playgroundId);
   }
 
-  async askPlayground(modelInfo: LocalModelInfo, prompt: string): Promise<ModelResponse> {
-    return new Promise(resolve => {
-      const post_data = JSON.stringify({
-        model: modelInfo.file,
-        prompt: prompt,
-        temperature: 0.7,
-      });
+  async askPlayground(modelInfo: LocalModelInfo, prompt: string): Promise<number> {
+    const state = this.playgrounds.get(modelInfo.id);
+    if (!state) {
+      throw new Error('model is not running');
+    }
 
-      const post_options: http.RequestOptions = {
-        host: 'localhost',
-        port: '9000',
-        path: '/v1/completions',
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      };
-
-      const post_req = http.request(post_options, function (res) {
-        res.setEncoding('utf8');
-        const chunks = [];
-        res.on('data', data => chunks.push(data));
-        res.on('end', () => {
-          const resBody = chunks.join();
+    const query = {
+      id: this.getNextQueryId(),
+      modelId: modelInfo.id,
+      prompt: prompt,
+    } as QueryState;
+
+    const post_data = JSON.stringify({
+      model: modelInfo.file,
+      prompt: prompt,
+      temperature: 0.7,
+    });
+
+    const post_options: http.RequestOptions = {
+      host: 'localhost',
+      port: '' + state.port,
+      path: '/v1/completions',
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    };
+
+    const post_req = http.request(post_options, res => {
+      res.setEncoding('utf8');
+      const chunks = [];
+      res.on('data', data => chunks.push(data));
+      res.on('end', () => {
+        const resBody = chunks.join();
+        if (res.headers['content-type'] === 'application/json') {
           const result = JSON.parse(resBody);
-          console.log('result', result);
-          switch (res.headers['content-type']) {
-            case 'application/json':
-              resolve(result as ModelResponse);
-              break;
+          const q = this.queries.get(query.id);
+          if (!q) {
+            throw new Error('query not found in state');
           }
-        });
+          q.response = result as ModelResponse;
+          this.queries.set(query.id, q);
+          this.sendState().catch((err: unknown) => {
+            console.error('playground: unable to send the response to the frontend', err);
+          });
+        }
       });
-      // post the data
-      post_req.write(post_data);
-      post_req.end();
+    });
+    // post the data
+    post_req.write(post_data);
+    post_req.end();
+
+    this.queries.set(query.id, query);
+    await this.sendState();
+    return query.id;
+  }
+
+  getNextQueryId() {
+    return ++this.queryIdCounter;
+  }
+  getState(): QueryState[] {
+    return Array.from(this.queries.values());
+  }
+  async sendState() {
+    await this.webview.postMessage({
+      id: MSG_NEW_PLAYGROUND_QUERIES_STATE,
+      body: this.getState(),
     });
   }
 }
diff --git a/packages/backend/src/studio-api-impl.ts b/packages/backend/src/studio-api-impl.ts
index 58cfad47a..79e8a576a 100644
--- a/packages/backend/src/studio-api-impl.ts
+++ b/packages/backend/src/studio-api-impl.ts
@@ -10,9 +10,9 @@ import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import type { TaskRegistry } from './registries/TaskRegistry';
 import type { Task } from '@shared/src/models/ITask';
 import * as path from 'node:path';
-import type { ModelResponse } from '@shared/src/models/IModelResponse';
 import type { PlayGroundManager } from './playground';
 import * as podmanDesktopApi from '@podman-desktop/api';
+import type { QueryState } from '@shared/src/models/IPlaygroundQueryState';
 
 export const RECENT_CATEGORY_ID = 'recent-category';
 
@@ -115,11 +115,15 @@ export class StudioApiImpl implements StudioAPI {
     await this.playgroundManager.startPlayground(modelId, modelPath);
   }
 
-  askPlayground(modelId: string, prompt: string): Promise<ModelResponse> {
+  askPlayground(modelId: string, prompt: string): Promise<number> {
     const localModelInfo = this.applicationManager.getLocalModels().filter(m => m.id === modelId);
     if (localModelInfo.length !== 1) {
       throw new Error('model not found');
     }
     return this.playgroundManager.askPlayground(localModelInfo[0], prompt);
   }
+
+  async getPlaygroundStates(): Promise<QueryState[]> {
+    return this.playgroundManager.getState();
+  }
 }
diff --git a/packages/backend/src/studio.ts b/packages/backend/src/studio.ts
index 1cc5ed91d..a03c47dfb 100644
--- a/packages/backend/src/studio.ts
+++ b/packages/backend/src/studio.ts
@@ -39,7 +39,6 @@ export class Studio {
 
   constructor(readonly extensionContext: ExtensionContext) {
     this.#extensionContext = extensionContext;
-    this.playgroundManager = new PlayGroundManager();
   }
 
   public async activate(): Promise<void> {
@@ -93,6 +92,7 @@ export class Studio {
     const taskRegistry = new TaskRegistry();
     const recipeStatusRegistry = new RecipeStatusRegistry(taskRegistry);
     const applicationManager = new ApplicationManager(gitManager, recipeStatusRegistry, this.#extensionContext);
+    this.playgroundManager = new PlayGroundManager(this.#panel.webview);
     this.studioApi = new StudioApiImpl(applicationManager, recipeStatusRegistry, taskRegistry, this.playgroundManager);
     // Register the instance
     this.rpcExtension.registerInstance<StudioApiImpl>(StudioApiImpl, this.studioApi);
diff --git a/packages/backend/src/utils/ports.ts b/packages/backend/src/utils/ports.ts
new file mode 100644
index 000000000..91d12473a
--- /dev/null
+++ b/packages/backend/src/utils/ports.ts
@@ -0,0 +1,66 @@
+/**********************************************************************
+ * Copyright (C) 2022 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import * as net from 'net';
+
+/**
+ * Find a free port starting from the given port
+ */
+export async function getFreePort(port = 0): Promise<number> {
+  if (port < 1024) {
+    port = 9000;
+  }
+  let isFree = false;
+  while (!isFree) {
+    isFree = await isFreePort(port);
+    if (!isFree) {
+      port++;
+    }
+  }
+
+  return port;
+}
+
+/**
+ * Find a free port range
+ */
+export async function getFreePortRange(rangeSize: number): Promise<string> {
+  let port = 9000;
+  let startPort = port;
+
+  do {
+    if (await isFreePort(port)) {
+      ++port;
+    } else {
+      ++port;
+      startPort = port;
+    }
+  } while (port + 1 - startPort <= rangeSize);
+
+  return `${startPort}-${port - 1}`;
+}
+
+export function isFreePort(port: number): Promise<boolean> {
+  const server = net.createServer();
+  return new Promise((resolve, reject) =>
+    server
+      .on('error', (error: NodeJS.ErrnoException) => (error.code === 'EADDRINUSE' ? resolve(false) : reject(error)))
+      .on('listening', () => server.close(() => resolve(true)))
+      .listen(port, '127.0.0.1'),
+  );
+}
diff --git a/packages/frontend/src/pages/ModelPlayground.spec.ts b/packages/frontend/src/pages/ModelPlayground.spec.ts
new file mode 100644
index 000000000..dd450ca02
--- /dev/null
+++ b/packages/frontend/src/pages/ModelPlayground.spec.ts
@@ -0,0 +1,146 @@
+import '@testing-library/jest-dom/vitest';
+import { vi, test, expect, beforeEach } from 'vitest';
+import { screen, fireEvent, render } from '@testing-library/svelte';
+import ModelPlayground from './ModelPlayground.svelte';
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
+import userEvent from '@testing-library/user-event';
+
+const mocks = vi.hoisted(() => {
+  return {
+    startPlaygroundMock: vi.fn(),
+    askPlaygroundMock: vi.fn(),
+    playgroundQueriesSubscribeMock: vi.fn(),
+    playgroundQueriesMock: {
+      subscribe: (f: (msg: any) => void) => {
+        f(mocks.playgroundQueriesSubscribeMock());
+        return () => {};
+      },
+    },
+  };
+});
+
+vi.mock('../utils/client', async () => {
+  return {
+    studioClient: {
+      startPlayground: mocks.startPlaygroundMock,
+      askPlayground: mocks.askPlaygroundMock,
+      askPlaygroundQueries: () => {},
+    },
+    rpcBrowser: {
+      subscribe: () => {
+        return {
+          unsubscribe: () => {},
+        };
+      },
+    },
+  };
+});
+
+vi.mock('../stores/playground-queries', async () => {
+  return {
+    playgroundQueries: mocks.playgroundQueriesMock,
+  };
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+test('should start playground at init time and call askPlayground when button clicked', async () => {
+  mocks.playgroundQueriesSubscribeMock.mockReturnValue([]);
+  render(ModelPlayground, {
+    model: {
+      id: 'model1',
+      name: 'Model 1',
+      description: 'A description',
+      hw: 'CPU',
+      registry: 'Hugging Face',
+      popularity: 3,
+      license: '?',
+      url: 'https://huggingface.co/TheBloke/Llama-2-7B-Chat-GGUF/resolve/main/llama-2-7b-chat.Q5_K_S.gguf',
+    } as ModelInfo,
+  });
+  await new Promise(resolve => setTimeout(resolve, 200));
+
+  expect(mocks.startPlaygroundMock).toHaveBeenCalledOnce();
+
+  const prompt = screen.getByPlaceholderText('Type your prompt here');
+  expect(prompt).toBeInTheDocument();
+  const user = userEvent.setup();
+  user.type(prompt, 'what is it?');
+
+  const send = screen.getByRole('button', { name: 'Send Request' });
+  expect(send).toBeInTheDocument();
+
+  expect(mocks.askPlaygroundMock).not.toHaveBeenCalled();
+  await fireEvent.click(send);
+  expect(mocks.askPlaygroundMock).toHaveBeenCalledOnce();
+});
+
+test('should display query without response', async () => {
+  mocks.playgroundQueriesSubscribeMock.mockReturnValue([
+    {
+      id: 1,
+      modelId: 'model1',
+      prompt: 'what is 1+1?',
+    },
+  ]);
+  render(ModelPlayground, {
+    model: {
+      id: 'model1',
+      name: 'Model 1',
+      description: 'A description',
+      hw: 'CPU',
+      registry: 'Hugging Face',
+      popularity: 3,
+      license: '?',
+      url: 'https://huggingface.co/TheBloke/Llama-2-7B-Chat-GGUF/resolve/main/llama-2-7b-chat.Q5_K_S.gguf',
+    } as ModelInfo,
+  });
+  await new Promise(resolve => setTimeout(resolve, 200));
+
+  const prompt = screen.getByPlaceholderText('Type your prompt here');
+  expect(prompt).toBeInTheDocument();
+  expect(prompt).toHaveValue('what is 1+1?');
+
+  const response = screen.queryByRole('textbox', { name: 'response' });
+  expect(response).not.toBeInTheDocument();
+});
+
+test('should display query without response', async () => {
+  mocks.playgroundQueriesSubscribeMock.mockReturnValue([
+    {
+      id: 1,
+      modelId: 'model1',
+      prompt: 'what is 1+1?',
+      response: {
+        choices: [
+          {
+            text: 'The response is 2',
+          },
+        ],
+      },
+    },
+  ]);
+  render(ModelPlayground, {
+    model: {
+      id: 'model1',
+      name: 'Model 1',
+      description: 'A description',
+      hw: 'CPU',
+      registry: 'Hugging Face',
+      popularity: 3,
+      license: '?',
+      url: 'https://huggingface.co/TheBloke/Llama-2-7B-Chat-GGUF/resolve/main/llama-2-7b-chat.Q5_K_S.gguf',
+    } as ModelInfo,
+  });
+  await new Promise(resolve => setTimeout(resolve, 200));
+
+  const prompt = screen.getByPlaceholderText('Type your prompt here');
+  expect(prompt).toBeInTheDocument();
+  expect(prompt).toHaveValue('what is 1+1?');
+
+  const response = screen.queryByRole('textbox', { name: 'response' });
+  expect(response).toBeInTheDocument();
+  expect(response).toHaveValue('The response is 2');
+});
diff --git a/packages/frontend/src/pages/ModelPlayground.svelte b/packages/frontend/src/pages/ModelPlayground.svelte
index e873e35e9..ab4811b62 100644
--- a/packages/frontend/src/pages/ModelPlayground.svelte
+++ b/packages/frontend/src/pages/ModelPlayground.svelte
@@ -4,9 +4,12 @@
   import Button from '../lib/button/Button.svelte';
   import { onMount } from 'svelte';
   import { studioClient } from '../utils/client';
+  import { playgroundQueries } from '../stores/playground-queries';
+  import type { QueryState } from '@shared/models/IPlaygroundQueryState';
   export let model: ModelInfo | undefined;
 
   let prompt = '';
+  let queryId: number;
   let result: ModelResponseChoice | undefined = undefined;
   let inProgress = false;
 
@@ -15,25 +18,57 @@
       return;
     }
     studioClient.startPlayground(model.id);
+
+    const unsubscribe = playgroundQueries.subscribe((queries: QueryState[]) => {
+      if (queryId === -1) {
+        return;
+      }
+      let myQuery = queries.find(q => q.id === queryId);
+      if (!myQuery) {
+        myQuery = queries.findLast(q => q.modelId === model?.id);
+      }
+      if (!myQuery) {
+        return;
+      }
+      displayQuery(myQuery);
+    });
+
+    return () => {
+      unsubscribe();
+    };
   });
 
+  function displayQuery(query: QueryState) {
+    if (query.response) {
+      inProgress = false;
+      prompt = query.prompt;
+      if (query.response?.choices.length) {
+        result = query.response?.choices[0];
+      }
+    } else {
+      inProgress = true;
+      prompt = query.prompt;
+      queryId = query.id;
+    }
+  }
+
   async function askPlayground() {
     if (!model) {
       return;
     }
     inProgress = true;
     result = undefined;
-    const res = await studioClient.askPlayground(model.id, prompt)
-    inProgress = false;
-    if (res.choices.length) {
-      result = res.choices[0];
-    }
+    // do not display anything before we get a response from askPlayground
+    // (we can receive a new queryState before the new QueryId)
+    queryId = -1; 
+    queryId = await studioClient.askPlayground(model.id, prompt);
   }
 </script>
 
 <div class="m-4 w-full flew flex-col">
   <div class="mb-2">Prompt</div>
   <textarea
+    aria-label="prompt"
     bind:value={prompt}
     rows="4"
     class="w-full p-2 outline-none text-sm bg-charcoal-800 rounded-sm text-gray-700 placeholder-gray-700"
@@ -46,6 +81,7 @@
   {#if result}
     <div class="mt-4 mb-2">Output</div>
     <textarea
+      aria-label="response"
       readonly
       disabled
       rows="20"
diff --git a/packages/frontend/src/stores/playground-queries.ts b/packages/frontend/src/stores/playground-queries.ts
new file mode 100644
index 000000000..9196ffd9d
--- /dev/null
+++ b/packages/frontend/src/stores/playground-queries.ts
@@ -0,0 +1,18 @@
+import type { Readable } from 'svelte/store';
+import { readable } from 'svelte/store';
+import type { QueryState } from '@shared/src/models/IPlaygroundQueryState';
+import { MSG_NEW_PLAYGROUND_QUERIES_STATE } from '@shared/Messages';
+import { rpcBrowser, studioClient } from '/@/utils/client';
+
+export const playgroundQueries: Readable<QueryState[]> = readable<QueryState[]>([], set => {
+  const sub = rpcBrowser.subscribe(MSG_NEW_PLAYGROUND_QUERIES_STATE, msg => {
+    set(msg);
+  });
+  // Initialize the store manually
+  studioClient.getPlaygroundStates().then(state => {
+    set(state);
+  });
+  return () => {
+    sub.unsubscribe();
+  };
+});
diff --git a/packages/frontend/src/utils/client.ts b/packages/frontend/src/utils/client.ts
index 35da0fe0c..71c97a9c9 100644
--- a/packages/frontend/src/utils/client.ts
+++ b/packages/frontend/src/utils/client.ts
@@ -3,6 +3,6 @@ import { RpcBrowser } from '@shared/src/MessageProxy';
 
 export const RECENT_CATEGORY_ID = 'recent-category';
 const podmanDesktopApi = acquirePodmanDesktopApi();
-const rpcBrowser: RpcBrowser = new RpcBrowser(window, podmanDesktopApi);
+export const rpcBrowser: RpcBrowser = new RpcBrowser(window, podmanDesktopApi);
 
 export const studioClient: StudioAPI = rpcBrowser.getProxy<StudioAPI>();
diff --git a/packages/shared/Messages.ts b/packages/shared/Messages.ts
new file mode 100644
index 000000000..433b1c142
--- /dev/null
+++ b/packages/shared/Messages.ts
@@ -0,0 +1 @@
+export const MSG_NEW_PLAYGROUND_QUERIES_STATE = 'new-playground-queries-state';
diff --git a/packages/shared/models/IRecipe.ts b/packages/shared/models/IRecipe.ts
deleted file mode 100644
index 2f5c74f52..000000000
--- a/packages/shared/models/IRecipe.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface Recipe {
-  id?: string,
-  name: string,
-  categories: string[],
-  description: string,
-  icon?: string,
-  repository: string,
-  readme: string,
-  config?: string,
-  models?: string[],
-}
diff --git a/packages/shared/src/MessageProxy.ts b/packages/shared/src/MessageProxy.ts
index 286fb06ce..6e5e777b6 100644
--- a/packages/shared/src/MessageProxy.ts
+++ b/packages/shared/src/MessageProxy.ts
@@ -35,6 +35,11 @@ export interface IMessageResponse extends IMessageRequest {
   body: unknown;
 }
 
+export interface ISubscribedMessage {
+  id: string;
+  body: any;
+}
+
 export function isMessageRequest(content: unknown): content is IMessageRequest {
   return (
     content !== undefined && content !== null && typeof content === 'object' && 'id' in content && 'channel' in content
@@ -101,9 +106,14 @@ export class RpcExtension {
   }
 }
 
+export interface Subscriber {
+  unsubscribe(): void;
+}
+
 export class RpcBrowser {
   counter: number = 0;
   promises: Map<number, { resolve: (value: unknown) => unknown; reject: (value: unknown) => void }> = new Map();
+  subscribers: Map<string, (msg: any) => void> = new Map();
 
   getUniqueId(): number {
     return ++this.counter;
@@ -119,24 +129,27 @@ export class RpcBrowser {
   init() {
     this.window.addEventListener('message', (event: MessageEvent) => {
       const message = event.data;
-      if (!isMessageResponse(message)) {
-        console.error('Received incompatible message.', message);
-        return;
-      }
-
-      if (!this.promises.has(message.id)) {
-        console.error('Unknown message id.');
-        return;
-      }
+      if (isMessageResponse(message)) {
+        if (!this.promises.has(message.id)) {
+          console.error('Unknown message id.');
+          return;
+        }
 
-      const { resolve, reject } = this.promises.get(message.id) || {};
+        const { resolve, reject } = this.promises.get(message.id) || {};
 
-      if (message.status === 'error') {
-        reject?.(message.error);
+        if (message.status === 'error') {
+          reject?.(message.error);
+        } else {
+          resolve?.(message.body);
+        }
+        this.promises.delete(message.id);
+      } else if (this.isSubscribedMessage(message)) {
+        const handler = this.subscribers.get(message.id);
+        handler?.(message.body);
       } else {
-        resolve?.(message.body);
+        console.error('Received incompatible message.', message);
+        return;
       }
-      this.promises.delete(message.id);
     });
   }
 
@@ -183,4 +196,24 @@ export class RpcBrowser {
       this.promises.set(requestId, { resolve, reject });
     });
   }
+
+  // TODO(feloy) need to subscribe several times?
+  subscribe(msgId: string, f: (msg: any) => void): Subscriber {
+    this.subscribers.set(msgId, f);
+    return {
+      unsubscribe: () => {
+        this.subscribers.delete(msgId);
+      },
+    };
+  }
+
+  isSubscribedMessage(content: any): content is ISubscribedMessage {
+    return (
+      content !== undefined &&
+      content !== null &&
+      'id' in content &&
+      'body' in content &&
+      this.subscribers.has(content.id)
+    );
+  }
 }
diff --git a/packages/shared/src/StudioAPI.ts b/packages/shared/src/StudioAPI.ts
index 620b38390..053f55dba 100644
--- a/packages/shared/src/StudioAPI.ts
+++ b/packages/shared/src/StudioAPI.ts
@@ -2,8 +2,8 @@ import type { Recipe } from './models/IRecipe';
 import type { Category } from './models/ICategory';
 import type { RecipeStatus } from './models/IRecipeStatus';
 import type { ModelInfo } from './models/IModelInfo';
-import type { ModelResponse } from './models/IModelResponse';
 import type { Task } from './models/ITask';
+import type { QueryState } from './models/IPlaygroundQueryState';
 
 export abstract class StudioAPI {
   abstract ping(): Promise<string>;
@@ -23,11 +23,16 @@ export abstract class StudioAPI {
   abstract getLocalModels(): Promise<ModelInfo[]>;
 
   abstract startPlayground(modelId: string): Promise<void>;
-  abstract askPlayground(modelId: string, prompt: string): Promise<ModelResponse>;
+  abstract askPlayground(modelId: string, prompt: string): Promise<number>;
 
   /**
    * Get task by label
    * @param label
    */
   abstract getTasksByLabel(label: string): Promise<Task[]>;
+
+  /**
+   * Ask to send a message MSG_NEW_PLAYGROUND_QUERIES_STATE with the current Playground queries
+   */
+  abstract getPlaygroundStates(): Promise<QueryState[]>;
 }
diff --git a/packages/shared/src/models/IPlaygroundQueryState.ts b/packages/shared/src/models/IPlaygroundQueryState.ts
new file mode 100644
index 000000000..9f8ae9349
--- /dev/null
+++ b/packages/shared/src/models/IPlaygroundQueryState.ts
@@ -0,0 +1,8 @@
+import type { ModelResponse } from './IModelResponse';
+
+export interface QueryState {
+  id: number;
+  modelId: string;
+  prompt: string;
+  response?: ModelResponse;
+}