From 0773c44958cc1bfad1cf30f45c54140f72039610 Mon Sep 17 00:00:00 2001
From: Garrett Spong <spong@users.noreply.github.com>
Date: Fri, 2 Jun 2023 17:40:05 -0600
Subject: [PATCH] [8.8] [Security Solution] Elastic Security Assistant
 (#156933) (#158974)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Backport

This will backport the following commits from `main` to `8.8`:
- [[Security Solution] Elastic Security Assistant
(#156933)](https://github.com/elastic/kibana/pull/156933)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Garrett
Spong","email":"spong@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-06-02T21:19:10Z","message":"[Security
Solution] Elastic Security Assistant (#156933)\n\n## [Security Solution]
Elastic Security Assistant\r\n\r\nThe _Elastic Security Assistant_ has
entered the chat, integrating generative AI and large language models
(LLMs) into the workflows of Elastic Security users.\r\n\r\nBring your
alerts, events, rules, and data quality checks into the
conversation.\r\n\r\n<https://github.com/elastic/kibana/assets/2946766/31d65c78-5692-4817-b726-820c5df0801c>\r\n\r\nThis
PR merges a feature branch developed by @spong and @andrew-goldstein ,
seeded by @jamesspi 's prototype of the assistant. Connectivity to LLMs
is provided the [Generative AI
Connector](<https://github.com/elastic/kibana/pull/157228>) , developed
by @stephmilovic . This PR includes:\r\n\r\n- A new reusable Kibana
package containing the assistant:
`x-pack/packages/kbn-elastic-assistant`\r\n - See the `How to embed the
Assistant in other parts of Kibana` for details\r\n- Assistant
integration into Elastic Security Solution workflows (e.g. alerts,
cases, Timeline, rules, data quality)\r\n\r\n### An assistant trained on
the Elastic stack and Elastic Security\r\n\r\nThe [Generative AI
Connector](<https://github.com/elastic/kibana/pull/157228>) connects the
assistant to OpenAI and Azure OpenAI models trained with knowledge of
the Elastic stack and the Elastic Security solution, including:\r\n\r\n-
The Elastic open [Detection
Rules](https://github.com/elastic/detection-rules)\r\n- The [Elastic
Common Schema
(ECS)](https://www.elastic.co/guide/en/ecs/current/index.html)\r\n-
Elastic query languages, including
[KQL](https://www.elastic.co/guide/en/kibana/current/kuery-query.html),
[EQL](https://www.elastic.co/guide/en/elasticsearch/reference/current/eql-syntax.html),
and the [Elastic Query
DSL](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl.html)\r\n-
[Elasticsearch API
documentation](https://www.elastic.co/guide/en/elasticsearch/reference/8.8/rest-apis.html)\r\n\r\nThis
training enables the assistant to offer fully interactive chat
experiences that include:\r\n\r\n- alert summarization\r\n- interactive
query generation\r\n- workflow suggestions\r\n- generating ingestion
configurations that conform to the Elastic Common Schema\r\n- your
imagination\r\n\r\nusing context from Elastic Security.\r\n\r\n### Take
action from your conversations\r\n\r\nThe Actions (from assistant
response):\r\n\r\n- Send KQL to Timeline\r\n- Send EQL to Timeline\r\n-
Send Elasticsearch DSL to Timeline\r\n- Send Note to timeline\r\n-
Create new case\r\n- Add to existing case\r\n- Copy to
clipboard\r\n\r\n### Components architecture diagram\r\n\r\n![Untitled
Diagram drawio
(1)](https://github.com/elastic/kibana/assets/55110838/8f446313-629f-4646-b44d-0cb0ca74aeaf)\r\n\r\n###
How to embed the Assistant in other parts of Kibana\r\n\r\nFollow the
general instructions in `x-pack/packages/kbn-elastic-assistant/index.ts`
to integrate the assistant into a Kibana app.\r\n\r\n#### Step 1 - Wrap
your Kibana app in the `AssistantProvider` component\r\n\r\n```ts\r\n//
Step 1: Wrap your Kibana app in the `AssistantProvider` component. This
typically\r\n// happens in the root of your app. Optionally provide a
custom title for the assistant:\r\n\r\n/** provides context (from the
app) to the assistant, and injects Kibana services, like `http`
*/\r\nexport { AssistantProvider } from
'./impl/assistant_context';\r\n```\r\n\r\n#### Step 2: Add the
`AssistantOverlay` component to your app\r\n\r\n```ts\r\n// Step 2: Add
the `AssistantOverlay` component to your app. This component displays
the assistant\r\n// overlay in a modal, bound to a shortcut
key:\r\n\r\n/** modal overlay for Elastic Assistant conversations
*/\r\nexport { AssistantOverlay } from
'./impl/assistant/assistant_overlay';\r\n\r\n// In addition to the
`AssistantOverlay`, or as an alternative, you may use the `Assistant`
component\r\n// to display the assistant without the modal
overlay:\r\n\r\n/** this component renders the Assistant without the
modal overlay to, for example, render it in a Timeline tab */\r\nexport
{ Assistant } from './impl/assistant';\r\n```\r\n\r\n#### Step 3:
Wherever you want to bring context into the assistant, use the any
combination of the following\r\n\r\n```ts\r\n// Step 3: Wherever you
want to bring context into the assistant, use the any combination of the
following\r\n// components and hooks:\r\n// - `NewChat` component\r\n//
- `NewChatById` component\r\n// - `useAssistantOverlay`
hook\r\n\r\n/**\r\n * `NewChat` displays a _New chat_ icon button,
providing all the context\r\n * necessary to start a new chat. You may
optionally style the button icon,\r\n * or override the default _New
chat_ text with custom content, like `🪄✨`\r\n *\r\n * USE THIS WHEN: All
the data necessary to start a new chat is available\r\n * in the same
part of the React tree as the _New chat_ button.\r\n */\r\nexport {
NewChat } from './impl/new_chat';\r\n\r\n/**\r\n * `NewChatByID`
displays a _New chat_ icon button by providing only the
`promptContextId`\r\n * of a context that was (already) registered by
the `useAssistantOverlay` hook. You may\r\n * optionally style the
button icon, or override the default _New chat_ text with custom\r\n *
content, like {'🪄✨'}\r\n *\r\n * USE THIS WHEN: all the data necessary
to start a new chat is NOT available\r\n * in the same part of the React
tree as the _New chat_ button. When paired\r\n * with the
`useAssistantOverlay` hook, this option enables context to be be\r\n *
registered where the data is available, and then the _New chat_ button
can be displayed\r\n * in another part of the tree.\r\n */\r\nexport {
NewChatById } from './impl/new_chat_by_id';\r\n\r\n/**\r\n *
`useAssistantOverlay` is a hook that registers context with the
assistant overlay, and\r\n * returns an optional `showAssistantOverlay`
function to display the assistant overlay.\r\n * As an alterative to
using the `showAssistantOverlay` returned from this hook, you may\r\n *
use the `NewChatById` component and pass it the `promptContextId`
returned by this hook.\r\n *\r\n * USE THIS WHEN: You want to register
context in one part of the tree, and then show\r\n * a _New chat_ button
in another part of the tree without passing around the data, or when\r\n
* you want to build a custom `New chat` button with features not not
provided by the\r\n * `NewChat` component.\r\n */\r\nexport {
useAssistantOverlay } from
'./impl/assistant/use_assistant_overlay';\r\n```\r\n\r\nCo-authored-by:
Garrett Spong <garrett.spong@elastic.co>\r\nCo-authored-by: Andrew Macri
<andrew.macri@elastic.co>","sha":"4e38817a4ddfea8aff336c22788bc3a30ece5908","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:
SecuritySolution","release_note:feature","ci:no-auto-commit","v8.9.0","v8.8.1"],"number":156933,"url":"https://github.com/elastic/kibana/pull/156933","mergeCommit":{"message":"[Security
Solution] Elastic Security Assistant (#156933)\n\n## [Security Solution]
Elastic Security Assistant\r\n\r\nThe _Elastic Security Assistant_ has
entered the chat, integrating generative AI and large language models
(LLMs) into the workflows of Elastic Security users.\r\n\r\nBring your
alerts, events, rules, and data quality checks into the
conversation.\r\n\r\n<https://github.com/elastic/kibana/assets/2946766/31d65c78-5692-4817-b726-820c5df0801c>\r\n\r\nThis
PR merges a feature branch developed by @spong and @andrew-goldstein ,
seeded by @jamesspi 's prototype of the assistant. Connectivity to LLMs
is provided the [Generative AI
Connector](<https://github.com/elastic/kibana/pull/157228>) , developed
by @stephmilovic . This PR includes:\r\n\r\n- A new reusable Kibana
package containing the assistant:
`x-pack/packages/kbn-elastic-assistant`\r\n - See the `How to embed the
Assistant in other parts of Kibana` for details\r\n- Assistant
integration into Elastic Security Solution workflows (e.g. alerts,
cases, Timeline, rules, data quality)\r\n\r\n### An assistant trained on
the Elastic stack and Elastic Security\r\n\r\nThe [Generative AI
Connector](<https://github.com/elastic/kibana/pull/157228>) connects the
assistant to OpenAI and Azure OpenAI models trained with knowledge of
the Elastic stack and the Elastic Security solution, including:\r\n\r\n-
The Elastic open [Detection
Rules](https://github.com/elastic/detection-rules)\r\n- The [Elastic
Common Schema
(ECS)](https://www.elastic.co/guide/en/ecs/current/index.html)\r\n-
Elastic query languages, including
[KQL](https://www.elastic.co/guide/en/kibana/current/kuery-query.html),
[EQL](https://www.elastic.co/guide/en/elasticsearch/reference/current/eql-syntax.html),
and the [Elastic Query
DSL](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl.html)\r\n-
[Elasticsearch API
documentation](https://www.elastic.co/guide/en/elasticsearch/reference/8.8/rest-apis.html)\r\n\r\nThis
training enables the assistant to offer fully interactive chat
experiences that include:\r\n\r\n- alert summarization\r\n- interactive
query generation\r\n- workflow suggestions\r\n- generating ingestion
configurations that conform to the Elastic Common Schema\r\n- your
imagination\r\n\r\nusing context from Elastic Security.\r\n\r\n### Take
action from your conversations\r\n\r\nThe Actions (from assistant
response):\r\n\r\n- Send KQL to Timeline\r\n- Send EQL to Timeline\r\n-
Send Elasticsearch DSL to Timeline\r\n- Send Note to timeline\r\n-
Create new case\r\n- Add to existing case\r\n- Copy to
clipboard\r\n\r\n### Components architecture diagram\r\n\r\n![Untitled
Diagram drawio
(1)](https://github.com/elastic/kibana/assets/55110838/8f446313-629f-4646-b44d-0cb0ca74aeaf)\r\n\r\n###
How to embed the Assistant in other parts of Kibana\r\n\r\nFollow the
general instructions in `x-pack/packages/kbn-elastic-assistant/index.ts`
to integrate the assistant into a Kibana app.\r\n\r\n#### Step 1 - Wrap
your Kibana app in the `AssistantProvider` component\r\n\r\n```ts\r\n//
Step 1: Wrap your Kibana app in the `AssistantProvider` component. This
typically\r\n// happens in the root of your app. Optionally provide a
custom title for the assistant:\r\n\r\n/** provides context (from the
app) to the assistant, and injects Kibana services, like `http`
*/\r\nexport { AssistantProvider } from
'./impl/assistant_context';\r\n```\r\n\r\n#### Step 2: Add the
`AssistantOverlay` component to your app\r\n\r\n```ts\r\n// Step 2: Add
the `AssistantOverlay` component to your app. This component displays
the assistant\r\n// overlay in a modal, bound to a shortcut
key:\r\n\r\n/** modal overlay for Elastic Assistant conversations
*/\r\nexport { AssistantOverlay } from
'./impl/assistant/assistant_overlay';\r\n\r\n// In addition to the
`AssistantOverlay`, or as an alternative, you may use the `Assistant`
component\r\n// to display the assistant without the modal
overlay:\r\n\r\n/** this component renders the Assistant without the
modal overlay to, for example, render it in a Timeline tab */\r\nexport
{ Assistant } from './impl/assistant';\r\n```\r\n\r\n#### Step 3:
Wherever you want to bring context into the assistant, use the any
combination of the following\r\n\r\n```ts\r\n// Step 3: Wherever you
want to bring context into the assistant, use the any combination of the
following\r\n// components and hooks:\r\n// - `NewChat` component\r\n//
- `NewChatById` component\r\n// - `useAssistantOverlay`
hook\r\n\r\n/**\r\n * `NewChat` displays a _New chat_ icon button,
providing all the context\r\n * necessary to start a new chat. You may
optionally style the button icon,\r\n * or override the default _New
chat_ text with custom content, like `🪄✨`\r\n *\r\n * USE THIS WHEN: All
the data necessary to start a new chat is available\r\n * in the same
part of the React tree as the _New chat_ button.\r\n */\r\nexport {
NewChat } from './impl/new_chat';\r\n\r\n/**\r\n * `NewChatByID`
displays a _New chat_ icon button by providing only the
`promptContextId`\r\n * of a context that was (already) registered by
the `useAssistantOverlay` hook. You may\r\n * optionally style the
button icon, or override the default _New chat_ text with custom\r\n *
content, like {'🪄✨'}\r\n *\r\n * USE THIS WHEN: all the data necessary
to start a new chat is NOT available\r\n * in the same part of the React
tree as the _New chat_ button. When paired\r\n * with the
`useAssistantOverlay` hook, this option enables context to be be\r\n *
registered where the data is available, and then the _New chat_ button
can be displayed\r\n * in another part of the tree.\r\n */\r\nexport {
NewChatById } from './impl/new_chat_by_id';\r\n\r\n/**\r\n *
`useAssistantOverlay` is a hook that registers context with the
assistant overlay, and\r\n * returns an optional `showAssistantOverlay`
function to display the assistant overlay.\r\n * As an alterative to
using the `showAssistantOverlay` returned from this hook, you may\r\n *
use the `NewChatById` component and pass it the `promptContextId`
returned by this hook.\r\n *\r\n * USE THIS WHEN: You want to register
context in one part of the tree, and then show\r\n * a _New chat_ button
in another part of the tree without passing around the data, or when\r\n
* you want to build a custom `New chat` button with features not not
provided by the\r\n * `NewChat` component.\r\n */\r\nexport {
useAssistantOverlay } from
'./impl/assistant/use_assistant_overlay';\r\n```\r\n\r\nCo-authored-by:
Garrett Spong <garrett.spong@elastic.co>\r\nCo-authored-by: Andrew Macri
<andrew.macri@elastic.co>","sha":"4e38817a4ddfea8aff336c22788bc3a30ece5908"}},"sourceBranch":"main","suggestedTargetBranches":["8.8"],"targetPullRequestStates":[{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/156933","number":156933,"mergeCommit":{"message":"[Security
Solution] Elastic Security Assistant (#156933)\n\n## [Security Solution]
Elastic Security Assistant\r\n\r\nThe _Elastic Security Assistant_ has
entered the chat, integrating generative AI and large language models
(LLMs) into the workflows of Elastic Security users.\r\n\r\nBring your
alerts, events, rules, and data quality checks into the
conversation.\r\n\r\n<https://github.com/elastic/kibana/assets/2946766/31d65c78-5692-4817-b726-820c5df0801c>\r\n\r\nThis
PR merges a feature branch developed by @spong and @andrew-goldstein ,
seeded by @jamesspi 's prototype of the assistant. Connectivity to LLMs
is provided the [Generative AI
Connector](<https://github.com/elastic/kibana/pull/157228>) , developed
by @stephmilovic . This PR includes:\r\n\r\n- A new reusable Kibana
package containing the assistant:
`x-pack/packages/kbn-elastic-assistant`\r\n - See the `How to embed the
Assistant in other parts of Kibana` for details\r\n- Assistant
integration into Elastic Security Solution workflows (e.g. alerts,
cases, Timeline, rules, data quality)\r\n\r\n### An assistant trained on
the Elastic stack and Elastic Security\r\n\r\nThe [Generative AI
Connector](<https://github.com/elastic/kibana/pull/157228>) connects the
assistant to OpenAI and Azure OpenAI models trained with knowledge of
the Elastic stack and the Elastic Security solution, including:\r\n\r\n-
The Elastic open [Detection
Rules](https://github.com/elastic/detection-rules)\r\n- The [Elastic
Common Schema
(ECS)](https://www.elastic.co/guide/en/ecs/current/index.html)\r\n-
Elastic query languages, including
[KQL](https://www.elastic.co/guide/en/kibana/current/kuery-query.html),
[EQL](https://www.elastic.co/guide/en/elasticsearch/reference/current/eql-syntax.html),
and the [Elastic Query
DSL](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl.html)\r\n-
[Elasticsearch API
documentation](https://www.elastic.co/guide/en/elasticsearch/reference/8.8/rest-apis.html)\r\n\r\nThis
training enables the assistant to offer fully interactive chat
experiences that include:\r\n\r\n- alert summarization\r\n- interactive
query generation\r\n- workflow suggestions\r\n- generating ingestion
configurations that conform to the Elastic Common Schema\r\n- your
imagination\r\n\r\nusing context from Elastic Security.\r\n\r\n### Take
action from your conversations\r\n\r\nThe Actions (from assistant
response):\r\n\r\n- Send KQL to Timeline\r\n- Send EQL to Timeline\r\n-
Send Elasticsearch DSL to Timeline\r\n- Send Note to timeline\r\n-
Create new case\r\n- Add to existing case\r\n- Copy to
clipboard\r\n\r\n### Components architecture diagram\r\n\r\n![Untitled
Diagram drawio
(1)](https://github.com/elastic/kibana/assets/55110838/8f446313-629f-4646-b44d-0cb0ca74aeaf)\r\n\r\n###
How to embed the Assistant in other parts of Kibana\r\n\r\nFollow the
general instructions in `x-pack/packages/kbn-elastic-assistant/index.ts`
to integrate the assistant into a Kibana app.\r\n\r\n#### Step 1 - Wrap
your Kibana app in the `AssistantProvider` component\r\n\r\n```ts\r\n//
Step 1: Wrap your Kibana app in the `AssistantProvider` component. This
typically\r\n// happens in the root of your app. Optionally provide a
custom title for the assistant:\r\n\r\n/** provides context (from the
app) to the assistant, and injects Kibana services, like `http`
*/\r\nexport { AssistantProvider } from
'./impl/assistant_context';\r\n```\r\n\r\n#### Step 2: Add the
`AssistantOverlay` component to your app\r\n\r\n```ts\r\n// Step 2: Add
the `AssistantOverlay` component to your app. This component displays
the assistant\r\n// overlay in a modal, bound to a shortcut
key:\r\n\r\n/** modal overlay for Elastic Assistant conversations
*/\r\nexport { AssistantOverlay } from
'./impl/assistant/assistant_overlay';\r\n\r\n// In addition to the
`AssistantOverlay`, or as an alternative, you may use the `Assistant`
component\r\n// to display the assistant without the modal
overlay:\r\n\r\n/** this component renders the Assistant without the
modal overlay to, for example, render it in a Timeline tab */\r\nexport
{ Assistant } from './impl/assistant';\r\n```\r\n\r\n#### Step 3:
Wherever you want to bring context into the assistant, use the any
combination of the following\r\n\r\n```ts\r\n// Step 3: Wherever you
want to bring context into the assistant, use the any combination of the
following\r\n// components and hooks:\r\n// - `NewChat` component\r\n//
- `NewChatById` component\r\n// - `useAssistantOverlay`
hook\r\n\r\n/**\r\n * `NewChat` displays a _New chat_ icon button,
providing all the context\r\n * necessary to start a new chat. You may
optionally style the button icon,\r\n * or override the default _New
chat_ text with custom content, like `🪄✨`\r\n *\r\n * USE THIS WHEN: All
the data necessary to start a new chat is available\r\n * in the same
part of the React tree as the _New chat_ button.\r\n */\r\nexport {
NewChat } from './impl/new_chat';\r\n\r\n/**\r\n * `NewChatByID`
displays a _New chat_ icon button by providing only the
`promptContextId`\r\n * of a context that was (already) registered by
the `useAssistantOverlay` hook. You may\r\n * optionally style the
button icon, or override the default _New chat_ text with custom\r\n *
content, like {'🪄✨'}\r\n *\r\n * USE THIS WHEN: all the data necessary
to start a new chat is NOT available\r\n * in the same part of the React
tree as the _New chat_ button. When paired\r\n * with the
`useAssistantOverlay` hook, this option enables context to be be\r\n *
registered where the data is available, and then the _New chat_ button
can be displayed\r\n * in another part of the tree.\r\n */\r\nexport {
NewChatById } from './impl/new_chat_by_id';\r\n\r\n/**\r\n *
`useAssistantOverlay` is a hook that registers context with the
assistant overlay, and\r\n * returns an optional `showAssistantOverlay`
function to display the assistant overlay.\r\n * As an alterative to
using the `showAssistantOverlay` returned from this hook, you may\r\n *
use the `NewChatById` component and pass it the `promptContextId`
returned by this hook.\r\n *\r\n * USE THIS WHEN: You want to register
context in one part of the tree, and then show\r\n * a _New chat_ button
in another part of the tree without passing around the data, or when\r\n
* you want to build a custom `New chat` button with features not not
provided by the\r\n * `NewChat` component.\r\n */\r\nexport {
useAssistantOverlay } from
'./impl/assistant/use_assistant_overlay';\r\n```\r\n\r\nCo-authored-by:
Garrett Spong <garrett.spong@elastic.co>\r\nCo-authored-by: Andrew Macri
<andrew.macri@elastic.co>","sha":"4e38817a4ddfea8aff336c22788bc3a30ece5908"}},{"branch":"8.8","label":"v8.8.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
---
 .eslintrc.js                                  |   5 +
 package.json                                  |   1 +
 .../styled_components_files.js                |   1 +
 tsconfig.base.json                            |   2 +
 x-pack/.i18nrc.json                           |   1 +
 .../packages/kbn-elastic-assistant/README.md  |  20 +
 .../impl/assistant/api.tsx                    |  84 ++++
 .../assistant/assistant_overlay/index.tsx     |  90 ++++
 .../assistant_overlay/translations.ts         |  15 +
 .../assistant/context_pills/index.test.tsx    | 122 +++++
 .../impl/assistant/context_pills/index.tsx    |  66 +++
 .../assistant/conversation_selector/index.tsx | 142 ++++++
 .../conversation_selector/translations.ts     |  36 ++
 .../impl/assistant/helpers.ts                 |  25 +
 .../impl/assistant/index.tsx                  | 474 ++++++++++++++++++
 .../impl/assistant/prompt/helpers.test.ts     | 178 +++++++
 .../impl/assistant/prompt/helpers.ts          |  88 ++++
 .../impl/assistant/prompt_context/types.ts    |  78 +++
 .../assistant/prompt_editor/helpers.test.tsx  |  28 ++
 .../impl/assistant/prompt_editor/helpers.tsx  |  16 +
 .../assistant/prompt_editor/index.test.tsx    | 108 ++++
 .../impl/assistant/prompt_editor/index.tsx    | 110 ++++
 .../selected_prompt_contexts/index.test.tsx   | 143 ++++++
 .../selected_prompt_contexts/index.tsx        | 121 +++++
 .../selected_prompt_contexts/translations.ts  |  15 +
 .../system_prompt/helpers.test.tsx            |  60 +++
 .../prompt_editor/system_prompt/helpers.tsx   |  52 ++
 .../system_prompt/index.test.tsx              | 121 +++++
 .../prompt_editor/system_prompt/index.tsx     | 101 ++++
 .../select_system_prompt/index.test.tsx       | 117 +++++
 .../select_system_prompt/index.tsx            | 108 ++++
 .../system_prompt/translations.ts             |  29 ++
 .../assistant/prompt_editor/translations.ts   |  26 +
 .../impl/assistant/prompt_textarea/index.tsx  |  76 +++
 .../assistant/prompt_textarea/translations.ts |  15 +
 .../add_quick_prompt_modal.tsx                | 225 +++++++++
 .../add_quick_prompt_modal/translations.ts    |  71 +++
 .../prompt_context_selector.tsx               |  99 ++++
 .../prompt_context_selector/translations.ts   |  22 +
 .../quick_prompt_selector.tsx                 | 185 +++++++
 .../quick_prompt_selector/translations.ts     |  29 ++
 .../assistant/quick_prompts/quick_prompts.tsx | 122 +++++
 .../assistant/quick_prompts/translations.ts   |  29 ++
 .../impl/assistant/quick_prompts/types.tsx    |  25 +
 .../impl/assistant/settings_popover.tsx       |  97 ++++
 .../assistant/streaming_text/index.test.tsx   |  30 ++
 .../impl/assistant/streaming_text/index.tsx   |  63 +++
 .../impl/assistant/translations.ts            |  54 ++
 .../impl/assistant/types.ts                   |  15 +
 .../use_assistant_overlay/index.test.tsx      | 102 ++++
 .../assistant/use_assistant_overlay/index.tsx | 135 +++++
 .../assistant/use_conversation/helpers.ts     |  60 +++
 .../impl/assistant/use_conversation/index.tsx | 192 +++++++
 .../use_conversation/sample_conversations.tsx | 137 +++++
 .../use_conversation/translations.ts          |  35 ++
 .../assistant/use_send_messages/index.tsx     |  42 ++
 .../impl/assistant_context/helpers.ts         |  25 +
 .../impl/assistant_context/index.test.tsx     |  53 ++
 .../impl/assistant_context/index.tsx          | 217 ++++++++
 .../impl/assistant_context/types.tsx          |  58 +++
 .../connectorland/connector_button/index.tsx  |  44 ++
 .../connector_selector/index.tsx              | 180 +++++++
 .../connectorland/connector_setup/helpers.tsx |  33 ++
 .../connectorland/connector_setup/index.tsx   | 261 ++++++++++
 .../impl/connectorland/translations.ts        | 102 ++++
 .../use_load_action_types/index.tsx           |  63 +++
 .../use_load_connectors/index.tsx             |  59 +++
 .../content/prompts/system/translations.ts    |  63 +++
 .../impl/content/prompts/user/translations.ts |  26 +
 .../content/prompts/welcome/translations.ts   |  32 ++
 .../impl/mock/prompt_context/index.ts         |  24 +
 .../impl/mock/system_prompt/index.ts          |  23 +
 .../mock/test_providers/test_providers.tsx    |  51 ++
 .../impl/mock/user_prompt/index.ts            |  16 +
 .../impl/new_chat/index.test.tsx              |  82 +++
 .../impl/new_chat/index.tsx                   |  79 +++
 .../impl/new_chat/translations.ts             |  12 +
 .../impl/new_chat_by_id/index.test.tsx        |  81 +++
 .../impl/new_chat_by_id/index.tsx             |  76 +++
 .../impl/new_chat_by_id/translations.ts       |  15 +
 .../packages/kbn-elastic-assistant/index.ts   | 120 +++++
 .../kbn-elastic-assistant/jest.config.js      |  23 +
 .../kbn-elastic-assistant/kibana.jsonc        |   5 +
 .../kbn-elastic-assistant/package.json        |   6 +
 .../kbn-elastic-assistant/setup_tests.ts      |   9 +
 .../kbn-elastic-assistant/tsconfig.json       |  31 ++
 .../body/data_quality_details/index.test.tsx  |   1 +
 .../body/data_quality_details/index.tsx       |   3 +
 .../indices_details/index.test.tsx            |   1 +
 .../indices_details/index.tsx                 |   3 +
 .../data_quality_panel/body/index.test.tsx    |   3 +
 .../data_quality_panel/body/index.tsx         |   3 +
 .../index_properties/index.test.tsx           |   1 +
 .../index_properties/index.tsx                |   4 +
 .../data_quality_panel/pattern/index.test.tsx |   1 +
 .../data_quality_panel/pattern/index.tsx      |   4 +
 .../data_quality_panel/tabs/helpers.test.tsx  |   1 +
 .../data_quality_panel/tabs/helpers.tsx       |   4 +
 .../tabs/incompatible_tab/index.tsx           |  26 +-
 .../summary_tab/callout_summary/index.tsx     |  26 +-
 .../callout_summary/translations.ts           |  15 +
 .../tabs/summary_tab/index.tsx                |   3 +
 .../impl/data_quality/index.test.tsx          |   2 +
 .../impl/data_quality/index.tsx               |   3 +
 .../mock/test_providers/test_providers.tsx    |  17 +-
 .../impl/data_quality/translations.ts         |  20 +
 .../ecs_data_quality_dashboard/tsconfig.json  |   2 +
 .../common/experimental_features.ts           |   7 +-
 .../common/types/timeline/index.ts            |   1 +
 x-pack/plugins/security_solution/kibana.jsonc |   1 +
 .../security_solution/public/app/app.tsx      |  72 ++-
 .../public/app/translations.ts                |   4 +
 .../assistant/comment_actions/index.tsx       | 106 ++++
 .../assistant/comment_actions/translations.ts |  50 ++
 .../assistant/content/conversations/index.tsx |  92 ++++
 .../content/conversations/translations.ts     |  15 +
 .../content/prompt_contexts/index.tsx         |  52 ++
 .../assistant/content/quick_prompts/index.tsx |  61 +++
 .../content/quick_prompts/translations.ts     |  98 ++++
 .../public/assistant/get_comments/index.tsx   |  47 ++
 .../assistant/get_comments/translations.ts    |  22 +
 .../public/assistant/helpers.tsx              |  92 ++++
 .../public/assistant/jest.config.js           |  19 +
 .../assistant/send_to_timeline/index.tsx      | 204 ++++++++
 .../use_conversation_store/index.tsx          |  32 ++
 .../event_details/alert_summary_view.tsx      |   8 +-
 .../event_details/summary_view.test.tsx       |   1 +
 .../components/event_details/translations.ts  |  48 ++
 .../common/components/local_storage/index.tsx |  21 +-
 .../common/components/page_wrapper/index.tsx  |   4 +
 .../common/mock/storybook_providers.tsx       |  19 +-
 .../public/common/mock/test_providers.tsx     | 101 ++--
 .../pages/rule_management/index.tsx           |   6 +-
 .../pages/rule_management/super_header.tsx    |  61 +++
 .../detection_engine/rules/translations.ts    |  30 ++
 .../mocked_data/reponse_actions_history.cy.ts |   3 +-
 .../public/overview/pages/data_quality.tsx    |   3 +
 .../__snapshots__/index.test.tsx.snap         |  17 +-
 .../event_details/expandable_event.tsx        |  60 ++-
 .../event_details/flyout/header.tsx           |   5 +
 .../side_panel/event_details/index.tsx        |  47 +-
 .../timeline/data_providers/data_provider.ts  |   4 +
 .../timeline/tabs_content/index.tsx           |  78 ++-
 .../timeline/tabs_content/translations.ts     |  14 +
 .../plugins/security_solution/tsconfig.json   |   2 +
 yarn.lock                                     |   4 +
 146 files changed, 7870 insertions(+), 96 deletions(-)
 create mode 100644 x-pack/packages/kbn-elastic-assistant/README.md
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/api.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.test.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/conversation_selector/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/conversation_selector/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/helpers.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt/helpers.test.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt/helpers.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_context/types.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/helpers.test.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/helpers.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.test.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.test.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.test.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.test.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.test.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_textarea/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_textarea/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/add_quick_prompt_modal/add_quick_prompt_modal.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/add_quick_prompt_modal/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/prompt_context_selector/prompt_context_selector.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/prompt_context_selector/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompts.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/types.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/settings_popover.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/streaming_text/index.test.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/streaming_text/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/types.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/use_assistant_overlay/index.test.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/use_assistant_overlay/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/helpers.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/sample_conversations.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant/use_send_messages/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant_context/helpers.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.test.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/assistant_context/types.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_button/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/helpers.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/connectorland/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/connectorland/use_load_action_types/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/connectorland/use_load_connectors/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/content/prompts/system/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/content/prompts/user/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/content/prompts/welcome/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/mock/prompt_context/index.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/mock/system_prompt/index.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/mock/user_prompt/index.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/new_chat/index.test.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/new_chat/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/new_chat/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/new_chat_by_id/index.test.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/new_chat_by_id/index.tsx
 create mode 100644 x-pack/packages/kbn-elastic-assistant/impl/new_chat_by_id/translations.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/index.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/jest.config.js
 create mode 100644 x-pack/packages/kbn-elastic-assistant/kibana.jsonc
 create mode 100644 x-pack/packages/kbn-elastic-assistant/package.json
 create mode 100644 x-pack/packages/kbn-elastic-assistant/setup_tests.ts
 create mode 100644 x-pack/packages/kbn-elastic-assistant/tsconfig.json
 create mode 100644 x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/callout_summary/translations.ts
 create mode 100644 x-pack/plugins/security_solution/public/assistant/comment_actions/index.tsx
 create mode 100644 x-pack/plugins/security_solution/public/assistant/comment_actions/translations.ts
 create mode 100644 x-pack/plugins/security_solution/public/assistant/content/conversations/index.tsx
 create mode 100644 x-pack/plugins/security_solution/public/assistant/content/conversations/translations.ts
 create mode 100644 x-pack/plugins/security_solution/public/assistant/content/prompt_contexts/index.tsx
 create mode 100644 x-pack/plugins/security_solution/public/assistant/content/quick_prompts/index.tsx
 create mode 100644 x-pack/plugins/security_solution/public/assistant/content/quick_prompts/translations.ts
 create mode 100644 x-pack/plugins/security_solution/public/assistant/get_comments/index.tsx
 create mode 100644 x-pack/plugins/security_solution/public/assistant/get_comments/translations.ts
 create mode 100644 x-pack/plugins/security_solution/public/assistant/helpers.tsx
 create mode 100644 x-pack/plugins/security_solution/public/assistant/jest.config.js
 create mode 100644 x-pack/plugins/security_solution/public/assistant/send_to_timeline/index.tsx
 create mode 100644 x-pack/plugins/security_solution/public/assistant/use_conversation_store/index.tsx
 create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/super_header.tsx

diff --git a/.eslintrc.js b/.eslintrc.js
index 8cf08f2819248..952aa6509fc38 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -980,6 +980,7 @@ module.exports = {
       // front end and common typescript and javascript files only
       files: [
         'x-pack/plugins/ecs_data_quality_dashboard/common/**/*.{js,mjs,ts,tsx}',
+        'x-pack/packages/kbn-elastic-assistant/**/*.{js,mjs,ts,tsx}',
         'x-pack/packages/security-solution/**/*.{js,mjs,ts,tsx}',
         'x-pack/plugins/security_solution/public/**/*.{js,mjs,ts,tsx}',
         'x-pack/plugins/security_solution/common/**/*.{js,mjs,ts,tsx}',
@@ -1007,6 +1008,7 @@ module.exports = {
       // This should be a very small set as most linter rules are useful for tests as well.
       files: [
         'x-pack/plugins/ecs_data_quality_dashboard/**/*.{ts,tsx}',
+        'x-pack/packages/kbn-elastic-assistant/**/*.{ts,tsx}',
         'x-pack/packages/security-solution/**/*.{ts,tsx}',
         'x-pack/plugins/security_solution/**/*.{ts,tsx}',
         'x-pack/plugins/timelines/**/*.{ts,tsx}',
@@ -1014,6 +1016,7 @@ module.exports = {
       ],
       excludedFiles: [
         'x-pack/plugins/ecs_data_quality_dashboard/**/*.{test,mock,test_helper}.{ts,tsx}',
+        'x-pack/packages/kbn-elastic-assistant/**/*.{test,mock,test_helper}.{ts,tsx}',
         'x-pack/packages/security-solution/**/*.{test,mock,test_helper}.{ts,tsx}',
         'x-pack/plugins/security_solution/**/*.{test,mock,test_helper}.{ts,tsx}',
         'x-pack/plugins/timelines/**/*.{test,mock,test_helper}.{ts,tsx}',
@@ -1027,6 +1030,7 @@ module.exports = {
       // typescript only for front and back end
       files: [
         'x-pack/plugins/ecs_data_quality_dashboard/**/*.{ts,tsx}',
+        'x-pack/packages/kbn-elastic-assistant/**/*.{ts,tsx}',
         'x-pack/packages/security-solution/**/*.{ts,tsx}',
         'x-pack/plugins/security_solution/**/*.{ts,tsx}',
         'x-pack/plugins/timelines/**/*.{ts,tsx}',
@@ -1059,6 +1063,7 @@ module.exports = {
       // typescript and javascript for front and back end
       files: [
         'x-pack/plugins/ecs_data_quality_dashboard/**/*.{js,mjs,ts,tsx}',
+        'x-pack/packages/kbn-elastic-assistant/**/*.{js,mjs,ts,tsx}',
         'x-pack/packages/security-solution/**/*.{js,mjs,ts,tsx}',
         'x-pack/plugins/security_solution/**/*.{js,mjs,ts,tsx}',
         'x-pack/plugins/timelines/**/*.{js,mjs,ts,tsx}',
diff --git a/package.json b/package.json
index 90a3b2895c6a7..898927f141a33 100644
--- a/package.json
+++ b/package.json
@@ -360,6 +360,7 @@
     "@kbn/ecs": "link:packages/kbn-ecs",
     "@kbn/ecs-data-quality-dashboard": "link:x-pack/packages/security-solution/ecs_data_quality_dashboard",
     "@kbn/ecs-data-quality-dashboard-plugin": "link:x-pack/plugins/ecs_data_quality_dashboard",
+    "@kbn/elastic-assistant": "link:x-pack/packages/kbn-elastic-assistant",
     "@kbn/elasticsearch-client-plugin": "link:test/plugin_functional/plugins/elasticsearch_client_plugin",
     "@kbn/elasticsearch-client-xpack-plugin": "link:x-pack/test/plugin_api_integration/plugins/elasticsearch_client",
     "@kbn/embeddable-enhanced-plugin": "link:x-pack/plugins/embeddable_enhanced",
diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js
index 7c164cbc2edc1..125f859be347b 100644
--- a/packages/kbn-babel-preset/styled_components_files.js
+++ b/packages/kbn-babel-preset/styled_components_files.js
@@ -16,6 +16,7 @@ module.exports = {
     /src[\/\\]plugins[\/\\](kibana_react)[\/\\]/,
     /x-pack[\/\\]plugins[\/\\](apm|beats_management|cases|fleet|infra|lists|observability|observability_shared|exploratory_view|osquery|security_solution|timelines|synthetics|ux)[\/\\]/,
     /x-pack[\/\\]test[\/\\]plugin_functional[\/\\]plugins[\/\\]resolver_test[\/\\]/,
+    /x-pack[\/\\]packages[\/\\]elastic_assistant[\/\\]/,
     /x-pack[\/\\]packages[\/\\]security-solution[\/\\]ecs_data_quality_dashboard[\/\\]/,
   ],
 };
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 31f3c5528dc8a..38d3cb1f18e4a 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -636,6 +636,8 @@
       "@kbn/ecs-data-quality-dashboard/*": ["x-pack/packages/security-solution/ecs_data_quality_dashboard/*"],
       "@kbn/ecs-data-quality-dashboard-plugin": ["x-pack/plugins/ecs_data_quality_dashboard"],
       "@kbn/ecs-data-quality-dashboard-plugin/*": ["x-pack/plugins/ecs_data_quality_dashboard/*"],
+      "@kbn/elastic-assistant": ["x-pack/packages/kbn-elastic-assistant"],
+      "@kbn/elastic-assistant/*": ["x-pack/packages/kbn-elastic-assistant/*"],
       "@kbn/elasticsearch-client-plugin": ["test/plugin_functional/plugins/elasticsearch_client_plugin"],
       "@kbn/elasticsearch-client-plugin/*": ["test/plugin_functional/plugins/elasticsearch_client_plugin/*"],
       "@kbn/elasticsearch-client-xpack-plugin": ["x-pack/test/plugin_api_integration/plugins/elasticsearch_client"],
diff --git a/x-pack/.i18nrc.json b/x-pack/.i18nrc.json
index 8071085e9cc8b..7685878f0e8d9 100644
--- a/x-pack/.i18nrc.json
+++ b/x-pack/.i18nrc.json
@@ -20,6 +20,7 @@
     "xpack.dashboard": "plugins/dashboard_enhanced",
     "xpack.discover": "plugins/discover_enhanced",
     "xpack.crossClusterReplication": "plugins/cross_cluster_replication",
+    "xpack.elasticAssistant": "packages/kbn-elastic-assistant",
     "xpack.embeddableEnhanced": "plugins/embeddable_enhanced",
     "xpack.endpoint": "plugins/endpoint",
     "xpack.enterpriseSearch": "plugins/enterprise_search",
diff --git a/x-pack/packages/kbn-elastic-assistant/README.md b/x-pack/packages/kbn-elastic-assistant/README.md
new file mode 100644
index 0000000000000..0d0a848e536c7
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/README.md
@@ -0,0 +1,20 @@
+# @kbn/elastic-assistant
+
+The `Elastic Assistant` is a user interface for interacting with generative AIs, like `ChatGPT`.
+
+This package provides:
+
+- Components for rendering the `Elastic Assistant`
+- Hooks for passing context (for example, fields in an alert) to the `Elastic Assistant`, enabling users to include this content in their queries
+
+## Maintainers
+
+Maintained by the Security Solution team
+
+## Running unit tests with code coverage
+
+To (interactively) run unit tests with code coverage, run the following command:
+
+```sh
+cd $KIBANA_HOME && node scripts/jest --watch x-pack/packages/kbn-elastic-assistant --coverage
+```
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/api.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/api.tsx
new file mode 100644
index 0000000000000..798da471e32d8
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/api.tsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { OpenAiProviderType } from '@kbn/stack-connectors-plugin/public/common';
+
+import { HttpSetup } from '@kbn/core-http-browser';
+import type { Message } from '../assistant_context/types';
+import { Conversation } from '../assistant_context/types';
+import { API_ERROR } from './translations';
+
+export interface FetchConnectorExecuteAction {
+  apiConfig: Conversation['apiConfig'];
+  http: HttpSetup;
+  messages: Message[];
+  signal?: AbortSignal | undefined;
+}
+
+export const fetchConnectorExecuteAction = async ({
+  http,
+  messages,
+  apiConfig,
+  signal,
+}: FetchConnectorExecuteAction): Promise<string> => {
+  const outboundMessages = messages.map((msg) => ({
+    role: msg.role,
+    content: msg.content,
+  }));
+
+  const body =
+    apiConfig?.provider === OpenAiProviderType.OpenAi
+      ? {
+          model: 'gpt-3.5-turbo',
+          messages: outboundMessages,
+          n: 1,
+          stop: null,
+          temperature: 0.2,
+        }
+      : {
+          messages: outboundMessages,
+        };
+
+  const requestBody = {
+    params: {
+      subActionParams: {
+        body: JSON.stringify(body),
+      },
+      subAction: 'test',
+    },
+  };
+
+  try {
+    // TODO: Find return type for this API
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const response = await http.fetch<any>(
+      `/api/actions/connector/${apiConfig?.connectorId}/_execute`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(requestBody),
+        signal,
+      }
+    );
+
+    const data = response.data;
+    if (response.status !== 'ok') {
+      return API_ERROR;
+    }
+
+    if (data.choices && data.choices.length > 0 && data.choices[0].message.content) {
+      const result = data.choices[0].message.content.trim();
+      return result;
+    } else {
+      return API_ERROR;
+    }
+  } catch (error) {
+    return API_ERROR;
+  }
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx
new file mode 100644
index 0000000000000..ed8ae782946b4
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx
@@ -0,0 +1,90 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { EuiModal } from '@elastic/eui';
+
+import useEvent from 'react-use/lib/useEvent';
+// eslint-disable-next-line @kbn/eslint/module_migration
+import styled from 'styled-components';
+import { ShowAssistantOverlayProps, useAssistantContext } from '../../assistant_context';
+import { Assistant } from '..';
+import { WELCOME_CONVERSATION_TITLE } from '../use_conversation/translations';
+
+const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
+
+const StyledEuiModal = styled(EuiModal)`
+  min-width: 1200px;
+  max-height: 100%;
+  height: 100%;
+`;
+
+/**
+ * Modal container for Security Assistant conversations, receiving the page contents as context, plus whatever
+ * component currently has focus and any specific context it may provide through the SAssInterface.
+ */
+export const AssistantOverlay: React.FC = React.memo(() => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [conversationId, setConversationId] = useState<string | undefined>(
+    WELCOME_CONVERSATION_TITLE
+  );
+  const [promptContextId, setPromptContextId] = useState<string | undefined>();
+  const { setShowAssistantOverlay } = useAssistantContext();
+
+  // Bind `showAssistantOverlay` in SecurityAssistantContext to this modal instance
+  const showOverlay = useCallback(
+    () =>
+      ({
+        showOverlay: so,
+        promptContextId: pid,
+        conversationId: cid,
+      }: ShowAssistantOverlayProps) => {
+        setIsModalVisible(so);
+        setPromptContextId(pid);
+        setConversationId(cid);
+      },
+    [setIsModalVisible]
+  );
+  useEffect(() => {
+    setShowAssistantOverlay(showOverlay);
+  }, [setShowAssistantOverlay, showOverlay]);
+
+  // Register keyboard listener to show the modal when cmd + ; is pressed
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === ';' && (isMac ? event.metaKey : event.ctrlKey)) {
+        event.preventDefault();
+        setIsModalVisible(!isModalVisible);
+      }
+    },
+    [isModalVisible]
+  );
+  useEvent('keydown', onKeyDown);
+
+  // Modal control functions
+  const cleanupAndCloseModal = useCallback(() => {
+    setIsModalVisible(false);
+    setPromptContextId(undefined);
+    setConversationId(conversationId);
+  }, [conversationId]);
+
+  const handleCloseModal = useCallback(() => {
+    cleanupAndCloseModal();
+  }, [cleanupAndCloseModal]);
+
+  return (
+    <>
+      {isModalVisible && (
+        <StyledEuiModal onClose={handleCloseModal}>
+          <Assistant conversationId={conversationId} promptContextId={promptContextId} />
+        </StyledEuiModal>
+      )}
+    </>
+  );
+});
+
+AssistantOverlay.displayName = 'AssistantOverlay';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/translations.ts
new file mode 100644
index 0000000000000..086f87147287c
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/translations.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const CANCEL_BUTTON = i18n.translate(
+  'xpack.elasticAssistant.assistant.overlay.CancelButton',
+  {
+    defaultMessage: 'Cancel',
+  }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.test.tsx
new file mode 100644
index 0000000000000..75e3d4e015d45
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.test.tsx
@@ -0,0 +1,122 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { TestProviders } from '../../mock/test_providers/test_providers';
+import type { PromptContext } from '../prompt_context/types';
+import { ContextPills } from '.';
+
+const mockPromptContexts: Record<string, PromptContext> = {
+  context1: {
+    category: 'alert',
+    description: 'Context 1',
+    getPromptContext: () => Promise.resolve('Context 1 data'),
+    id: 'context1',
+    tooltip: 'Context 1 tooltip',
+  },
+  context2: {
+    category: 'event',
+    description: 'Context 2',
+    getPromptContext: () => Promise.resolve('Context 2 data'),
+    id: 'context2',
+    tooltip: 'Context 2 tooltip',
+  },
+};
+
+describe('ContextPills', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it('renders the context pill descriptions', () => {
+    render(
+      <TestProviders>
+        <ContextPills
+          promptContexts={mockPromptContexts}
+          selectedPromptContextIds={[]}
+          setSelectedPromptContextIds={jest.fn()}
+        />
+      </TestProviders>
+    );
+
+    Object.values(mockPromptContexts).forEach(({ id, description }) => {
+      expect(screen.getByTestId(`pillButton-${id}`)).toHaveTextContent(description);
+    });
+  });
+
+  it('invokes setSelectedPromptContextIds() when the prompt is NOT already selected', () => {
+    const context = mockPromptContexts.context1;
+    const setSelectedPromptContextIds = jest.fn();
+
+    render(
+      <TestProviders>
+        <ContextPills
+          promptContexts={mockPromptContexts}
+          selectedPromptContextIds={[]} // <-- the prompt is NOT selected
+          setSelectedPromptContextIds={setSelectedPromptContextIds}
+        />
+      </TestProviders>
+    );
+
+    userEvent.click(screen.getByTestId(`pillButton-${context.id}`));
+
+    expect(setSelectedPromptContextIds).toBeCalled();
+  });
+
+  it('it does NOT invoke setSelectedPromptContextIds() when the prompt is already selected', () => {
+    const context = mockPromptContexts.context1;
+    const setSelectedPromptContextIds = jest.fn();
+
+    render(
+      <TestProviders>
+        <ContextPills
+          promptContexts={mockPromptContexts}
+          selectedPromptContextIds={[context.id]} // <-- the context is already selected
+          setSelectedPromptContextIds={setSelectedPromptContextIds}
+        />
+      </TestProviders>
+    );
+
+    // NOTE: this test uses `fireEvent` instead of `userEvent` to bypass the disabled button:
+    fireEvent.click(screen.getByTestId(`pillButton-${context.id}`));
+
+    expect(setSelectedPromptContextIds).not.toBeCalled();
+  });
+
+  it('disables selected context pills', () => {
+    const context = mockPromptContexts.context1;
+
+    render(
+      <TestProviders>
+        <ContextPills
+          promptContexts={mockPromptContexts}
+          selectedPromptContextIds={[context.id]} // <-- context1 is selected
+          setSelectedPromptContextIds={jest.fn()}
+        />
+      </TestProviders>
+    );
+
+    expect(screen.getByTestId(`pillButton-${context.id}`)).toBeDisabled();
+  });
+
+  it("does NOT disable context pills that aren't selected", () => {
+    const context = mockPromptContexts.context1;
+
+    render(
+      <TestProviders>
+        <ContextPills
+          promptContexts={mockPromptContexts}
+          selectedPromptContextIds={['context2']} // context1 is NOT selected
+          setSelectedPromptContextIds={jest.fn()}
+        />
+      </TestProviders>
+    );
+
+    expect(screen.getByTestId(`pillButton-${context.id}`)).not.toBeDisabled();
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.tsx
new file mode 100644
index 0000000000000..a8522a75b5adb
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.tsx
@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { sortBy } from 'lodash/fp';
+import React, { useCallback, useMemo } from 'react';
+// eslint-disable-next-line @kbn/eslint/module_migration
+import styled from 'styled-components';
+
+import type { PromptContext } from '../prompt_context/types';
+
+const PillButton = styled(EuiButton)`
+  margin-right: ${({ theme }) => theme.eui.euiSizeXS};
+`;
+
+interface Props {
+  promptContexts: Record<string, PromptContext>;
+  selectedPromptContextIds: string[];
+  setSelectedPromptContextIds: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+const ContextPillsComponent: React.FC<Props> = ({
+  promptContexts,
+  selectedPromptContextIds,
+  setSelectedPromptContextIds,
+}) => {
+  const sortedPromptContexts = useMemo(
+    () => sortBy('description', Object.values(promptContexts)),
+    [promptContexts]
+  );
+
+  const selectPromptContext = useCallback(
+    (id: string) => {
+      if (!selectedPromptContextIds.includes(id)) {
+        setSelectedPromptContextIds((prev) => [...prev, id]);
+      }
+    },
+    [selectedPromptContextIds, setSelectedPromptContextIds]
+  );
+
+  return (
+    <EuiFlexGroup gutterSize="none" wrap>
+      {sortedPromptContexts.map(({ description, id, getPromptContext, tooltip }) => (
+        <EuiFlexItem grow={false} key={id}>
+          <EuiToolTip content={tooltip}>
+            <PillButton
+              data-test-subj={`pillButton-${id}`}
+              disabled={selectedPromptContextIds.includes(id)}
+              iconSide="left"
+              iconType="plus"
+              onClick={() => selectPromptContext(id)}
+            >
+              {description}
+            </PillButton>
+          </EuiToolTip>
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+};
+
+export const ContextPills = React.memo(ContextPillsComponent);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversation_selector/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversation_selector/index.tsx
new file mode 100644
index 0000000000000..f7af69f42cd82
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversation_selector/index.tsx
@@ -0,0 +1,142 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiButtonIcon, EuiFormRow, EuiSuperSelect, EuiToolTip } from '@elastic/eui';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import useEvent from 'react-use/lib/useEvent';
+import { css } from '@emotion/react';
+
+import { useAssistantContext } from '../../assistant_context';
+import * as i18n from './translations';
+import { DEFAULT_CONVERSATION_TITLE } from '../use_conversation/translations';
+
+const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
+
+interface Props {
+  conversationId?: string;
+  onSelectionChange?: (value: string) => void;
+  shouldDisableKeyboardShortcut?: () => boolean;
+  isDisabled?: boolean;
+}
+
+const getPreviousConversationId = (conversationIds: string[], selectedConversationId: string) => {
+  return conversationIds.indexOf(selectedConversationId) === 0
+    ? conversationIds[conversationIds.length - 1]
+    : conversationIds[conversationIds.indexOf(selectedConversationId) - 1];
+};
+
+function getNextConversationId(conversationIds: string[], selectedConversationId: string) {
+  return conversationIds.indexOf(selectedConversationId) + 1 >= conversationIds.length
+    ? conversationIds[0]
+    : conversationIds[conversationIds.indexOf(selectedConversationId) + 1];
+}
+
+export const ConversationSelector: React.FC<Props> = React.memo(
+  ({
+    conversationId = DEFAULT_CONVERSATION_TITLE,
+    onSelectionChange,
+    shouldDisableKeyboardShortcut = () => false,
+    isDisabled = false,
+  }) => {
+    const [selectedConversationId, setSelectedConversationId] = useState<string>(conversationId);
+
+    const { conversations } = useAssistantContext();
+    const conversationIds = useMemo(() => Object.keys(conversations), [conversations]);
+    const conversationOptions = conversationIds.map((id) => ({ value: id, inputDisplay: id }));
+
+    const onChange = useCallback((value: string) => {
+      setSelectedConversationId(value ?? DEFAULT_CONVERSATION_TITLE);
+    }, []);
+    const onLeftArrowClick = useCallback(() => {
+      const prevId = getPreviousConversationId(conversationIds, selectedConversationId);
+      setSelectedConversationId(prevId);
+    }, [conversationIds, selectedConversationId]);
+    const onRightArrowClick = useCallback(() => {
+      const nextId = getNextConversationId(conversationIds, selectedConversationId);
+      setSelectedConversationId(nextId);
+    }, [conversationIds, selectedConversationId]);
+
+    // Register keyboard listener for quick conversation switching
+    const onKeyDown = useCallback(
+      (event: KeyboardEvent) => {
+        if (isDisabled || conversationIds.length <= 1) {
+          return;
+        }
+
+        if (
+          event.key === 'ArrowLeft' &&
+          (isMac ? event.metaKey : event.ctrlKey) &&
+          !shouldDisableKeyboardShortcut()
+        ) {
+          event.preventDefault();
+          onLeftArrowClick();
+        }
+        if (
+          event.key === 'ArrowRight' &&
+          (isMac ? event.metaKey : event.ctrlKey) &&
+          !shouldDisableKeyboardShortcut()
+        ) {
+          event.preventDefault();
+          onRightArrowClick();
+        }
+      },
+      [
+        conversationIds.length,
+        isDisabled,
+        onLeftArrowClick,
+        onRightArrowClick,
+        shouldDisableKeyboardShortcut,
+      ]
+    );
+    useEvent('keydown', onKeyDown);
+
+    useEffect(() => {
+      onSelectionChange?.(selectedConversationId);
+    }, [onSelectionChange, selectedConversationId]);
+
+    return (
+      <EuiFormRow
+        label={i18n.SELECTED_CONVERSATION_LABEL}
+        display="rowCompressed"
+        css={css`
+          min-width: 300px;
+        `}
+      >
+        <EuiSuperSelect
+          options={conversationOptions}
+          valueOfSelected={selectedConversationId}
+          onChange={onChange}
+          compressed={true}
+          disabled={isDisabled}
+          aria-label={i18n.CONVERSATION_SELECTOR_ARIA_LABEL}
+          prepend={
+            <EuiToolTip content={`${i18n.PREVIOUS_CONVERSATION_TITLE} (⌘ + ←)`} display="block">
+              <EuiButtonIcon
+                iconType="arrowLeft"
+                aria-label={i18n.PREVIOUS_CONVERSATION_TITLE}
+                onClick={onLeftArrowClick}
+                disabled={isDisabled || conversationIds.length <= 1}
+              />
+            </EuiToolTip>
+          }
+          append={
+            <EuiToolTip content={`${i18n.NEXT_CONVERSATION_TITLE} (⌘ + →)`} display="block">
+              <EuiButtonIcon
+                iconType="arrowRight"
+                aria-label={i18n.NEXT_CONVERSATION_TITLE}
+                onClick={onRightArrowClick}
+                disabled={isDisabled || conversationIds.length <= 1}
+              />
+            </EuiToolTip>
+          }
+        />
+      </EuiFormRow>
+    );
+  }
+);
+
+ConversationSelector.displayName = 'ConversationSelector';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversation_selector/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversation_selector/translations.ts
new file mode 100644
index 0000000000000..96f9ce12ce315
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversation_selector/translations.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const SELECTED_CONVERSATION_LABEL = i18n.translate(
+  'xpack.elasticAssistant.assistant.conversationSelector.defaultConversationTitle',
+  {
+    defaultMessage: 'Selected conversation',
+  }
+);
+
+export const CONVERSATION_SELECTOR_ARIA_LABEL = i18n.translate(
+  'xpack.elasticAssistant.assistant.conversationSelector.ariaLabel',
+  {
+    defaultMessage: 'Conversation selector',
+  }
+);
+
+export const PREVIOUS_CONVERSATION_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.conversationSelector.previousConversationTitle',
+  {
+    defaultMessage: 'Previous conversation',
+  }
+);
+
+export const NEXT_CONVERSATION_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.conversationSelector.nextConversationTitle',
+  {
+    defaultMessage: 'Next conversation',
+  }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/helpers.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/helpers.ts
new file mode 100644
index 0000000000000..8cf7986600041
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/helpers.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { Message } from '../assistant_context/types';
+
+export const getMessageFromRawResponse = (rawResponse: string): Message => {
+  const dateTimeString = new Date().toLocaleString(); // TODO: Pull from response
+  if (rawResponse) {
+    return {
+      role: 'assistant',
+      content: rawResponse,
+      timestamp: dateTimeString,
+    };
+  } else {
+    return {
+      role: 'assistant',
+      content: 'Error: Response from LLM API is empty or undefined.',
+      timestamp: dateTimeString,
+    };
+  }
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx
new file mode 100644
index 0000000000000..3a7ff3fb85c6a
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx
@@ -0,0 +1,474 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiButtonIcon,
+  EuiHorizontalRule,
+  EuiCommentList,
+  EuiToolTip,
+  EuiSplitPanel,
+  EuiCallOut,
+  EuiIcon,
+  EuiTitle,
+} from '@elastic/eui';
+
+// eslint-disable-next-line @kbn/eslint/module_migration
+import styled from 'styled-components';
+import { createPortal } from 'react-dom';
+import { css } from '@emotion/react';
+
+import { getMessageFromRawResponse } from './helpers';
+
+import { SettingsPopover } from './settings_popover';
+import { useAssistantContext } from '../assistant_context';
+import { ContextPills } from './context_pills';
+import { PromptTextArea } from './prompt_textarea';
+import type { PromptContext } from './prompt_context/types';
+import { useConversation } from './use_conversation';
+import { CodeBlockDetails } from './use_conversation/helpers';
+import { useSendMessages } from './use_send_messages';
+import type { Message } from '../assistant_context/types';
+import { ConversationSelector } from './conversation_selector';
+import { PromptEditor } from './prompt_editor';
+import { getCombinedMessage, getDefaultSystemPrompt, getSuperheroPrompt } from './prompt/helpers';
+import * as i18n from './translations';
+import type { Prompt } from './types';
+import { getPromptById } from './prompt_editor/helpers';
+import { QuickPrompts } from './quick_prompts/quick_prompts';
+import { useLoadConnectors } from '../connectorland/use_load_connectors';
+import { ConnectorSetup } from '../connectorland/connector_setup';
+import { WELCOME_CONVERSATION_TITLE } from './use_conversation/translations';
+import { BASE_CONVERSATIONS } from './use_conversation/sample_conversations';
+
+const CommentsContainer = styled.div`
+  max-height: 600px;
+  max-width: 100%;
+  overflow-y: scroll;
+`;
+
+const ChatOptionsFlexItem = styled(EuiFlexItem)`
+  left: -34px;
+  position: relative;
+  top: 11px;
+`;
+
+const StyledCommentList = styled(EuiCommentList)`
+  margin-right: 20px;
+`;
+
+export interface Props {
+  promptContextId?: string;
+  conversationId?: string;
+  showTitle?: boolean;
+  shouldRefocusPrompt?: boolean;
+}
+
+/**
+ * Renders a chat window with a prompt input and a chat history, along with
+ * quick prompts for common actions, settings, and prompt context providers.
+ */
+const AssistantComponent: React.FC<Props> = ({
+  promptContextId = '',
+  showTitle = true,
+  conversationId = WELCOME_CONVERSATION_TITLE,
+  shouldRefocusPrompt = false,
+}) => {
+  const {
+    actionTypeRegistry,
+    augmentMessageCodeBlocks,
+    conversations,
+    getComments,
+    http,
+    promptContexts,
+    title,
+  } = useAssistantContext();
+  const [selectedPromptContextIds, setSelectedPromptContextIds] = useState<string[]>([]);
+
+  const { appendMessage, clearConversation, createConversation } = useConversation();
+  const { isLoading, sendMessages } = useSendMessages();
+
+  const [selectedConversationId, setSelectedConversationId] = useState<string>(conversationId);
+  const currentConversation = useMemo(
+    () => conversations[selectedConversationId] ?? createConversation({ conversationId }),
+    [conversationId, conversations, createConversation, selectedConversationId]
+  );
+
+  // Welcome conversation is a special 'setup' case when no connector exists, mostly extracted to `ConnectorSetup` component,
+  // but currently a bit of state is littered throughout the assistant component. TODO: clean up/isolate this state
+  const welcomeConversation = useMemo(
+    () => conversations[selectedConversationId] ?? BASE_CONVERSATIONS[WELCOME_CONVERSATION_TITLE],
+    [conversations, selectedConversationId]
+  );
+
+  const { data: connectors, refetch: refetchConnectors } = useLoadConnectors({ http });
+  const isWelcomeSetup = (connectors?.length ?? 0) === 0;
+  const currentTitle: { title: string | JSX.Element; titleIcon: string } =
+    isWelcomeSetup && welcomeConversation.theme?.title && welcomeConversation.theme?.titleIcon
+      ? { title: welcomeConversation.theme?.title, titleIcon: welcomeConversation.theme?.titleIcon }
+      : { title, titleIcon: 'logoSecurity' };
+
+  const bottomRef = useRef<HTMLDivElement | null>(null);
+  const lastCommentRef = useRef<HTMLDivElement | null>(null);
+
+  const [promptTextPreview, setPromptTextPreview] = useState<string>('');
+  const [systemPrompts] = useState<Prompt[]>([getDefaultSystemPrompt(), getSuperheroPrompt()]);
+  const [selectedSystemPromptId, setSelectedSystemPromptId] = useState<string | null>(
+    getDefaultSystemPrompt().id
+  );
+  const [autoPopulatedOnce, setAutoPopulatedOnce] = useState<boolean>(false);
+  const [suggestedUserPrompt, setSuggestedUserPrompt] = useState<string | null>(null);
+
+  const [showMissingConnectorCallout, setShowMissingConnectorCallout] = useState<boolean>(false);
+
+  const [messageCodeBlocks, setMessageCodeBlocks] = useState<CodeBlockDetails[][]>(
+    augmentMessageCodeBlocks(currentConversation)
+  );
+  const [_, setCodeBlockControlsVisible] = useState(false);
+  useLayoutEffect(() => {
+    setMessageCodeBlocks(augmentMessageCodeBlocks(currentConversation));
+  }, [augmentMessageCodeBlocks, currentConversation]);
+
+  const isSendingDisabled = useMemo(() => {
+    return isWelcomeSetup || showMissingConnectorCallout;
+  }, [showMissingConnectorCallout, isWelcomeSetup]);
+
+  // Fixes initial render not showing buttons as code block controls are added to the DOM really late
+  useEffect(() => {
+    const updateElements = () => {
+      const elements = document.querySelectorAll('.euiCodeBlock__controls');
+      setCodeBlockControlsVisible(elements.length > 0);
+    };
+
+    updateElements(); // Initial update
+
+    const observer = new MutationObserver(updateElements);
+    observer.observe(document.body, { subtree: true, childList: true });
+
+    return () => {
+      observer.disconnect(); // Clean up the observer if component unmounts
+    };
+  }, []);
+  // End drill in `Add To Timeline` action
+
+  // For auto-focusing prompt within timeline
+  const promptTextAreaRef = useRef<HTMLTextAreaElement>(null);
+  useEffect(() => {
+    if (shouldRefocusPrompt && promptTextAreaRef.current) {
+      promptTextAreaRef?.current.focus();
+    }
+  }, [shouldRefocusPrompt]);
+
+  // Scroll to bottom on conversation change
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'auto' });
+  }, []);
+  useEffect(() => {
+    setTimeout(() => {
+      bottomRef.current?.scrollIntoView({ behavior: 'auto' });
+      promptTextAreaRef?.current?.focus();
+    }, 0);
+  }, [currentConversation.messages.length, selectedPromptContextIds.length]);
+  ////
+
+  // Handles sending latest user prompt to API
+  const handleSendMessage = useCallback(
+    async (promptText) => {
+      const message = await getCombinedMessage({
+        isNewChat: currentConversation.messages.length === 0,
+        promptContexts,
+        promptText,
+        selectedPromptContextIds,
+        selectedSystemPrompt: getPromptById({
+          id: selectedSystemPromptId ?? '',
+          prompts: systemPrompts,
+        }),
+      });
+
+      const updatedMessages = appendMessage({
+        conversationId: selectedConversationId,
+        message,
+      });
+
+      // Reset prompt context selection and preview before sending:
+      setSelectedPromptContextIds([]);
+      setPromptTextPreview('');
+
+      const rawResponse = await sendMessages({
+        http,
+        apiConfig: currentConversation.apiConfig,
+        messages: updatedMessages,
+      });
+      const responseMessage: Message = getMessageFromRawResponse(rawResponse);
+      appendMessage({ conversationId: selectedConversationId, message: responseMessage });
+    },
+    [
+      appendMessage,
+      currentConversation.apiConfig,
+      currentConversation.messages.length,
+      http,
+      promptContexts,
+      selectedConversationId,
+      selectedPromptContextIds,
+      selectedSystemPromptId,
+      sendMessages,
+      systemPrompts,
+    ]
+  );
+
+  const handleButtonSendMessage = useCallback(() => {
+    handleSendMessage(promptTextAreaRef.current?.value?.trim() ?? '');
+  }, [handleSendMessage, promptTextAreaRef]);
+
+  const shouldDisableConversationSelectorHotkeys = useCallback(() => {
+    const promptTextAreaHasFocus = document.activeElement === promptTextAreaRef.current;
+    return promptTextAreaHasFocus;
+  }, [promptTextAreaRef]);
+
+  // Add min-height to all codeblocks so timeline icon doesn't overflow
+  const codeBlockContainers = [...document.getElementsByClassName('euiCodeBlock')];
+  // @ts-ignore-expect-error
+  codeBlockContainers.forEach((e) => (e.style.minHeight = '75px'));
+  ////
+
+  const comments = getComments({ currentConversation, lastCommentRef });
+
+  useEffect(() => {
+    // Adding `conversationId !== selectedConversationId` to prevent auto-run still executing after changing selected conversation
+    if (currentConversation.messages.length || conversationId !== selectedConversationId) {
+      return;
+    }
+
+    if (autoPopulatedOnce) {
+      return;
+    }
+
+    const promptContext: PromptContext | undefined = promptContexts[promptContextId];
+    if (promptContext != null) {
+      setAutoPopulatedOnce(true);
+
+      // select this prompt context
+      if (!selectedPromptContextIds.includes(promptContext.id)) {
+        setSelectedPromptContextIds((prev) => [...prev, promptContext.id]);
+      }
+
+      if (promptContext?.suggestedUserPrompt != null) {
+        setSuggestedUserPrompt(promptContext.suggestedUserPrompt);
+      }
+    }
+  }, [
+    currentConversation.messages,
+    promptContexts,
+    promptContextId,
+    handleSendMessage,
+    conversationId,
+    selectedConversationId,
+    selectedPromptContextIds,
+    autoPopulatedOnce,
+  ]);
+
+  // Show missing connector callout if no connectors are configured
+  useEffect(() => {
+    const connectorExists =
+      connectors?.some(
+        (connector) => connector.id === currentConversation.apiConfig?.connectorId
+      ) ?? false;
+    setShowMissingConnectorCallout(!connectorExists);
+  }, [connectors, currentConversation]);
+
+  return (
+    <EuiSplitPanel.Outer
+      grow={false}
+      css={css`
+        width: 100%;
+      `}
+    >
+      <EuiSplitPanel.Inner grow={false}>
+        {showTitle && (
+          <>
+            <EuiFlexGroup alignItems={'center'} justifyContent={'spaceBetween'}>
+              <EuiFlexItem grow={false}>
+                <EuiFlexGroup alignItems={'center'}>
+                  <EuiFlexItem grow={false}>
+                    <EuiIcon type={currentTitle.titleIcon} size="xl" />
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiTitle>
+                      <span>{currentTitle.title}</span>
+                    </EuiTitle>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <ConversationSelector
+                  conversationId={selectedConversationId}
+                  onSelectionChange={(id) => setSelectedConversationId(id)}
+                  shouldDisableKeyboardShortcut={shouldDisableConversationSelectorHotkeys}
+                  isDisabled={isWelcomeSetup}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiHorizontalRule margin={'m'} />
+            {!isWelcomeSetup && showMissingConnectorCallout && (
+              <>
+                <EuiCallOut
+                  color="danger"
+                  iconType="controlsVertical"
+                  size="m"
+                  title={i18n.MISSING_CONNECTOR_CALLOUT_TITLE}
+                >
+                  <p>{i18n.MISSING_CONNECTOR_CALLOUT_DESCRIPTION}</p>
+                </EuiCallOut>
+                <EuiSpacer size={'s'} />
+              </>
+            )}
+          </>
+        )}
+
+        {/* Create portals for each EuiCodeBlock to add the `Investigate in Timeline` action */}
+        {messageCodeBlocks.map((codeBlocks: CodeBlockDetails[]) => {
+          return codeBlocks.map((codeBlock: CodeBlockDetails) => {
+            const element: Element = codeBlock.controlContainer as Element;
+
+            return codeBlock.controlContainer != null ? (
+              createPortal(codeBlock.button, element)
+            ) : (
+              <></>
+            );
+          });
+        })}
+
+        {!isWelcomeSetup && (
+          <>
+            <ContextPills
+              promptContexts={promptContexts}
+              selectedPromptContextIds={selectedPromptContextIds}
+              setSelectedPromptContextIds={setSelectedPromptContextIds}
+            />
+            {Object.keys(promptContexts).length > 0 && <EuiSpacer size={'s'} />}
+          </>
+        )}
+
+        {isWelcomeSetup && (
+          <ConnectorSetup
+            actionTypeRegistry={actionTypeRegistry}
+            http={http}
+            refetchConnectors={refetchConnectors}
+            isConnectorConfigured={!!connectors?.length}
+          />
+        )}
+
+        {!isWelcomeSetup && (
+          <CommentsContainer className="eui-scrollBar">
+            <>
+              <StyledCommentList comments={comments} />
+              <div ref={bottomRef} />
+
+              <EuiSpacer size={'m'} />
+
+              {(currentConversation.messages.length === 0 ||
+                selectedPromptContextIds.length > 0) && (
+                <PromptEditor
+                  isNewConversation={currentConversation.messages.length === 0}
+                  promptContexts={promptContexts}
+                  promptTextPreview={promptTextPreview}
+                  selectedPromptContextIds={selectedPromptContextIds}
+                  selectedSystemPromptId={selectedSystemPromptId}
+                  setSelectedPromptContextIds={setSelectedPromptContextIds}
+                  setSelectedSystemPromptId={setSelectedSystemPromptId}
+                  systemPrompts={systemPrompts}
+                />
+              )}
+            </>
+          </CommentsContainer>
+        )}
+
+        <EuiSpacer />
+
+        <EuiFlexGroup gutterSize="none">
+          <EuiFlexItem>
+            <PromptTextArea
+              onPromptSubmit={handleSendMessage}
+              ref={promptTextAreaRef}
+              handlePromptChange={setPromptTextPreview}
+              value={isWelcomeSetup ? '' : suggestedUserPrompt ?? ''}
+              isDisabled={isWelcomeSetup}
+            />
+          </EuiFlexItem>
+
+          <ChatOptionsFlexItem grow={false}>
+            <EuiFlexGroup
+              direction="column"
+              gutterSize="xs"
+              css={css`
+                position: absolute;
+              `}
+            >
+              <EuiFlexItem grow={false}>
+                <EuiToolTip position="right" content={i18n.CLEAR_CHAT}>
+                  <EuiButtonIcon
+                    display="base"
+                    iconType="cross"
+                    isDisabled={isWelcomeSetup}
+                    aria-label={i18n.CLEAR_CHAT}
+                    color="danger"
+                    onClick={() => {
+                      setPromptTextPreview('');
+                      clearConversation(selectedConversationId);
+                      setSelectedSystemPromptId(getDefaultSystemPrompt().id);
+                      setSelectedPromptContextIds([]);
+                      setSuggestedUserPrompt('');
+                    }}
+                  />
+                </EuiToolTip>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiToolTip position="right" content={i18n.SUBMIT_MESSAGE}>
+                  <EuiButtonIcon
+                    display="base"
+                    iconType="returnKey"
+                    isDisabled={isSendingDisabled}
+                    aria-label={i18n.SUBMIT_MESSAGE}
+                    color="primary"
+                    onClick={handleButtonSendMessage}
+                    isLoading={isLoading}
+                  />
+                </EuiToolTip>
+              </EuiFlexItem>
+              <EuiFlexItem grow={true}>
+                <SettingsPopover
+                  actionTypeRegistry={actionTypeRegistry}
+                  conversation={currentConversation}
+                  isDisabled={isWelcomeSetup}
+                  http={http}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </ChatOptionsFlexItem>
+        </EuiFlexGroup>
+      </EuiSplitPanel.Inner>
+      {!isWelcomeSetup && (
+        <EuiSplitPanel.Inner
+          grow={false}
+          color="subdued"
+          css={css`
+            padding: 8px;
+          `}
+        >
+          <QuickPrompts setInput={setSuggestedUserPrompt} />
+        </EuiSplitPanel.Inner>
+      )}
+    </EuiSplitPanel.Outer>
+  );
+};
+
+AssistantComponent.displayName = 'AssistantComponent';
+
+export const Assistant = React.memo(AssistantComponent);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt/helpers.test.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt/helpers.test.ts
new file mode 100644
index 0000000000000..7dee322ebc570
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt/helpers.test.ts
@@ -0,0 +1,178 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { Message } from '../../assistant_context/types';
+import {
+  getCombinedMessage,
+  getDefaultSystemPrompt,
+  getSuperheroPrompt,
+  getSystemMessages,
+} from './helpers';
+import { mockSystemPrompt } from '../../mock/system_prompt';
+import { mockAlertPromptContext, mockEventPromptContext } from '../../mock/prompt_context';
+
+describe('helpers', () => {
+  describe('getSystemMessages', () => {
+    it('should return an empty array if isNewChat is false', () => {
+      const result = getSystemMessages({
+        isNewChat: false,
+        selectedSystemPrompt: mockSystemPrompt,
+      });
+
+      expect(result).toEqual([]);
+    });
+
+    it('should return an empty array if selectedSystemPrompt is undefined', () => {
+      const result = getSystemMessages({ isNewChat: true, selectedSystemPrompt: undefined });
+
+      expect(result).toEqual([]);
+    });
+
+    describe('when isNewChat is true and selectedSystemPrompt is defined', () => {
+      let result: Message[];
+
+      beforeEach(() => {
+        result = getSystemMessages({ isNewChat: true, selectedSystemPrompt: mockSystemPrompt });
+      });
+
+      it('should return a message with the content of the selectedSystemPrompt', () => {
+        expect(result[0].content).toBe(mockSystemPrompt.content);
+      });
+
+      it('should return a message with the role "system"', () => {
+        expect(result[0].role).toBe('system');
+      });
+
+      it('should return a message with a valid timestamp', () => {
+        const timestamp = new Date(result[0].timestamp);
+
+        expect(timestamp instanceof Date && !isNaN(timestamp.valueOf())).toBe(true);
+      });
+    });
+  });
+
+  describe('getCombinedMessage', () => {
+    const mockPromptContexts = {
+      [mockAlertPromptContext.id]: mockAlertPromptContext,
+      [mockEventPromptContext.id]: mockEventPromptContext,
+    };
+
+    it('returns correct content for a new chat with a system prompt', async () => {
+      const message: Message = await getCombinedMessage({
+        isNewChat: true,
+        promptContexts: mockPromptContexts,
+        promptText: 'User prompt text',
+        selectedPromptContextIds: [mockAlertPromptContext.id],
+        selectedSystemPrompt: mockSystemPrompt,
+      });
+
+      expect(message.content)
+        .toEqual(`You are a helpful, expert assistant who answers questions about Elastic Security.
+
+CONTEXT:
+"""
+alert data
+"""
+
+User prompt text`);
+    });
+
+    it('returns correct content for a new chat WITHOUT a system prompt', async () => {
+      const message: Message = await getCombinedMessage({
+        isNewChat: true,
+        promptContexts: mockPromptContexts,
+        promptText: 'User prompt text',
+        selectedPromptContextIds: [mockAlertPromptContext.id],
+        selectedSystemPrompt: undefined, // <-- no system prompt
+      });
+
+      expect(message.content).toEqual(`
+
+CONTEXT:
+"""
+alert data
+"""
+
+User prompt text`);
+    });
+
+    it('returns the correct content for an existing chat', async () => {
+      const message: Message = await getCombinedMessage({
+        isNewChat: false,
+        promptContexts: mockPromptContexts,
+        promptText: 'User prompt text',
+        selectedPromptContextIds: [mockAlertPromptContext.id],
+        selectedSystemPrompt: mockSystemPrompt,
+      });
+
+      expect(message.content).toEqual(`CONTEXT:
+"""
+alert data
+"""
+
+CONTEXT:
+"""
+alert data
+"""
+
+User prompt text`);
+    });
+
+    test('getCombinedMessage returns the expected role', async () => {
+      const message: Message = await getCombinedMessage({
+        isNewChat: true,
+        promptContexts: mockPromptContexts,
+        promptText: 'User prompt text',
+        selectedPromptContextIds: [mockAlertPromptContext.id],
+        selectedSystemPrompt: mockSystemPrompt,
+      });
+
+      expect(message.role).toBe('user');
+    });
+
+    test('getCombinedMessage returns a valid timestamp', async () => {
+      const message: Message = await getCombinedMessage({
+        isNewChat: true,
+        promptContexts: mockPromptContexts,
+        promptText: 'User prompt text',
+        selectedPromptContextIds: [mockAlertPromptContext.id],
+        selectedSystemPrompt: mockSystemPrompt,
+      });
+
+      expect(Date.parse(message.timestamp)).not.toBeNaN();
+    });
+  });
+
+  describe('getDefaultSystemPrompt', () => {
+    it('returns the expected prompt', () => {
+      const prompt = getDefaultSystemPrompt();
+
+      expect(prompt).toEqual({
+        content: `You are a helpful, expert assistant who only answers questions about Elastic Security. Do not answer questions unrelated to Elastic Security.
+Use the following context to answer questions:`,
+        id: 'default-system-prompt',
+        name: 'default system prompt',
+        promptType: 'system',
+      });
+    });
+  });
+
+  describe('getSuperheroPrompt', () => {
+    it('returns the expected prompt', () => {
+      const prompt = getSuperheroPrompt();
+
+      expect(prompt).toEqual({
+        content: `You are a helpful, expert assistant who only answers questions about Elastic Security. Do not answer questions unrelated to Elastic Security.
+Provide the most detailed and relevant answer possible, as if you were relaying this information back to a cyber security expert.
+Use the following context to answer questions:`,
+        id: 'CB9FA555-B59F-4F71-AFF9-8A891AC5BC28',
+        name: 'Enhanced system prompt',
+        promptType: 'system',
+      });
+    });
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt/helpers.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt/helpers.ts
new file mode 100644
index 0000000000000..40e5b41805af0
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt/helpers.ts
@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { Message } from '../../assistant_context/types';
+import {
+  DEFAULT_SYSTEM_PROMPT_NON_I18N,
+  DEFAULT_SYSTEM_PROMPT_NAME,
+  SUPERHERO_SYSTEM_PROMPT_NON_I18N,
+  SUPERHERO_SYSTEM_PROMPT_NAME,
+  SYSTEM_PROMPT_CONTEXT_NON_I18N,
+} from '../../content/prompts/system/translations';
+import type { PromptContext } from '../prompt_context/types';
+import type { Prompt } from '../types';
+
+export const getSystemMessages = ({
+  isNewChat,
+  selectedSystemPrompt,
+}: {
+  isNewChat: boolean;
+  selectedSystemPrompt: Prompt | undefined;
+}): Message[] => {
+  if (!isNewChat || selectedSystemPrompt == null) {
+    return [];
+  }
+
+  const message: Message = {
+    content: selectedSystemPrompt.content,
+    role: 'system',
+    timestamp: new Date().toLocaleString(),
+  };
+
+  return [message];
+};
+
+export async function getCombinedMessage({
+  isNewChat,
+  promptContexts,
+  promptText,
+  selectedPromptContextIds,
+  selectedSystemPrompt,
+}: {
+  isNewChat: boolean;
+  promptContexts: Record<string, PromptContext>;
+  promptText: string;
+  selectedPromptContextIds: string[];
+  selectedSystemPrompt: Prompt | undefined;
+}): Promise<Message> {
+  const selectedPromptContexts = selectedPromptContextIds.reduce<PromptContext[]>((acc, id) => {
+    const promptContext = promptContexts[id];
+    return promptContext != null ? [...acc, promptContext] : acc;
+  }, []);
+
+  const promptContextsContent = await Promise.all(
+    selectedPromptContexts.map(async ({ getPromptContext }) => {
+      const promptContext = await getPromptContext();
+
+      return `${SYSTEM_PROMPT_CONTEXT_NON_I18N(promptContext)}`;
+    })
+  );
+
+  return {
+    content: `${isNewChat ? `${selectedSystemPrompt?.content ?? ''}` : `${promptContextsContent}`}
+
+${promptContextsContent}
+
+${promptText}`,
+    role: 'user', // we are combining the system and user messages into one message
+    timestamp: new Date().toLocaleString(),
+  };
+}
+
+export const getDefaultSystemPrompt = (): Prompt => ({
+  id: 'default-system-prompt',
+  content: DEFAULT_SYSTEM_PROMPT_NON_I18N,
+  name: DEFAULT_SYSTEM_PROMPT_NAME,
+  promptType: 'system',
+});
+
+export const getSuperheroPrompt = (): Prompt => ({
+  id: 'CB9FA555-B59F-4F71-AFF9-8A891AC5BC28',
+  content: SUPERHERO_SYSTEM_PROMPT_NON_I18N,
+  name: SUPERHERO_SYSTEM_PROMPT_NAME,
+  promptType: 'system',
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_context/types.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_context/types.ts
new file mode 100644
index 0000000000000..9c9b807281665
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_context/types.ts
@@ -0,0 +1,78 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { ReactNode } from 'react';
+
+/**
+ * helps the Elastic Assistant display the most relevant user prompts
+ */
+export type PromptContextCategory =
+  | 'alert'
+  | 'alerts'
+  | 'event'
+  | 'events'
+  | 'data-quality-index-summary'
+  | string;
+
+/**
+ * This interface is used to pass context to the Elastic Assistant,
+ * for the purpose of building prompts. Examples of context include:
+ * - a single alert
+ * - multiple alerts
+ * - a single event
+ * - multiple events
+ * - markdown
+ * - csv
+ * - anything else that the LLM can interpret
+ */
+export interface PromptContext {
+  /**
+   * The category of data, e.g. `alert | alerts | event | events | string`
+   *
+   * `category` helps the Elastic Assistant display the most relevant user prompts
+   */
+  category: PromptContextCategory;
+
+  /**
+   * The Elastic Assistant will display this **short**, static description
+   * in the context pill
+   */
+  description: string;
+
+  /**
+   * The Elastic Assistant will invoke this function to retrieve the context data,
+   * which will be included in a prompt (e.g. the contents of an alert or an event)
+   */
+  getPromptContext: () => Promise<string>;
+
+  /**
+   * A unique identifier for this prompt context
+   */
+  id: string;
+  /**
+   * An optional user prompt that's filled in, but not sent, when the Elastic Assistant opens
+   */
+  suggestedUserPrompt?: string;
+
+  /**
+   * The Elastic Assistant will display this tooltip when the user hovers over the context pill
+   */
+  tooltip: ReactNode;
+}
+
+/**
+ * This interface is used to pass a default or base set of contexts to the Elastic Assistant when
+ * initializing it. This is used to provide 'category' options when users create Quick Prompts.
+ * Also, useful for collating all of a solutions' prompts in one place.
+ *
+ * e.g. see Security Solution's x-pack/plugins/security_solution/public/assistant/prompt_contexts/index.tsx
+ */
+export type PromptContextTemplate = Omit<PromptContext, 'id' | 'getPromptContext'>;
+
+export type UnRegisterPromptContext = (promptContextId: string) => void;
+
+export type RegisterPromptContext = (promptContext: PromptContext) => void;
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/helpers.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/helpers.test.tsx
new file mode 100644
index 0000000000000..c055d9bd6bb95
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/helpers.test.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { getPromptById } from './helpers';
+import { mockSystemPrompt, mockSuperheroSystemPrompt } from '../../mock/system_prompt';
+import type { Prompt } from '../types';
+
+describe('helpers', () => {
+  describe('getPromptById', () => {
+    const prompts: Prompt[] = [mockSystemPrompt, mockSuperheroSystemPrompt];
+
+    it('returns the correct prompt by id', () => {
+      const result = getPromptById({ prompts, id: mockSuperheroSystemPrompt.id });
+
+      expect(result).toEqual(prompts[1]);
+    });
+
+    it('returns undefined if the prompt is not found', () => {
+      const result = getPromptById({ prompts, id: 'does-not-exist' });
+
+      expect(result).toBeUndefined();
+    });
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/helpers.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/helpers.tsx
new file mode 100644
index 0000000000000..7b3e91147635f
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/helpers.tsx
@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { Prompt } from '../types';
+
+export const getPromptById = ({
+  prompts,
+  id,
+}: {
+  prompts: Prompt[];
+  id: string;
+}): Prompt | undefined => prompts.find((p) => p.id === id);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.test.tsx
new file mode 100644
index 0000000000000..b9e7bb513c03f
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.test.tsx
@@ -0,0 +1,108 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+
+import { mockAlertPromptContext, mockEventPromptContext } from '../../mock/prompt_context';
+import { mockSystemPrompt } from '../../mock/system_prompt';
+import { TestProviders } from '../../mock/test_providers/test_providers';
+import { PromptEditor, Props } from '.';
+
+const defaultProps: Props = {
+  isNewConversation: true,
+  promptContexts: {
+    [mockAlertPromptContext.id]: mockAlertPromptContext,
+    [mockEventPromptContext.id]: mockEventPromptContext,
+  },
+  promptTextPreview: 'Preview text',
+  selectedPromptContextIds: [],
+  selectedSystemPromptId: null,
+  setSelectedPromptContextIds: jest.fn(),
+  setSelectedSystemPromptId: jest.fn(),
+  systemPrompts: [mockSystemPrompt],
+};
+
+describe('PromptEditorComponent', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it('renders the system prompt selector when isNewConversation is true', async () => {
+    render(
+      <TestProviders>
+        <PromptEditor {...defaultProps} />
+      </TestProviders>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('selectSystemPrompt')).toBeInTheDocument();
+    });
+  });
+
+  it('does NOT render the system prompt selector when isNewConversation is false', async () => {
+    render(
+      <TestProviders>
+        <PromptEditor {...defaultProps} isNewConversation={false} />
+      </TestProviders>
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('selectSystemPrompt')).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders the selected prompt contexts', async () => {
+    const selectedPromptContextIds = [mockAlertPromptContext.id, mockEventPromptContext.id];
+
+    render(
+      <TestProviders>
+        <PromptEditor {...defaultProps} selectedPromptContextIds={selectedPromptContextIds} />
+      </TestProviders>
+    );
+
+    await waitFor(() => {
+      selectedPromptContextIds.forEach((id) =>
+        expect(screen.queryByTestId(`selectedPromptContext-${id}`)).toBeInTheDocument()
+      );
+    });
+  });
+
+  it('renders the expected preview text', async () => {
+    render(
+      <TestProviders>
+        <PromptEditor {...defaultProps} />
+      </TestProviders>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('previewText')).toHaveTextContent('Preview text');
+    });
+  });
+
+  it('renders an "editing prompt" `EuiComment` event', async () => {
+    render(
+      <TestProviders>
+        <PromptEditor {...defaultProps} />
+      </TestProviders>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('eventText')).toHaveTextContent('editing prompt');
+    });
+  });
+
+  it('renders the user avatar', async () => {
+    render(
+      <TestProviders>
+        <PromptEditor {...defaultProps} />
+      </TestProviders>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('userAvatar')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.tsx
new file mode 100644
index 0000000000000..16e62c44c3a00
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.tsx
@@ -0,0 +1,110 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiAvatar, EuiCommentList, EuiText } from '@elastic/eui';
+import React, { useMemo } from 'react';
+// eslint-disable-next-line @kbn/eslint/module_migration
+import styled from 'styled-components';
+
+import type { PromptContext } from '../prompt_context/types';
+import { SystemPrompt } from './system_prompt';
+import type { Prompt } from '../types';
+
+import * as i18n from './translations';
+import { SelectedPromptContexts } from './selected_prompt_contexts';
+
+export interface Props {
+  isNewConversation: boolean;
+  promptContexts: Record<string, PromptContext>;
+  promptTextPreview: string;
+  selectedPromptContextIds: string[];
+  selectedSystemPromptId: string | null;
+  setSelectedPromptContextIds: React.Dispatch<React.SetStateAction<string[]>>;
+  setSelectedSystemPromptId: React.Dispatch<React.SetStateAction<string | null>>;
+  systemPrompts: Prompt[];
+}
+
+const PreviewText = styled(EuiText)`
+  white-space: pre-line;
+`;
+
+const PromptEditorComponent: React.FC<Props> = ({
+  isNewConversation,
+  promptContexts,
+  promptTextPreview,
+  selectedPromptContextIds,
+  selectedSystemPromptId,
+  setSelectedPromptContextIds,
+  setSelectedSystemPromptId,
+  systemPrompts,
+}) => {
+  const commentBody = useMemo(
+    () => (
+      <>
+        {isNewConversation && (
+          <SystemPrompt
+            selectedSystemPromptId={selectedSystemPromptId}
+            setSelectedSystemPromptId={setSelectedSystemPromptId}
+            systemPrompts={systemPrompts}
+          />
+        )}
+
+        <SelectedPromptContexts
+          isNewConversation={isNewConversation}
+          promptContexts={promptContexts}
+          selectedPromptContextIds={selectedPromptContextIds}
+          setSelectedPromptContextIds={setSelectedPromptContextIds}
+        />
+
+        <PreviewText color="subdued" data-test-subj="previewText">
+          {promptTextPreview}
+        </PreviewText>
+      </>
+    ),
+    [
+      isNewConversation,
+      promptContexts,
+      promptTextPreview,
+      selectedPromptContextIds,
+      selectedSystemPromptId,
+      setSelectedPromptContextIds,
+      setSelectedSystemPromptId,
+      systemPrompts,
+    ]
+  );
+
+  const comments = useMemo(
+    () => [
+      {
+        children: commentBody,
+        event: (
+          <EuiText data-test-subj="eventText" size="xs">
+            <i>{i18n.EDITING_PROMPT}</i>
+          </EuiText>
+        ),
+        timelineAvatar: (
+          <EuiAvatar
+            data-test-subj="userAvatar"
+            name="user"
+            size="l"
+            color="subdued"
+            iconType="userAvatar"
+          />
+        ),
+        timelineAvatarAriaLabel: i18n.YOU,
+        username: i18n.YOU,
+      },
+    ],
+    [commentBody]
+  );
+
+  return <EuiCommentList aria-label={i18n.COMMENTS_LIST_ARIA_LABEL} comments={comments} />;
+};
+
+PromptEditorComponent.displayName = 'PromptEditorComponent';
+
+export const PromptEditor = React.memo(PromptEditorComponent);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.test.tsx
new file mode 100644
index 0000000000000..4ab4b708a68c8
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.test.tsx
@@ -0,0 +1,143 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { mockAlertPromptContext, mockEventPromptContext } from '../../../mock/prompt_context';
+import { TestProviders } from '../../../mock/test_providers/test_providers';
+import { Props, SelectedPromptContexts } from '.';
+
+const defaultProps: Props = {
+  isNewConversation: false,
+  promptContexts: {
+    [mockAlertPromptContext.id]: mockAlertPromptContext,
+    [mockEventPromptContext.id]: mockEventPromptContext,
+  },
+  selectedPromptContextIds: [],
+  setSelectedPromptContextIds: jest.fn(),
+};
+
+describe('SelectedPromptContexts', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it('it does NOT render the selected prompt contexts when promptContexts is empty', async () => {
+    render(
+      <TestProviders>
+        <SelectedPromptContexts {...defaultProps} promptContexts={{}} />
+      </TestProviders>
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('selectedPromptContexts')).not.toBeInTheDocument();
+    });
+  });
+
+  it('it does NOT render a spacer when isNewConversation is false and selectedPromptContextIds.length is 1', async () => {
+    render(
+      <TestProviders>
+        <SelectedPromptContexts
+          {...defaultProps}
+          isNewConversation={false} // <--
+          selectedPromptContextIds={[mockAlertPromptContext.id]} // <-- length 1
+        />
+      </TestProviders>
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('spacer')).not.toBeInTheDocument();
+    });
+  });
+
+  it('it renders a spacer when isNewConversation is true and selectedPromptContextIds.length is 1', async () => {
+    render(
+      <TestProviders>
+        <SelectedPromptContexts
+          {...defaultProps}
+          isNewConversation={true} // <--
+          selectedPromptContextIds={[mockAlertPromptContext.id]} // <-- length 1
+        />
+      </TestProviders>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('spacer')).toBeInTheDocument();
+    });
+  });
+
+  it('it renders a spacer for each selected prompt context when isNewConversation is false and selectedPromptContextIds.length is 2', async () => {
+    render(
+      <TestProviders>
+        <SelectedPromptContexts
+          {...defaultProps}
+          isNewConversation={false} // <--
+          selectedPromptContextIds={[mockAlertPromptContext.id, mockEventPromptContext.id]} // <-- length 2
+        />
+      </TestProviders>
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('spacer')).toHaveLength(2);
+    });
+  });
+
+  it('renders the selected prompt contexts', async () => {
+    const selectedPromptContextIds = [mockAlertPromptContext.id, mockEventPromptContext.id];
+
+    render(
+      <TestProviders>
+        <SelectedPromptContexts
+          {...defaultProps}
+          selectedPromptContextIds={selectedPromptContextIds}
+        />
+      </TestProviders>
+    );
+
+    await waitFor(() => {
+      selectedPromptContextIds.forEach((id) =>
+        expect(screen.getByTestId(`selectedPromptContext-${id}`)).toBeInTheDocument()
+      );
+    });
+  });
+
+  it('removes a prompt context when the remove button is clicked', async () => {
+    const setSelectedPromptContextIds = jest.fn();
+    const promptContextId = mockAlertPromptContext.id;
+
+    render(
+      <SelectedPromptContexts
+        {...defaultProps}
+        selectedPromptContextIds={[promptContextId, mockEventPromptContext.id]}
+        setSelectedPromptContextIds={setSelectedPromptContextIds}
+      />
+    );
+
+    userEvent.click(screen.getByTestId(`removePromptContext-${promptContextId}`));
+
+    await waitFor(() => {
+      expect(setSelectedPromptContextIds).toHaveBeenCalled();
+    });
+  });
+
+  it('displays the correct accordion content', async () => {
+    render(
+      <SelectedPromptContexts
+        {...defaultProps}
+        selectedPromptContextIds={[mockAlertPromptContext.id]}
+      />
+    );
+
+    userEvent.click(screen.getByText(mockAlertPromptContext.description));
+
+    const codeBlock = screen.getByTestId('promptCodeBlock');
+
+    await waitFor(() => {
+      expect(codeBlock).toHaveTextContent('alert data');
+    });
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx
new file mode 100644
index 0000000000000..eca303284d1a8
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx
@@ -0,0 +1,121 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  EuiAccordion,
+  EuiButtonIcon,
+  EuiCodeBlock,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiToolTip,
+} from '@elastic/eui';
+import { isEmpty } from 'lodash/fp';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+// eslint-disable-next-line @kbn/eslint/module_migration
+import styled from 'styled-components';
+
+import { SYSTEM_PROMPT_CONTEXT_NON_I18N } from '../../../content/prompts/system/translations';
+import type { PromptContext } from '../../prompt_context/types';
+import * as i18n from './translations';
+
+const PromptContextContainer = styled.div`
+  max-width: 60vw;
+  overflow-x: auto;
+`;
+
+export interface Props {
+  isNewConversation: boolean;
+  promptContexts: Record<string, PromptContext>;
+  selectedPromptContextIds: string[];
+  setSelectedPromptContextIds: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+const SelectedPromptContextsComponent: React.FC<Props> = ({
+  isNewConversation,
+  promptContexts,
+  selectedPromptContextIds,
+  setSelectedPromptContextIds,
+}) => {
+  const selectedPromptContexts = useMemo(
+    () => selectedPromptContextIds.map((id) => promptContexts[id]),
+    [promptContexts, selectedPromptContextIds]
+  );
+
+  const [accordionContent, setAccordionContent] = useState<Record<string, string>>({});
+
+  const unselectPromptContext = useCallback(
+    (unselectedId: string) => {
+      setSelectedPromptContextIds((prev) => prev.filter((id) => id !== unselectedId));
+    },
+    [setSelectedPromptContextIds]
+  );
+
+  useEffect(() => {
+    const abortController = new AbortController();
+
+    const fetchAccordionContent = async () => {
+      const newAccordionContent = await Promise.all(
+        selectedPromptContexts.map(async ({ getPromptContext, id }) => ({
+          [id]: await getPromptContext(),
+        }))
+      );
+
+      if (!abortController.signal.aborted) {
+        setAccordionContent(newAccordionContent.reduce((acc, curr) => ({ ...acc, ...curr }), {}));
+      }
+    };
+
+    fetchAccordionContent();
+
+    return () => {
+      abortController.abort();
+    };
+  }, [selectedPromptContexts]);
+
+  if (isEmpty(promptContexts)) {
+    return null;
+  }
+
+  return (
+    <EuiFlexGroup data-test-subj="selectedPromptContexts" direction="column" gutterSize="none">
+      {selectedPromptContexts.map(({ description, id }) => (
+        <EuiFlexItem data-test-subj={`selectedPromptContext-${id}`} grow={false} key={id}>
+          {isNewConversation || selectedPromptContexts.length > 1 ? (
+            <EuiSpacer data-test-subj="spacer" />
+          ) : null}
+          <EuiAccordion
+            buttonContent={description}
+            extraAction={
+              <EuiToolTip content={i18n.REMOVE_CONTEXT}>
+                <EuiButtonIcon
+                  aria-label={i18n.REMOVE_CONTEXT}
+                  data-test-subj={`removePromptContext-${id}`}
+                  iconType="cross"
+                  onClick={() => unselectPromptContext(id)}
+                />
+              </EuiToolTip>
+            }
+            id={id}
+            paddingSize="s"
+          >
+            <PromptContextContainer>
+              <EuiCodeBlock data-test-subj="promptCodeBlock" isCopyable>
+                {id != null && accordionContent[id] != null
+                  ? SYSTEM_PROMPT_CONTEXT_NON_I18N(accordionContent[id])
+                  : ''}
+              </EuiCodeBlock>
+            </PromptContextContainer>
+          </EuiAccordion>
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+};
+
+SelectedPromptContextsComponent.displayName = 'SelectedPromptContextsComponent';
+export const SelectedPromptContexts = React.memo(SelectedPromptContextsComponent);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/translations.ts
new file mode 100644
index 0000000000000..2905e2a40dc6c
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/translations.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const REMOVE_CONTEXT = i18n.translate(
+  'xpack.elasticAssistant.assistant.promptEditor.selectedPromotContexts.removeContextTooltip',
+  {
+    defaultMessage: 'Remove context',
+  }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.test.tsx
new file mode 100644
index 0000000000000..a3292cb9b269c
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.test.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { mockSuperheroSystemPrompt, mockSystemPrompt } from '../../../mock/system_prompt';
+import { TestProviders } from '../../../mock/test_providers/test_providers';
+
+import { getOptions, getOptionFromPrompt } from './helpers';
+
+describe('helpers', () => {
+  describe('getOptionFromPrompt', () => {
+    it('returns an EuiSuperSelectOption with the correct value', () => {
+      const option = getOptionFromPrompt(mockSystemPrompt);
+
+      expect(option.value).toBe(mockSystemPrompt.id);
+    });
+
+    it('returns an EuiSuperSelectOption with the correct inputDisplay', () => {
+      const option = getOptionFromPrompt(mockSystemPrompt);
+
+      render(<>{option.inputDisplay}</>);
+
+      expect(screen.getByTestId('inputDisplay')).toHaveTextContent(mockSystemPrompt.content);
+    });
+
+    it('shows the expected name in the dropdownDisplay', () => {
+      const option = getOptionFromPrompt(mockSystemPrompt);
+
+      render(<TestProviders>{option.dropdownDisplay}</TestProviders>);
+
+      expect(screen.getByTestId('name')).toHaveTextContent(mockSystemPrompt.name);
+    });
+
+    it('shows the expected prompt content in the dropdownDisplay', () => {
+      const option = getOptionFromPrompt(mockSystemPrompt);
+
+      render(<TestProviders>{option.dropdownDisplay}</TestProviders>);
+
+      expect(screen.getByTestId('content')).toHaveTextContent(mockSystemPrompt.content);
+    });
+  });
+
+  describe('getOptions', () => {
+    it('should return an array of EuiSuperSelectOption with the correct values', () => {
+      const prompts = [mockSystemPrompt, mockSuperheroSystemPrompt];
+      const promptIds = prompts.map(({ id }) => id);
+
+      const options = getOptions(prompts);
+      const optionValues = options.map(({ value }) => value);
+
+      expect(optionValues).toEqual(promptIds);
+    });
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx
new file mode 100644
index 0000000000000..9d81bd4d413d2
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiText, EuiToolTip } from '@elastic/eui';
+import type { EuiSuperSelectOption } from '@elastic/eui';
+import React from 'react';
+// eslint-disable-next-line @kbn/eslint/module_migration
+import styled from 'styled-components';
+
+import { css } from '@emotion/react';
+import type { Prompt } from '../../types';
+
+const Strong = styled.strong`
+  margin-right: ${({ theme }) => theme.eui.euiSizeS};
+`;
+
+export const getOptionFromPrompt = ({
+  content,
+  id,
+  name,
+}: Prompt): EuiSuperSelectOption<string> => ({
+  value: id,
+  inputDisplay: (
+    <EuiText
+      css={css`
+        overflow: hidden;
+      `}
+      color="subdued"
+      data-test-subj="inputDisplay"
+    >
+      {content}
+    </EuiText>
+  ),
+  dropdownDisplay: (
+    <>
+      <Strong data-test-subj="name">{name}</Strong>
+
+      <EuiToolTip content={content}>
+        <EuiText color="subdued" data-test-subj="content" size="s">
+          <p>{content}</p>
+        </EuiText>
+      </EuiToolTip>
+    </>
+  ),
+});
+
+export const getOptions = (prompts: Prompt[]): Array<EuiSuperSelectOption<string>> =>
+  prompts.map(getOptionFromPrompt);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.test.tsx
new file mode 100644
index 0000000000000..6610ba836de70
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.test.tsx
@@ -0,0 +1,121 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { mockSystemPrompt, mockSuperheroSystemPrompt } from '../../../mock/system_prompt';
+import { SystemPrompt } from '.';
+
+describe('SystemPrompt', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  describe('when selectedSystemPromptId is null', () => {
+    const selectedSystemPromptId = null;
+
+    beforeEach(() => {
+      render(
+        <SystemPrompt
+          selectedSystemPromptId={selectedSystemPromptId}
+          setSelectedSystemPromptId={jest.fn()}
+          systemPrompts={[mockSystemPrompt]}
+        />
+      );
+    });
+
+    it('renders the system prompt select', () => {
+      expect(screen.getByTestId('selectSystemPrompt')).toBeInTheDocument();
+    });
+
+    it('does NOT render the system prompt text', () => {
+      expect(screen.queryByTestId('systemPromptText')).not.toBeInTheDocument();
+    });
+
+    it('does NOT render the edit button', () => {
+      expect(screen.queryByTestId('edit')).not.toBeInTheDocument();
+    });
+
+    it('does NOT render the clear button', () => {
+      expect(screen.queryByTestId('clear')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when selectedSystemPromptId is NOT null', () => {
+    const selectedSystemPromptId = mockSystemPrompt.id;
+
+    beforeEach(() => {
+      render(
+        <SystemPrompt
+          selectedSystemPromptId={selectedSystemPromptId}
+          setSelectedSystemPromptId={jest.fn()}
+          systemPrompts={[mockSystemPrompt]}
+        />
+      );
+    });
+
+    it('does NOT render the system prompt select', () => {
+      expect(screen.queryByTestId('selectSystemPrompt')).not.toBeInTheDocument();
+    });
+
+    it('renders the system prompt text', () => {
+      expect(screen.getByTestId('systemPromptText')).toHaveTextContent(mockSystemPrompt.content);
+    });
+
+    it('renders the edit button', () => {
+      expect(screen.getByTestId('edit')).toBeInTheDocument();
+    });
+
+    it('renders the clear button', () => {
+      expect(screen.getByTestId('clear')).toBeInTheDocument();
+    });
+  });
+
+  it('shows the system prompt select when the edit button is clicked', () => {
+    render(
+      <SystemPrompt
+        selectedSystemPromptId={mockSystemPrompt.id}
+        setSelectedSystemPromptId={jest.fn()}
+        systemPrompts={[mockSystemPrompt, mockSuperheroSystemPrompt]}
+      />
+    );
+
+    userEvent.click(screen.getByTestId('edit'));
+
+    expect(screen.getByTestId('selectSystemPrompt')).toBeInTheDocument();
+  });
+
+  it('clears the selected system prompt when the clear button is clicked', () => {
+    const setSelectedSystemPromptId = jest.fn();
+
+    render(
+      <SystemPrompt
+        selectedSystemPromptId={mockSystemPrompt.id}
+        setSelectedSystemPromptId={setSelectedSystemPromptId}
+        systemPrompts={[mockSystemPrompt, mockSuperheroSystemPrompt]}
+      />
+    );
+
+    userEvent.click(screen.getByTestId('clear'));
+
+    expect(setSelectedSystemPromptId).toHaveBeenCalledWith(null);
+  });
+
+  it('shows the system prompt select when system prompt text is clicked', () => {
+    render(
+      <SystemPrompt
+        selectedSystemPromptId={mockSystemPrompt.id}
+        setSelectedSystemPromptId={jest.fn()}
+        systemPrompts={[mockSystemPrompt, mockSuperheroSystemPrompt]}
+      />
+    );
+
+    fireEvent.click(screen.getByTestId('systemPromptText'));
+
+    expect(screen.getByTestId('selectSystemPrompt')).toBeInTheDocument();
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.tsx
new file mode 100644
index 0000000000000..fbe83ce2c94e7
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.tsx
@@ -0,0 +1,101 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
+import React, { useCallback, useMemo } from 'react';
+// eslint-disable-next-line @kbn/eslint/module_migration
+import styled from 'styled-components';
+
+import { getPromptById } from '../helpers';
+import * as i18n from './translations';
+import type { Prompt } from '../../types';
+import { SelectSystemPrompt } from './select_system_prompt';
+
+const SystemPromptText = styled(EuiText)`
+  white-space: pre-line;
+`;
+
+interface Props {
+  selectedSystemPromptId: string | null;
+  setSelectedSystemPromptId: React.Dispatch<React.SetStateAction<string | null>>;
+  systemPrompts: Prompt[];
+}
+
+const SystemPromptComponent: React.FC<Props> = ({
+  selectedSystemPromptId,
+  setSelectedSystemPromptId,
+  systemPrompts,
+}) => {
+  const [showSelectSystemPrompt, setShowSelectSystemPrompt] = React.useState<boolean>(false);
+
+  const selectedPrompt: Prompt | undefined = useMemo(
+    () => getPromptById({ prompts: systemPrompts, id: selectedSystemPromptId ?? '' }),
+    [systemPrompts, selectedSystemPromptId]
+  );
+
+  const clearSystemPrompt = useCallback(() => {
+    setSelectedSystemPromptId(null);
+    setShowSelectSystemPrompt(false);
+  }, [setSelectedSystemPromptId]);
+
+  const onShowSelectSystemPrompt = useCallback(() => setShowSelectSystemPrompt(true), []);
+
+  return (
+    <div data-test-subj="systemPrompt">
+      {selectedPrompt == null || showSelectSystemPrompt ? (
+        <SelectSystemPrompt
+          selectedPrompt={selectedPrompt}
+          setSelectedSystemPromptId={setSelectedSystemPromptId}
+          setShowSelectSystemPrompt={setShowSelectSystemPrompt}
+          showSelectSystemPrompt={showSelectSystemPrompt}
+          systemPrompts={systemPrompts}
+        />
+      ) : (
+        <EuiFlexGroup alignItems="flexStart" gutterSize="none">
+          <EuiFlexItem grow>
+            <SystemPromptText
+              color="subdued"
+              data-test-subj="systemPromptText"
+              onClick={onShowSelectSystemPrompt}
+            >
+              {selectedPrompt?.content ?? ''}
+            </SystemPromptText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize="none">
+              <EuiFlexItem grow={false}>
+                <EuiToolTip content={i18n.SELECT_A_SYSTEM_PROMPT}>
+                  <EuiButtonIcon
+                    aria-label={i18n.SELECT_A_SYSTEM_PROMPT}
+                    data-test-subj="edit"
+                    iconType="documentEdit"
+                    onClick={onShowSelectSystemPrompt}
+                  />
+                </EuiToolTip>
+              </EuiFlexItem>
+
+              <EuiFlexItem grow={false}>
+                <EuiToolTip content={i18n.CLEAR_SYSTEM_PROMPT}>
+                  <EuiButtonIcon
+                    aria-label={i18n.CLEAR_SYSTEM_PROMPT}
+                    data-test-subj="clear"
+                    iconType="cross"
+                    onClick={clearSystemPrompt}
+                  />
+                </EuiToolTip>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+    </div>
+  );
+};
+
+SystemPromptComponent.displayName = 'SystemPromptComponent';
+
+export const SystemPrompt = React.memo(SystemPromptComponent);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.test.tsx
new file mode 100644
index 0000000000000..affd07e26eb68
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.test.tsx
@@ -0,0 +1,117 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { mockSystemPrompt, mockSuperheroSystemPrompt } from '../../../../mock/system_prompt';
+import { Props, SelectSystemPrompt } from '.';
+
+const props: Props = {
+  selectedPrompt: undefined,
+  setSelectedSystemPromptId: jest.fn(),
+  setShowSelectSystemPrompt: jest.fn(),
+  showSelectSystemPrompt: false,
+  systemPrompts: [mockSystemPrompt, mockSuperheroSystemPrompt],
+};
+
+describe('SelectSystemPrompt', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it('renders the prompt super select when showSelectSystemPrompt is true', () => {
+    const { getByTestId } = render(<SelectSystemPrompt {...props} showSelectSystemPrompt={true} />);
+
+    expect(getByTestId('promptSuperSelect')).toBeInTheDocument();
+  });
+
+  it('does NOT render the prompt super select when showSelectSystemPrompt is false', () => {
+    const { queryByTestId } = render(
+      <SelectSystemPrompt {...props} showSelectSystemPrompt={false} />
+    );
+
+    expect(queryByTestId('promptSuperSelect')).not.toBeInTheDocument();
+  });
+
+  it('renders the clear system prompt button when showSelectSystemPrompt is true', () => {
+    const { getByTestId } = render(<SelectSystemPrompt {...props} showSelectSystemPrompt={true} />);
+
+    expect(getByTestId('clearSystemPrompt')).toBeInTheDocument();
+  });
+
+  it('does NOT render the clear system prompt button when showSelectSystemPrompt is false', () => {
+    const { queryByTestId } = render(
+      <SelectSystemPrompt {...props} showSelectSystemPrompt={false} />
+    );
+
+    expect(queryByTestId('clearSystemPrompt')).not.toBeInTheDocument();
+  });
+
+  it('renders the add system prompt button when showSelectSystemPrompt is false', () => {
+    const { getByTestId } = render(
+      <SelectSystemPrompt {...props} showSelectSystemPrompt={false} />
+    );
+
+    expect(getByTestId('addSystemPrompt')).toBeInTheDocument();
+  });
+
+  it('does NOT render the add system prompt button when showSelectSystemPrompt is true', () => {
+    const { queryByTestId } = render(
+      <SelectSystemPrompt {...props} showSelectSystemPrompt={true} />
+    );
+
+    expect(queryByTestId('addSystemPrompt')).not.toBeInTheDocument();
+  });
+
+  it('clears the selected system prompt id when the clear button is clicked', () => {
+    const setSelectedSystemPromptId = jest.fn();
+
+    const { getByTestId } = render(
+      <SelectSystemPrompt
+        {...props}
+        setSelectedSystemPromptId={setSelectedSystemPromptId}
+        showSelectSystemPrompt={true}
+      />
+    );
+
+    userEvent.click(getByTestId('clearSystemPrompt'));
+
+    expect(setSelectedSystemPromptId).toHaveBeenCalledWith(null);
+  });
+
+  it('hides the select when the clear button is clicked', () => {
+    const setShowSelectSystemPrompt = jest.fn();
+
+    const { getByTestId } = render(
+      <SelectSystemPrompt
+        {...props}
+        setShowSelectSystemPrompt={setShowSelectSystemPrompt}
+        showSelectSystemPrompt={true}
+      />
+    );
+
+    userEvent.click(getByTestId('clearSystemPrompt'));
+
+    expect(setShowSelectSystemPrompt).toHaveBeenCalledWith(false);
+  });
+
+  it('shows the select when the add button is clicked', () => {
+    const setShowSelectSystemPrompt = jest.fn();
+
+    const { getByTestId } = render(
+      <SelectSystemPrompt
+        {...props}
+        setShowSelectSystemPrompt={setShowSelectSystemPrompt}
+        showSelectSystemPrompt={false}
+      />
+    );
+
+    userEvent.click(getByTestId('addSystemPrompt'));
+
+    expect(setShowSelectSystemPrompt).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx
new file mode 100644
index 0000000000000..180f7202c2d2b
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx
@@ -0,0 +1,108 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { css } from '@emotion/react';
+import {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiSuperSelect,
+  EuiToolTip,
+} from '@elastic/eui';
+import React, { useCallback, useMemo } from 'react';
+
+import { getOptions } from '../helpers';
+import * as i18n from '../translations';
+import type { Prompt } from '../../../types';
+
+export interface Props {
+  selectedPrompt: Prompt | undefined;
+  setSelectedSystemPromptId: React.Dispatch<React.SetStateAction<string | null>>;
+  setShowSelectSystemPrompt: React.Dispatch<React.SetStateAction<boolean>>;
+  showSelectSystemPrompt: boolean;
+  systemPrompts: Prompt[];
+}
+
+const SelectSystemPromptComponent: React.FC<Props> = ({
+  selectedPrompt,
+  setSelectedSystemPromptId,
+  setShowSelectSystemPrompt,
+  showSelectSystemPrompt,
+  systemPrompts,
+}) => {
+  const options = useMemo(() => getOptions(systemPrompts), [systemPrompts]);
+
+  const onChange = useCallback(
+    (value) => {
+      setSelectedSystemPromptId(value);
+      setShowSelectSystemPrompt(false);
+    },
+    [setSelectedSystemPromptId, setShowSelectSystemPrompt]
+  );
+
+  const clearSystemPrompt = useCallback(() => {
+    setSelectedSystemPromptId(null);
+    setShowSelectSystemPrompt(false);
+  }, [setSelectedSystemPromptId, setShowSelectSystemPrompt]);
+
+  const onShowSelectSystemPrompt = useCallback(
+    () => setShowSelectSystemPrompt(true),
+    [setShowSelectSystemPrompt]
+  );
+
+  return (
+    <EuiFlexGroup data-test-subj="selectSystemPrompt" gutterSize="none">
+      <EuiFlexItem>
+        {showSelectSystemPrompt && (
+          <EuiFormRow
+            css={css`
+              min-width: 100%;
+            `}
+          >
+            <EuiSuperSelect
+              data-test-subj="promptSuperSelect"
+              fullWidth={true}
+              hasDividers
+              itemLayoutAlign="top"
+              onChange={onChange}
+              options={options}
+              placeholder={i18n.SELECT_A_SYSTEM_PROMPT}
+              valueOfSelected={selectedPrompt?.id}
+            />
+          </EuiFormRow>
+        )}
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        {showSelectSystemPrompt ? (
+          <EuiToolTip content={i18n.CLEAR_SYSTEM_PROMPT}>
+            <EuiButtonIcon
+              aria-label={i18n.CLEAR_SYSTEM_PROMPT}
+              data-test-subj="clearSystemPrompt"
+              iconType="cross"
+              onClick={clearSystemPrompt}
+            />
+          </EuiToolTip>
+        ) : (
+          <EuiToolTip content={i18n.ADD_SYSTEM_PROMPT_TOOLTIP}>
+            <EuiButtonIcon
+              aria-label={i18n.ADD_SYSTEM_PROMPT_TOOLTIP}
+              data-test-subj="addSystemPrompt"
+              iconType="plus"
+              onClick={onShowSelectSystemPrompt}
+            />
+          </EuiToolTip>
+        )}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+SelectSystemPromptComponent.displayName = 'SelectSystemPromptComponent';
+
+export const SelectSystemPrompt = React.memo(SelectSystemPromptComponent);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/translations.ts
new file mode 100644
index 0000000000000..075e017bc56f0
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/translations.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const ADD_SYSTEM_PROMPT_TOOLTIP = i18n.translate(
+  'xpack.elasticAssistant.assistant.firstPromptEditor.addSystemPromptTooltip',
+  {
+    defaultMessage: 'Add system prompt',
+  }
+);
+
+export const CLEAR_SYSTEM_PROMPT = i18n.translate(
+  'xpack.elasticAssistant.assistant.firstPromptEditor.clearSystemPrompt',
+  {
+    defaultMessage: 'Clear system prompt',
+  }
+);
+
+export const SELECT_A_SYSTEM_PROMPT = i18n.translate(
+  'xpack.elasticAssistant.assistant.firstPromptEditor.selectASystemPromptPlaceholder',
+  {
+    defaultMessage: 'Select a system prompt',
+  }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/translations.ts
new file mode 100644
index 0000000000000..567754482bfb3
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/translations.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const COMMENTS_LIST_ARIA_LABEL = i18n.translate(
+  'xpack.elasticAssistant.assistant.firstPromptEditor.commentsListAriaLabel',
+  {
+    defaultMessage: 'List of comments',
+  }
+);
+
+export const EDITING_PROMPT = i18n.translate(
+  'xpack.elasticAssistant.assistant.firstPromptEditor.editingPromptLabel',
+  {
+    defaultMessage: 'editing prompt',
+  }
+);
+
+export const YOU = i18n.translate('xpack.elasticAssistant.assistant.firstPromptEditor.youLabel', {
+  defaultMessage: 'You',
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_textarea/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_textarea/index.tsx
new file mode 100644
index 0000000000000..9d322c1b4c1f6
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_textarea/index.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiTextArea } from '@elastic/eui';
+import React, { useCallback, useEffect, forwardRef } from 'react';
+
+// eslint-disable-next-line @kbn/eslint/module_migration
+import styled from 'styled-components';
+import * as i18n from './translations';
+
+export interface Props extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  handlePromptChange?: (value: string) => void;
+  isDisabled?: boolean;
+  onPromptSubmit: (value: string) => void;
+  value: string;
+}
+
+const StyledTextArea = styled(EuiTextArea)`
+  min-height: 125px;
+  padding-right: 42px;
+`;
+
+export const PromptTextArea = forwardRef<HTMLTextAreaElement, Props>(
+  ({ isDisabled = false, value, onPromptSubmit, handlePromptChange, ...props }, ref) => {
+    const [currentValue, setCurrentValue] = React.useState(value);
+
+    const onChangeCallback = useCallback(
+      (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setCurrentValue(event.target.value);
+        if (handlePromptChange) {
+          handlePromptChange(event.target.value);
+        }
+      },
+      [handlePromptChange]
+    );
+
+    const onKeyDown = useCallback(
+      (event) => {
+        if (event.key === 'Enter' && !event.shiftKey && currentValue.trim().length > 0) {
+          event.preventDefault();
+          onPromptSubmit(event.target.value?.trim());
+          setCurrentValue('');
+        } else if (event.key === 'Enter' && !event.shiftKey && currentValue.trim().length === 0) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
+      [currentValue, onPromptSubmit]
+    );
+
+    useEffect(() => {
+      setCurrentValue(value);
+    }, [value]);
+
+    return (
+      <StyledTextArea
+        className="eui-scrollBar"
+        inputRef={ref}
+        id={'prompt-textarea'}
+        data-test-subj={'prompt-textarea'}
+        fullWidth
+        autoFocus
+        disabled={isDisabled}
+        placeholder={i18n.PROMPT_PLACEHOLDER}
+        value={currentValue}
+        onChange={onChangeCallback}
+        onKeyDown={onKeyDown}
+      />
+    );
+  }
+);
+PromptTextArea.displayName = 'PromptTextArea';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_textarea/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_textarea/translations.ts
new file mode 100644
index 0000000000000..1450daa426f3c
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_textarea/translations.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const PROMPT_PLACEHOLDER = i18n.translate(
+  'xpack.elasticAssistant.assistant.promptPlaceholder',
+  {
+    defaultMessage: "Ask me anything from 'summarize this alert' to 'help me build a query...'",
+  }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/add_quick_prompt_modal/add_quick_prompt_modal.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/add_quick_prompt_modal/add_quick_prompt_modal.tsx
new file mode 100644
index 0000000000000..99fa4ed8bc96c
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/add_quick_prompt_modal/add_quick_prompt_modal.tsx
@@ -0,0 +1,225 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFormRow,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiColorPicker,
+  useColorPickerState,
+  EuiTextArea,
+} from '@elastic/eui';
+
+// eslint-disable-next-line @kbn/eslint/module_migration
+import styled from 'styled-components';
+
+import { EuiSetColorMethod } from '@elastic/eui/src/services/color_picker/color_picker';
+import { PromptContextTemplate } from '../../../..';
+import * as i18n from './translations';
+import { QuickPrompt } from '../types';
+import { QuickPromptSelector } from '../quick_prompt_selector/quick_prompt_selector';
+import { PromptContextSelector } from '../prompt_context_selector/prompt_context_selector';
+
+const StyledEuiModal = styled(EuiModal)``;
+
+const DEFAULT_COLOR = '#D36086';
+
+interface Props {
+  promptContexts: PromptContextTemplate[];
+  quickPrompts: QuickPrompt[];
+  onQuickPromptsChange: (quickPrompts: QuickPrompt[]) => void;
+}
+
+/**
+ * Modal for adding/removing quick prompts. Configure name, color, prompt and category.
+ */
+export const AddQuickPromptModal: React.FC<Props> = React.memo(
+  ({ promptContexts, quickPrompts, onQuickPromptsChange }) => {
+    const [isModalVisible, setIsModalVisible] = useState(false);
+
+    // Local state for quick prompts (returned to parent on save via onQuickPromptsChange())
+    const [updatedQuickPrompts, setUpdatedQuickPrompts] = useState<QuickPrompt[]>(quickPrompts);
+
+    // Form options
+    const [selectedQuickPrompt, setSelectedQuickPrompt] = useState<QuickPrompt>();
+    // Prompt
+    const [prompt, setPrompt] = useState('');
+    const handlePromptTextChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setPrompt(e.target.value);
+    }, []);
+    // Color
+    const [color, setColor, errors] = useColorPickerState(DEFAULT_COLOR);
+    const handleColorChange = useCallback<EuiSetColorMethod>(
+      (text, { hex, isValid }) => {
+        if (selectedQuickPrompt != null) {
+          setSelectedQuickPrompt({
+            ...selectedQuickPrompt,
+            color: text,
+          });
+        }
+        setColor(text, { hex, isValid });
+      },
+      [selectedQuickPrompt, setColor]
+    );
+    // Prompt Contexts/Categories
+    const [selectedPromptContexts, setSelectedPromptContexts] = useState<PromptContextTemplate[]>(
+      []
+    );
+    const onPromptContextSelectionChange = useCallback((pc: PromptContextTemplate[]) => {
+      setSelectedPromptContexts(pc);
+    }, []);
+
+    // When top level quick prompt selection changes
+    const onQuickPromptSelectionChange = useCallback(
+      (quickPrompt?: QuickPrompt | string) => {
+        const newQuickPrompt: QuickPrompt | undefined =
+          typeof quickPrompt === 'string'
+            ? {
+                title: quickPrompt ?? '',
+                prompt: '',
+                color: DEFAULT_COLOR,
+                categories: [],
+              }
+            : quickPrompt;
+
+        setSelectedQuickPrompt(newQuickPrompt);
+        setPrompt(newQuickPrompt?.prompt ?? '');
+        setColor(newQuickPrompt?.color ?? DEFAULT_COLOR, {
+          hex: newQuickPrompt?.color ?? DEFAULT_COLOR,
+          isValid: true,
+        });
+        // Map back to PromptContextTemplate's from QuickPrompt.categories
+        setSelectedPromptContexts(
+          promptContexts.filter((bpc) =>
+            newQuickPrompt?.categories?.some((cat) => bpc?.category === cat)
+          ) ?? []
+        );
+      },
+      [promptContexts, setColor]
+    );
+
+    const onQuickPromptDeleted = useCallback((title: string) => {
+      setUpdatedQuickPrompts((prev) => prev.filter((qp) => qp.title !== title));
+    }, []);
+
+    // Modal control functions
+    const cleanupAndCloseModal = useCallback(() => {
+      setIsModalVisible(false);
+    }, []);
+
+    const handleCloseModal = useCallback(() => {
+      cleanupAndCloseModal();
+    }, [cleanupAndCloseModal]);
+
+    const handleSave = useCallback(() => {
+      onQuickPromptsChange(updatedQuickPrompts);
+      cleanupAndCloseModal();
+    }, [cleanupAndCloseModal, onQuickPromptsChange, updatedQuickPrompts]);
+
+    // useEffects
+    // Update quick prompts on any field change since editing is in place
+    useEffect(() => {
+      if (selectedQuickPrompt != null) {
+        setUpdatedQuickPrompts((prev) => {
+          const alreadyExists = prev.some((qp) => qp.title === selectedQuickPrompt.title);
+          if (alreadyExists) {
+            return prev.map((qp) => {
+              const categories = selectedPromptContexts.map((pc) => pc.category);
+              if (qp.title === selectedQuickPrompt.title) {
+                return {
+                  ...qp,
+                  color,
+                  prompt,
+                  categories,
+                };
+              }
+              return qp;
+            });
+          } else {
+            return [
+              ...prev,
+              {
+                ...selectedQuickPrompt,
+                color,
+                prompt,
+                categories: selectedPromptContexts.map((pc) => pc.category),
+              },
+            ];
+          }
+        });
+      }
+    }, [color, prompt, selectedPromptContexts, selectedQuickPrompt]);
+
+    // Reset local state on modal open
+    useEffect(() => {
+      if (isModalVisible) {
+        setUpdatedQuickPrompts(quickPrompts);
+      }
+    }, [isModalVisible, quickPrompts]);
+
+    return (
+      <>
+        <EuiButtonEmpty onClick={() => setIsModalVisible(true)} iconType="plus" size="xs">
+          {i18n.ADD_QUICK_PROMPT}
+        </EuiButtonEmpty>
+        {isModalVisible && (
+          <StyledEuiModal onClose={handleCloseModal} initialFocus=".quickPromptSelector">
+            <EuiModalHeader>
+              <EuiModalHeaderTitle>{i18n.ADD_QUICK_PROMPT_MODAL_TITLE}</EuiModalHeaderTitle>
+            </EuiModalHeader>
+
+            <EuiModalBody>
+              <EuiFormRow label={i18n.QUICK_PROMPT_NAME}>
+                <QuickPromptSelector
+                  onQuickPromptDeleted={onQuickPromptDeleted}
+                  onQuickPromptSelectionChange={onQuickPromptSelectionChange}
+                  quickPrompts={updatedQuickPrompts}
+                  selectedQuickPrompt={selectedQuickPrompt}
+                />
+              </EuiFormRow>
+
+              <EuiFormRow label={i18n.QUICK_PROMPT_PROMPT} fullWidth>
+                <EuiTextArea onChange={handlePromptTextChange} value={prompt} />
+              </EuiFormRow>
+
+              <EuiFormRow label={i18n.QUICK_PROMPT_BADGE_COLOR} isInvalid={!!errors} error={errors}>
+                <EuiColorPicker onChange={handleColorChange} color={color} isInvalid={!!errors} />
+              </EuiFormRow>
+
+              <EuiFormRow
+                label={i18n.QUICK_PROMPT_CATEGORIES}
+                helpText={i18n.QUICK_PROMPT_CATEGORIES_HELP_TEXT}
+              >
+                <PromptContextSelector
+                  onPromptContextSelectionChange={onPromptContextSelectionChange}
+                  promptContexts={promptContexts}
+                  selectedPromptContexts={selectedPromptContexts}
+                />
+              </EuiFormRow>
+            </EuiModalBody>
+
+            <EuiModalFooter>
+              <EuiButtonEmpty onClick={handleCloseModal}>{i18n.CANCEL}</EuiButtonEmpty>
+
+              <EuiButton type="submit" onClick={handleSave} fill>
+                {i18n.SAVE}
+              </EuiButton>
+            </EuiModalFooter>
+          </StyledEuiModal>
+        )}
+      </>
+    );
+  }
+);
+
+AddQuickPromptModal.displayName = 'AddQuickPromptModal';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/add_quick_prompt_modal/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/add_quick_prompt_modal/translations.ts
new file mode 100644
index 0000000000000..5e0c7112dea8f
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/add_quick_prompt_modal/translations.ts
@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const ADD_QUICK_PROMPT = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.addQuickPromptModal.addQuickPromptTitle',
+  {
+    defaultMessage: 'Add quick prompt...',
+  }
+);
+export const ADD_QUICK_PROMPT_MODAL_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.addQuickPromptModal.modalTitle',
+  {
+    defaultMessage: 'Add/Modify Quick Prompt',
+  }
+);
+
+export const QUICK_PROMPT_NAME = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.addQuickPromptModal.nameLabel',
+  {
+    defaultMessage: 'Name',
+  }
+);
+
+export const QUICK_PROMPT_PROMPT = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.addQuickPromptModal.promptLabel',
+  {
+    defaultMessage: 'Prompt',
+  }
+);
+
+export const QUICK_PROMPT_BADGE_COLOR = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.addQuickPromptModal.badgeColorLabel',
+  {
+    defaultMessage: 'Badge color',
+  }
+);
+
+export const QUICK_PROMPT_CATEGORIES = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.addQuickPromptModal.categoriesLabel',
+  {
+    defaultMessage: 'Categories',
+  }
+);
+
+export const QUICK_PROMPT_CATEGORIES_HELP_TEXT = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.addQuickPromptModal.categoriesHelpText',
+  {
+    defaultMessage:
+      'Select the Prompt Contexts that this Quick Prompt will be available for. Selecting none will make this Quick Prompt available at all times.',
+  }
+);
+
+export const CANCEL = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.modalCancelButtonTitle',
+  {
+    defaultMessage: 'Cancel',
+  }
+);
+
+export const SAVE = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.modalSaveButtonTitle',
+  {
+    defaultMessage: 'Save',
+  }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/prompt_context_selector/prompt_context_selector.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/prompt_context_selector/prompt_context_selector.tsx
new file mode 100644
index 0000000000000..760bfc3c5e30d
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/prompt_context_selector/prompt_context_selector.tsx
@@ -0,0 +1,99 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { EuiComboBox, EuiComboBoxOptionOption, EuiHighlight } from '@elastic/eui';
+
+import { PromptContextTemplate } from '../../../..';
+import * as i18n from './translations';
+
+interface Props {
+  onPromptContextSelectionChange: (promptContexts: PromptContextTemplate[]) => void;
+  promptContexts: PromptContextTemplate[];
+  selectedPromptContexts?: PromptContextTemplate[];
+}
+
+export type PromptContextSelectorOption = EuiComboBoxOptionOption<{ category: string }>;
+
+/**
+ * Selector for choosing multiple Prompt Context Categories
+ */
+export const PromptContextSelector: React.FC<Props> = React.memo(
+  ({ onPromptContextSelectionChange, promptContexts, selectedPromptContexts = [] }) => {
+    // ComboBox options
+    const options = useMemo<PromptContextSelectorOption[]>(
+      () =>
+        promptContexts.map((pc) => ({
+          value: {
+            category: pc.category,
+          },
+          label: pc.description,
+        })),
+      [promptContexts]
+    );
+    const selectedOptions = useMemo<PromptContextSelectorOption[]>(() => {
+      return selectedPromptContexts != null
+        ? selectedPromptContexts.map((pc) => ({
+            value: {
+              category: pc.category,
+            },
+            label: pc.description,
+          }))
+        : [];
+    }, [selectedPromptContexts]);
+
+    const handleSelectionChange = useCallback(
+      (promptContextSelectorOption: PromptContextSelectorOption[]) => {
+        const newPromptSelection = promptContexts.filter((pc) =>
+          promptContextSelectorOption.some((qpso) => pc.description === qpso.label)
+        );
+        onPromptContextSelectionChange(newPromptSelection);
+      },
+      [onPromptContextSelectionChange, promptContexts]
+    );
+
+    // Callback for when user selects a prompt context
+    const onChange = useCallback(
+      (newOptions: PromptContextSelectorOption[]) => {
+        if (newOptions.length === 0) {
+          handleSelectionChange([]);
+        } else if (options.findIndex((o) => o.label === newOptions?.[0].label) !== -1) {
+          handleSelectionChange(newOptions);
+        }
+      },
+      [handleSelectionChange, options]
+    );
+
+    const renderOption: (
+      option: PromptContextSelectorOption,
+      searchValue: string,
+      OPTION_CONTENT_CLASSNAME: string
+    ) => React.ReactNode = (option, searchValue, contentClassName) => {
+      const { label, value } = option;
+      return (
+        <span className={contentClassName}>
+          <EuiHighlight search={searchValue}>{label}</EuiHighlight>
+          &nbsp;
+          <span>{`(${value?.category})`}</span>
+        </span>
+      );
+    };
+
+    return (
+      <EuiComboBox
+        aria-label={i18n.PROMPT_CONTEXT_SELECTOR}
+        placeholder={i18n.PROMPT_CONTEXT_SELECTOR_PLACEHOLDER}
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+        renderOption={renderOption}
+      />
+    );
+  }
+);
+
+PromptContextSelector.displayName = 'PromptContextSelector';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/prompt_context_selector/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/prompt_context_selector/translations.ts
new file mode 100644
index 0000000000000..80c837e11832f
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/prompt_context_selector/translations.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const PROMPT_CONTEXT_SELECTOR = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.promptContextSelector.ariaLabel',
+  {
+    defaultMessage: 'Select Prompt Context categories this Quick Prompt will be available for.',
+  }
+);
+
+export const PROMPT_CONTEXT_SELECTOR_PLACEHOLDER = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.promptContextSelector.placeholderLabel',
+  {
+    defaultMessage: '(Quick Prompt will always be visible).',
+  }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.tsx
new file mode 100644
index 0000000000000..2d481ad141ca4
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.tsx
@@ -0,0 +1,185 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiToolTip,
+  EuiHealth,
+  EuiHighlight,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+} from '@elastic/eui';
+
+import { css } from '@emotion/react';
+import * as i18n from './translations';
+import { QuickPrompt } from '../types';
+
+interface Props {
+  onQuickPromptDeleted: (quickPromptTitle: string) => void;
+  onQuickPromptSelectionChange: (quickPrompt?: QuickPrompt | string) => void;
+  quickPrompts: QuickPrompt[];
+  selectedQuickPrompt?: QuickPrompt;
+}
+
+export type QuickPromptSelectorOption = EuiComboBoxOptionOption<{ isDefault: boolean }>;
+
+/**
+ * Selector for choosing and deleting Quick Prompts
+ */
+export const QuickPromptSelector: React.FC<Props> = React.memo(
+  ({ quickPrompts, onQuickPromptDeleted, onQuickPromptSelectionChange, selectedQuickPrompt }) => {
+    // Form options
+    const [options, setOptions] = useState<QuickPromptSelectorOption[]>(
+      quickPrompts.map((qp) => ({
+        value: {
+          isDefault: qp.isDefault ?? false,
+        },
+        label: qp.title,
+        color: qp.color,
+      }))
+    );
+    const selectedOptions = useMemo<QuickPromptSelectorOption[]>(() => {
+      return selectedQuickPrompt
+        ? [
+            {
+              value: {
+                isDefault: true,
+              },
+              label: selectedQuickPrompt.title,
+              color: selectedQuickPrompt.color,
+            },
+          ]
+        : [];
+    }, [selectedQuickPrompt]);
+
+    const handleSelectionChange = useCallback(
+      (quickPromptSelectorOption: QuickPromptSelectorOption[]) => {
+        const newQuickPrompt =
+          quickPromptSelectorOption.length === 0
+            ? undefined
+            : quickPrompts.find((qp) => qp.title === quickPromptSelectorOption[0]?.label) ??
+              quickPromptSelectorOption[0]?.label;
+        onQuickPromptSelectionChange(newQuickPrompt);
+      },
+      [onQuickPromptSelectionChange, quickPrompts]
+    );
+
+    // Callback for when user types to create a new quick prompt
+    const onCreateOption = useCallback(
+      (searchValue, flattenedOptions = []) => {
+        if (!searchValue || !searchValue.trim().toLowerCase()) {
+          return;
+        }
+
+        const normalizedSearchValue = searchValue.trim().toLowerCase();
+        const optionExists =
+          flattenedOptions.findIndex(
+            (option: QuickPromptSelectorOption) =>
+              option.label.trim().toLowerCase() === normalizedSearchValue
+          ) === -1;
+
+        const newOption = {
+          value: searchValue,
+          label: searchValue,
+        };
+
+        if (optionExists) {
+          setOptions([...options, newOption]);
+        }
+        handleSelectionChange([newOption]);
+      },
+      [handleSelectionChange, options]
+    );
+
+    // Callback for when user selects a quick prompt
+    const onChange = useCallback(
+      (newOptions: QuickPromptSelectorOption[]) => {
+        if (newOptions.length === 0) {
+          handleSelectionChange([]);
+        } else if (options.findIndex((o) => o.label === newOptions?.[0].label) !== -1) {
+          handleSelectionChange(newOptions);
+        }
+      },
+      [handleSelectionChange, options]
+    );
+
+    // Callback for when user deletes a quick prompt
+    const onDelete = useCallback(
+      (label: string) => {
+        setOptions(options.filter((o) => o.label !== label));
+        if (selectedOptions?.[0]?.label === label) {
+          handleSelectionChange([]);
+        }
+        onQuickPromptDeleted(label);
+      },
+      [handleSelectionChange, onQuickPromptDeleted, options, selectedOptions]
+    );
+
+    const renderOption: (
+      option: QuickPromptSelectorOption,
+      searchValue: string,
+      OPTION_CONTENT_CLASSNAME: string
+    ) => React.ReactNode = (option, searchValue, contentClassName) => {
+      const { color, label, value } = option;
+      return (
+        <EuiFlexGroup
+          alignItems="center"
+          justifyContent="spaceBetween"
+          className={'parentFlexGroup'}
+        >
+          <EuiFlexItem grow={false}>
+            <EuiHealth color={color}>
+              <span className={contentClassName}>
+                <EuiHighlight search={searchValue}>{label}</EuiHighlight>
+              </span>
+            </EuiHealth>
+          </EuiFlexItem>
+          {!value?.isDefault && (
+            <EuiFlexItem grow={false}>
+              <EuiToolTip position="right" content={i18n.DELETE_QUICK_PROMPT_}>
+                <EuiButtonIcon
+                  iconType="cross"
+                  aria-label={i18n.DELETE_QUICK_PROMPT_}
+                  color="danger"
+                  onClick={(e: React.MouseEvent) => {
+                    e.stopPropagation();
+                    onDelete(label);
+                  }}
+                  css={css`
+                    visibility: hidden;
+                    .parentFlexGroup:hover & {
+                      visibility: visible;
+                    }
+                  `}
+                />
+              </EuiToolTip>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      );
+    };
+
+    return (
+      <EuiComboBox
+        aria-label={i18n.QUICK_PROMPT_SELECTOR}
+        placeholder={i18n.QUICK_PROMPT_SELECTOR}
+        customOptionText={`${i18n.CUSTOM_OPTION_TEXT} {searchValue}`}
+        singleSelection={true}
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+        onCreateOption={onCreateOption}
+        renderOption={renderOption}
+      />
+    );
+  }
+);
+
+QuickPromptSelector.displayName = 'QuickPromptSelector';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/translations.ts
new file mode 100644
index 0000000000000..9cff7417c181b
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/translations.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const QUICK_PROMPT_SELECTOR = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.quickPromptSelector.ariaLabel',
+  {
+    defaultMessage: 'Select to edit, or type to create new',
+  }
+);
+
+export const DELETE_QUICK_PROMPT_ = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.quickPromptSelector.deletePromptTitle',
+  {
+    defaultMessage: 'Delete Quick Prompt',
+  }
+);
+
+export const CUSTOM_OPTION_TEXT = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.quickPromptSelector.customOptionText',
+  {
+    defaultMessage: 'Create new Quick Prompt named',
+  }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompts.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompts.tsx
new file mode 100644
index 0000000000000..536154ab845ae
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompts.tsx
@@ -0,0 +1,122 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useState } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiPopover } from '@elastic/eui';
+// eslint-disable-next-line @kbn/eslint/module_migration
+import styled from 'styled-components';
+
+import { useLocalStorage } from 'react-use';
+import { QuickPrompt } from '../../..';
+import * as i18n from './translations';
+import { AddQuickPromptModal } from './add_quick_prompt_modal/add_quick_prompt_modal';
+import { useAssistantContext } from '../../assistant_context';
+
+const QuickPromptsFlexGroup = styled(EuiFlexGroup)`
+  margin: 16px;
+`;
+
+export const QUICK_PROMPT_LOCAL_STORAGE_KEY = 'quickPrompts';
+
+const COUNT_BEFORE_OVERFLOW = 5;
+interface QuickPromptsProps {
+  setInput: (input: string) => void;
+}
+
+/**
+ * Component displaying a horizontal list of quick prompts, with callback for retrieving the selected quick prompt
+ * text, and support for adding new quick prompts and editing existing. Also supports overflow of quick prompts,
+ * and localstorage for storing new and edited prompts.
+ */
+export const QuickPrompts: React.FC<QuickPromptsProps> = React.memo(({ setInput }) => {
+  const { basePromptContexts, baseQuickPrompts, nameSpace } = useAssistantContext();
+
+  // Local storage for all quick prompts, prefixed by assistant nameSpace
+  const [localStorageQuickPrompts, setLocalStorageQuickPrompts] = useLocalStorage(
+    `${nameSpace}.${QUICK_PROMPT_LOCAL_STORAGE_KEY}`,
+    baseQuickPrompts
+  );
+  const [quickPrompts, setQuickPrompts] = useState(localStorageQuickPrompts ?? []);
+
+  // Overflow state
+  const [isOverflowPopoverOpen, setIsOverflowPopoverOpen] = useState(false);
+  const toggleOverflowPopover = useCallback(
+    () => setIsOverflowPopoverOpen(!isOverflowPopoverOpen),
+    [isOverflowPopoverOpen]
+  );
+  const closeOverflowPopover = useCallback(() => setIsOverflowPopoverOpen(false), []);
+
+  const onClickOverflowQuickPrompt = useCallback(
+    (prompt: string) => {
+      setInput(prompt);
+      closeOverflowPopover();
+    },
+    [closeOverflowPopover, setInput]
+  );
+  // Callback for manage modal, saves to local storage on change
+  const onQuickPromptsChange = useCallback(
+    (newQuickPrompts: QuickPrompt[]) => {
+      setLocalStorageQuickPrompts(newQuickPrompts);
+      setQuickPrompts(newQuickPrompts);
+    },
+    [setLocalStorageQuickPrompts]
+  );
+  return (
+    <QuickPromptsFlexGroup gutterSize="s" alignItems="center">
+      {quickPrompts.slice(0, COUNT_BEFORE_OVERFLOW).map((badge, index) => (
+        <EuiFlexItem key={index} grow={false}>
+          <EuiBadge
+            color={badge.color}
+            onClick={() => setInput(badge.prompt)}
+            onClickAriaLabel={badge.title}
+          >
+            {badge.title}
+          </EuiBadge>
+        </EuiFlexItem>
+      ))}
+      {quickPrompts.length > COUNT_BEFORE_OVERFLOW && (
+        <EuiFlexItem grow={false}>
+          <EuiPopover
+            button={
+              <EuiBadge
+                color={'hollow'}
+                iconType={'boxesHorizontal'}
+                onClick={toggleOverflowPopover}
+                onClickAriaLabel={i18n.QUICK_PROMPT_OVERFLOW_ARIA}
+              />
+            }
+            isOpen={isOverflowPopoverOpen}
+            closePopover={closeOverflowPopover}
+            anchorPosition="rightUp"
+          >
+            <EuiFlexGroup direction="column" gutterSize="s">
+              {quickPrompts.slice(COUNT_BEFORE_OVERFLOW).map((badge, index) => (
+                <EuiFlexItem key={index} grow={false}>
+                  <EuiBadge
+                    color={badge.color}
+                    onClick={() => onClickOverflowQuickPrompt(badge.prompt)}
+                    onClickAriaLabel={badge.title}
+                  >
+                    {badge.title}
+                  </EuiBadge>
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGroup>
+          </EuiPopover>
+        </EuiFlexItem>
+      )}
+      <EuiFlexItem grow={false}>
+        <AddQuickPromptModal
+          promptContexts={basePromptContexts}
+          quickPrompts={quickPrompts}
+          onQuickPromptsChange={onQuickPromptsChange}
+        />
+      </EuiFlexItem>
+    </QuickPromptsFlexGroup>
+  );
+});
+QuickPrompts.displayName = 'QuickPrompts';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/translations.ts
new file mode 100644
index 0000000000000..e2d3fd5ef7824
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/translations.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const QUICK_PROMPT_OVERFLOW_ARIA = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.overflowAriaTitle',
+  {
+    defaultMessage: 'Show overflow Quick Prompts',
+  }
+);
+
+export const CANCEL = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.modalCancelButtonTitle',
+  {
+    defaultMessage: 'Cancel',
+  }
+);
+
+export const SAVE = i18n.translate(
+  'xpack.elasticAssistant.assistant.quickPrompts.modalSaveButtonTitle',
+  {
+    defaultMessage: 'Save',
+  }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/types.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/types.tsx
new file mode 100644
index 0000000000000..c0688f432e7dd
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/types.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { PromptContext } from '../../..';
+
+/**
+ * A QuickPrompt is a badge that is displayed below the Assistant's input field. They provide
+ * a quick way for users to insert prompts as templates into the Assistant's input field. If no
+ * categories are provided they will always display with the assistant, however categories can be
+ * supplied to only display the QuickPrompt when the Assistant is registered with corresponding
+ * PromptContext's containing the same category.
+ *
+ * isDefault: If true, this QuickPrompt cannot be deleted by the user
+ */
+export interface QuickPrompt {
+  title: string;
+  prompt: string;
+  color: string;
+  categories?: Array<PromptContext['category']>;
+  isDefault?: boolean;
+}
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings_popover.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings_popover.tsx
new file mode 100644
index 0000000000000..12f46f933b33c
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings_popover.tsx
@@ -0,0 +1,97 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  EuiButtonIcon,
+  EuiFormRow,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiLink,
+  EuiToolTip,
+} from '@elastic/eui';
+import React, { useCallback, useRef, useState } from 'react';
+
+import { ActionTypeRegistryContract } from '@kbn/triggers-actions-ui-plugin/public';
+import { HttpSetup } from '@kbn/core-http-browser';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { Conversation } from '../..';
+import * as i18n from './translations';
+import { ConnectorSelector } from '../connectorland/connector_selector';
+
+export interface SettingsPopoverProps {
+  actionTypeRegistry: ActionTypeRegistryContract;
+  conversation: Conversation;
+  http: HttpSetup;
+  isDisabled?: boolean;
+}
+
+export const SettingsPopover: React.FC<SettingsPopoverProps> = React.memo(
+  ({ actionTypeRegistry, conversation, http, isDisabled = false }) => {
+    const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+    // So we can hide the settings popover when the connector modal is displayed
+    const popoverPanelRef = useRef<HTMLElement | null>(null);
+
+    const closeSettingsHandler = useCallback(() => {
+      setIsSettingsOpen(false);
+    }, []);
+
+    // Hide settings panel when modal is visible (to keep visual clutter minimal)
+    const onConnectorModalVisibilityChange = useCallback((isVisible: boolean) => {
+      if (popoverPanelRef.current) {
+        popoverPanelRef.current.style.visibility = isVisible ? 'hidden' : 'visible';
+      }
+    }, []);
+
+    return (
+      <EuiPopover
+        button={
+          <EuiToolTip position="right" content={i18n.SETTINGS_TITLE}>
+            <EuiButtonIcon
+              disabled={isDisabled}
+              onClick={() => setIsSettingsOpen(!isSettingsOpen)}
+              iconType="controlsVertical"
+              aria-label={i18n.SETTINGS_TITLE}
+              data-test-subj="assistant-settings-button"
+            />
+          </EuiToolTip>
+        }
+        isOpen={isSettingsOpen}
+        closePopover={closeSettingsHandler}
+        anchorPosition="rightCenter"
+        panelRef={(el) => (popoverPanelRef.current = el)}
+      >
+        <EuiPopoverTitle>{i18n.SETTINGS_TITLE}</EuiPopoverTitle>
+        <div style={{ width: '300px' }}>
+          <EuiFormRow
+            data-test-subj="model-field"
+            label={i18n.SETTINGS_CONNECTOR_TITLE}
+            helpText={
+              <EuiLink
+                href={`${http.basePath.get()}/app/management/insightsAndAlerting/triggersActionsConnectors/connectors`}
+                target="_blank"
+                external
+              >
+                <FormattedMessage
+                  id="xpack.elasticAssistant.assistant.settings.connectorHelpTextTitle"
+                  defaultMessage="Kibana Connector to make requests with"
+                />
+              </EuiLink>
+            }
+          >
+            <ConnectorSelector
+              actionTypeRegistry={actionTypeRegistry}
+              conversation={conversation}
+              http={http}
+              onConnectorModalVisibilityChange={onConnectorModalVisibilityChange}
+            />
+          </EuiFormRow>
+        </div>
+      </EuiPopover>
+    );
+  }
+);
+SettingsPopover.displayName = 'SettingPopover';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/streaming_text/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/streaming_text/index.test.tsx
new file mode 100644
index 0000000000000..9ba5258dfe54d
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/streaming_text/index.test.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { StreamingText } from '.';
+
+describe('StreamingText', () => {
+  it('renders text with a streaming effect', async () => {
+    const text = 'Stream stream stream your boat...';
+    const chunkSize = 5;
+    const delay = 50;
+
+    render(<StreamingText text={text} chunkSize={chunkSize} delay={delay} />);
+
+    let displayedText = '';
+    const expectedChunks = Math.ceil(text.length / chunkSize);
+
+    for (let i = 0; i < expectedChunks; i++) {
+      displayedText += text.substring(i * chunkSize, (i + 1) * chunkSize);
+      await waitFor(() => {
+        expect(screen.getByText(displayedText)).toBeInTheDocument();
+      });
+    }
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/streaming_text/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/streaming_text/index.tsx
new file mode 100644
index 0000000000000..33dca8c6e3609
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/streaming_text/index.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useEffect, useState } from 'react';
+
+export interface StreamingTextProps {
+  text: string;
+  children?: (text: string, isStreamingComplete: boolean) => React.ReactNode;
+  chunkSize?: number;
+  delay?: number;
+  onStreamingComplete?: () => void;
+}
+
+export const StreamingText: React.FC<StreamingTextProps> = React.memo<StreamingTextProps>(
+  ({ text, children, chunkSize = 5, delay = 100, onStreamingComplete }) => {
+    const [displayText, setDisplayText] = useState<string>(delay === 0 ? text : '');
+    const [isStreamingComplete, setIsStreamingComplete] = useState<boolean>(delay === 0);
+
+    useEffect(() => {
+      if (delay === 0) {
+        onStreamingComplete?.();
+      }
+      // Only run on initial render so onStreamingComplete is only called once if delay is 0
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+      if (isStreamingComplete || delay === 0) {
+        return;
+      }
+
+      let currentPos = 0;
+      setIsStreamingComplete(false);
+      const interval = setInterval(() => {
+        if (currentPos >= text.length) {
+          onStreamingComplete?.();
+          setIsStreamingComplete(true);
+          clearInterval(interval);
+          return;
+        }
+
+        const chunk = text.substring(currentPos, currentPos + chunkSize);
+        setDisplayText((prevText) => prevText + chunk);
+        currentPos += chunkSize;
+      }, delay);
+
+      return () => {
+        clearInterval(interval);
+      };
+    }, [text, chunkSize, delay, onStreamingComplete, isStreamingComplete]);
+
+    if (children) {
+      return <div>{children(displayText, isStreamingComplete)}</div>;
+    } else {
+      return <div>{displayText}</div>;
+    }
+  }
+);
+StreamingText.displayName = 'StreamingText';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/translations.ts
new file mode 100644
index 0000000000000..5690b7361f2b0
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/translations.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const CLEAR_CHAT = i18n.translate('xpack.elasticAssistant.assistant.clearChat', {
+  defaultMessage: 'Clear chat',
+});
+
+export const DEFAULT_ASSISTANT_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.defaultAssistantTitle',
+  {
+    defaultMessage: 'Elastic Assistant',
+  }
+);
+
+export const MISSING_CONNECTOR_CALLOUT_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.missingConnectorCalloutTitle',
+  {
+    defaultMessage: 'The current conversation is missing a connector configuration',
+  }
+);
+
+export const MISSING_CONNECTOR_CALLOUT_DESCRIPTION = i18n.translate(
+  'xpack.elasticAssistant.assistant.missingConnectorCalloutDescription',
+  {
+    defaultMessage: 'Select a connector from the conversation settings to continue',
+  }
+);
+
+// Settings
+export const SETTINGS_TITLE = i18n.translate('xpack.elasticAssistant.assistant.settingsTitle', {
+  defaultMessage: 'Conversation settings',
+});
+
+export const SETTINGS_CONNECTOR_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.settings.connectorTitle',
+  {
+    defaultMessage: 'Connector',
+  }
+);
+
+export const SUBMIT_MESSAGE = i18n.translate('xpack.elasticAssistant.assistant.submitMessage', {
+  defaultMessage: 'Submit message',
+});
+
+export const API_ERROR = i18n.translate('xpack.elasticAssistant.assistant.apiErrorTitle', {
+  defaultMessage:
+    'An error occurred sending your message. If the problem persists, please test the connector configuration.',
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/types.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/types.ts
new file mode 100644
index 0000000000000..9c7c2058e4b42
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/types.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export type PromptType = 'system' | 'user';
+
+export interface Prompt {
+  id: string;
+  content: string;
+  name: string;
+  promptType: PromptType;
+}
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_assistant_overlay/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_assistant_overlay/index.test.tsx
new file mode 100644
index 0000000000000..4329cc45b565c
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_assistant_overlay/index.test.tsx
@@ -0,0 +1,102 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { act, renderHook } from '@testing-library/react-hooks';
+
+import { useAssistantOverlay } from '.';
+
+const mockUseAssistantContext = {
+  registerPromptContext: jest.fn(),
+  showAssistantOverlay: jest.fn(),
+  unRegisterPromptContext: jest.fn(),
+};
+jest.mock('../../assistant_context', () => {
+  const original = jest.requireActual('../../assistant_context');
+
+  return {
+    ...original,
+    useAssistantContext: () => mockUseAssistantContext,
+  };
+});
+
+describe('useAssistantOverlay', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('calls registerPromptContext with the expected context', async () => {
+    const category = 'event';
+    const description = 'test description';
+    const getPromptContext = jest.fn(() => Promise.resolve('test data'));
+    const id = 'test-id';
+    const suggestedUserPrompt = 'test user prompt';
+    const tooltip = 'test tooltip';
+
+    renderHook(() =>
+      useAssistantOverlay(
+        category,
+        null,
+        description,
+        getPromptContext,
+        id,
+        suggestedUserPrompt,
+        tooltip
+      )
+    );
+
+    expect(mockUseAssistantContext.registerPromptContext).toHaveBeenCalledWith({
+      category,
+      description,
+      getPromptContext,
+      id,
+      suggestedUserPrompt,
+      tooltip,
+    });
+  });
+
+  it('calls unRegisterPromptContext on unmount', () => {
+    const { unmount } = renderHook(() =>
+      useAssistantOverlay(
+        'event',
+        null,
+        'description',
+        () => Promise.resolve('data'),
+        'id',
+        null,
+        'tooltip'
+      )
+    );
+
+    unmount();
+
+    expect(mockUseAssistantContext.unRegisterPromptContext).toHaveBeenCalledWith('id');
+  });
+
+  it('calls `showAssistantOverlay` from the assistant context', () => {
+    const { result } = renderHook(() =>
+      useAssistantOverlay(
+        'event',
+        'conversation-id',
+        'description',
+        () => Promise.resolve('data'),
+        'id',
+        null,
+        'tooltip'
+      )
+    );
+
+    act(() => {
+      result.current.showAssistantOverlay(true);
+    });
+
+    expect(mockUseAssistantContext.showAssistantOverlay).toHaveBeenCalledWith({
+      showOverlay: true,
+      promptContextId: 'id',
+      conversationId: 'conversation-id',
+    });
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_assistant_overlay/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_assistant_overlay/index.tsx
new file mode 100644
index 0000000000000..f804ec5178ca2
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_assistant_overlay/index.tsx
@@ -0,0 +1,135 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useCallback, useEffect, useMemo } from 'react';
+
+import { useAssistantContext } from '../../assistant_context';
+import { getUniquePromptContextId } from '../../assistant_context/helpers';
+import type { PromptContext } from '../prompt_context/types';
+
+interface UseAssistantOverlay {
+  showAssistantOverlay: (show: boolean) => void;
+  promptContextId: string;
+}
+
+/**
+ * `useAssistantOverlay` is a hook that registers context with the assistant overlay, and
+ * returns an optional `showAssistantOverlay` function to display the assistant overlay.
+ * As an alterative to using the `showAssistantOverlay` returned from this hook, you may
+ * use the `NewChatById` component and pass it the `promptContextId` returned by this hook.
+ *
+ * USE THIS WHEN: You want to register context in one part of the tree, and then show
+ * a _New chat_ button in another part of the tree without passing around the data, or when
+ * you want to build a custom `New chat` button with features not not provided by the
+ * `NewChat` component.
+ */
+export const useAssistantOverlay = (
+  /**
+   * The category of data, e.g. `alert | alerts | event | events | string`
+   *
+   * `category` helps the assistant display the most relevant user prompts
+   */
+  category: PromptContext['category'],
+
+  /**
+   * optionally automatically add this context to a specific conversation when the assistant is displayed
+   */
+  conversationId: string | null,
+
+  /**
+   * The assistant will display this **short**, static description
+   * in the context pill
+   */
+  description: PromptContext['description'],
+
+  /**
+   * The assistant will invoke this function to retrieve the context data,
+   * which will be included in a prompt (e.g. the contents of an alert or an event)
+   */
+  getPromptContext: PromptContext['getPromptContext'],
+
+  /**
+   * Optionally provide a unique identifier for this prompt context, or accept the uuid default.
+   */
+  id: PromptContext['id'] | null,
+
+  /**
+   * An optional user prompt that's filled in, but not sent, when the Elastic Assistant opens
+   */
+  suggestedUserPrompt: PromptContext['suggestedUserPrompt'] | null,
+
+  /**
+   * The assistant will display this tooltip when the user hovers over the context pill
+   */
+  tooltip: PromptContext['tooltip']
+): UseAssistantOverlay => {
+  // memoize the props so that we can use them in the effect below:
+  const _category: PromptContext['category'] = useMemo(() => category, [category]);
+  const _description: PromptContext['description'] = useMemo(() => description, [description]);
+  const _getPromptContext: PromptContext['getPromptContext'] = useMemo(
+    () => getPromptContext,
+    [getPromptContext]
+  );
+  const promptContextId: PromptContext['id'] = useMemo(
+    () => id ?? getUniquePromptContextId(),
+    [id]
+  );
+  const _suggestedUserPrompt: PromptContext['suggestedUserPrompt'] = useMemo(
+    () => suggestedUserPrompt ?? undefined,
+    [suggestedUserPrompt]
+  );
+  const _tooltip = useMemo(() => tooltip, [tooltip]);
+
+  // the assistant context is used to show/hide the assistant overlay:
+  const {
+    registerPromptContext,
+    showAssistantOverlay: assistantContextShowOverlay,
+    unRegisterPromptContext,
+  } = useAssistantContext();
+
+  // proxy show / hide calls to assistant context, using our internal prompt context id:
+  const showAssistantOverlay = useCallback(
+    (showOverlay: boolean) => {
+      if (promptContextId != null) {
+        assistantContextShowOverlay({
+          showOverlay,
+          promptContextId,
+          conversationId: conversationId ?? undefined,
+        });
+      }
+    },
+    [assistantContextShowOverlay, conversationId, promptContextId]
+  );
+
+  useEffect(() => {
+    unRegisterPromptContext(promptContextId); // a noop if the current prompt context id is not registered
+
+    const newContext: PromptContext = {
+      category: _category,
+      description: _description,
+      getPromptContext: _getPromptContext,
+      id: promptContextId,
+      suggestedUserPrompt: _suggestedUserPrompt,
+      tooltip: _tooltip,
+    };
+
+    registerPromptContext(newContext);
+
+    return () => unRegisterPromptContext(promptContextId);
+  }, [
+    _category,
+    _description,
+    _getPromptContext,
+    _suggestedUserPrompt,
+    _tooltip,
+    promptContextId,
+    registerPromptContext,
+    unRegisterPromptContext,
+  ]);
+
+  return { promptContextId, showAssistantOverlay };
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/helpers.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/helpers.ts
new file mode 100644
index 0000000000000..57f87e4d03bd1
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/helpers.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+export interface CodeBlockDetails {
+  type: QueryType;
+  content: string;
+  start: number;
+  end: number;
+  controlContainer?: React.ReactNode;
+  button?: React.ReactNode;
+}
+
+export type QueryType = 'eql' | 'kql' | 'dsl' | 'json' | 'no-type';
+
+/**
+ * `analyzeMarkdown` is a helper that enriches content returned from a query
+ * with action buttons
+ *
+ * Returns a list of code block details for each code block in the markdown,
+ * including the type of code block and the content of the code block.
+ *
+ * @param markdown
+ */
+export const analyzeMarkdown = (markdown: string): CodeBlockDetails[] => {
+  const codeBlockRegex = /```(\w+)?\s([\s\S]*?)```/g;
+  const matches = [...markdown.matchAll(codeBlockRegex)];
+  // If your codeblocks aren't getting tagged with the right language, add keywords to the array.
+  const types = {
+    eql: ['Event Query Language', 'EQL sequence query'],
+    kql: ['Kibana Query Language', 'KQL Query'],
+    dsl: ['Elasticsearch QueryDSL', 'Elasticsearch Query DSL', 'Elasticsearch DSL'],
+  };
+
+  const result: CodeBlockDetails[] = matches.map((match) => {
+    let type = match[1] || 'no-type';
+    if (type === 'no-type' || type === 'json') {
+      const start = match.index || 0;
+      const precedingText = markdown.slice(0, start);
+      for (const [typeKey, keywords] of Object.entries(types)) {
+        if (keywords.some((kw) => precedingText.includes(kw))) {
+          type = typeKey;
+          break;
+        }
+      }
+    }
+
+    const content = match[2].trim();
+    const start = match.index || 0;
+    const end = start + match[0].length;
+    return { type: type as QueryType, content, start, end };
+  });
+
+  return result;
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/index.tsx
new file mode 100644
index 0000000000000..8c2af801af60f
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/index.tsx
@@ -0,0 +1,192 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useCallback } from 'react';
+
+import { useAssistantContext } from '../../assistant_context';
+import { Conversation, Message } from '../../assistant_context/types';
+import * as i18n from './translations';
+import { ELASTIC_SECURITY_ASSISTANT, ELASTIC_SECURITY_ASSISTANT_TITLE } from './translations';
+
+export const DEFAULT_CONVERSATION_STATE: Conversation = {
+  id: i18n.DEFAULT_CONVERSATION_TITLE,
+  messages: [],
+  apiConfig: {},
+  theme: {
+    title: ELASTIC_SECURITY_ASSISTANT_TITLE,
+    titleIcon: 'logoSecurity',
+    assistant: {
+      name: ELASTIC_SECURITY_ASSISTANT,
+      icon: 'logoSecurity',
+    },
+    system: {
+      icon: 'logoElastic',
+    },
+    user: {},
+  },
+};
+
+interface AppendMessageProps {
+  conversationId: string;
+  message: Message;
+}
+
+interface CreateConversationProps {
+  conversationId: string;
+  messages?: Message[];
+}
+
+interface SetApiConfigProps {
+  conversationId: string;
+  apiConfig: Conversation['apiConfig'];
+}
+
+interface SetConversationProps {
+  conversation: Conversation;
+}
+
+interface UseConversation {
+  appendMessage: ({ conversationId: string, message: Message }: AppendMessageProps) => Message[];
+  clearConversation: (conversationId: string) => void;
+  createConversation: ({
+    conversationId,
+    messages,
+  }: CreateConversationProps) => Conversation | undefined;
+  setApiConfig: ({ conversationId, apiConfig }: SetApiConfigProps) => void;
+  setConversation: ({ conversation }: SetConversationProps) => void;
+}
+
+export const useConversation = (): UseConversation => {
+  const { setConversations } = useAssistantContext();
+
+  /**
+   * Append a message to the conversation[] for a given conversationId
+   */
+  const appendMessage = useCallback(
+    ({ conversationId, message }: AppendMessageProps): Message[] => {
+      let messages: Message[] = [];
+      setConversations((prev: Record<string, Conversation>) => {
+        const prevConversation: Conversation | undefined = prev[conversationId];
+
+        if (prevConversation != null) {
+          messages = [...prevConversation.messages, message];
+          const newConversation = {
+            ...prevConversation,
+            messages,
+          };
+
+          return {
+            ...prev,
+            [conversationId]: newConversation,
+          };
+        } else {
+          return prev;
+        }
+      });
+      return messages;
+    },
+    [setConversations]
+  );
+
+  /**
+   * Clear the messages[] for a given conversationId
+   */
+  const clearConversation = useCallback(
+    (conversationId: string) => {
+      setConversations((prev: Record<string, Conversation>) => {
+        const prevConversation: Conversation | undefined = prev[conversationId];
+
+        if (prevConversation != null) {
+          const newConversation = {
+            ...prevConversation,
+            messages: [],
+          };
+
+          return {
+            ...prev,
+            [conversationId]: newConversation,
+          };
+        } else {
+          return prev;
+        }
+      });
+    },
+    [setConversations]
+  );
+
+  /**
+   * Create a new conversation with the given conversationId, and optionally add messages
+   */
+  const createConversation = useCallback(
+    ({ conversationId, messages }: CreateConversationProps): Conversation | undefined => {
+      let newConversation: Conversation | undefined;
+      setConversations((prev: Record<string, Conversation>) => {
+        const prevConversation: Conversation | undefined = prev[conversationId];
+        if (prevConversation != null) {
+          throw new Error('Conversation already exists!');
+        } else {
+          newConversation = {
+            ...DEFAULT_CONVERSATION_STATE,
+            id: conversationId,
+            messages: messages != null ? messages : [],
+          };
+          return {
+            ...prev,
+            [conversationId]: {
+              ...newConversation,
+            },
+          };
+        }
+      });
+      return newConversation;
+    },
+    [setConversations]
+  );
+
+  /**
+   * Update the apiConfig for a given conversationId
+   */
+  const setApiConfig = useCallback(
+    ({ conversationId, apiConfig }: SetApiConfigProps): void => {
+      setConversations((prev: Record<string, Conversation>) => {
+        const prevConversation: Conversation | undefined = prev[conversationId];
+
+        if (prevConversation != null) {
+          const updatedConversation = {
+            ...prevConversation,
+            apiConfig,
+          };
+
+          return {
+            ...prev,
+            [conversationId]: updatedConversation,
+          };
+        } else {
+          return prev;
+        }
+      });
+    },
+    [setConversations]
+  );
+
+  /**
+   * Set/overwrite an existing conversation (behaves as createConversation if not already existing)
+   */
+  const setConversation = useCallback(
+    ({ conversation }: SetConversationProps): void => {
+      setConversations((prev: Record<string, Conversation>) => {
+        return {
+          ...prev,
+          [conversation.id]: conversation,
+        };
+      });
+    },
+    [setConversations]
+  );
+
+  return { appendMessage, clearConversation, createConversation, setApiConfig, setConversation };
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/sample_conversations.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/sample_conversations.tsx
new file mode 100644
index 0000000000000..3fc41160d5bbf
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/sample_conversations.tsx
@@ -0,0 +1,137 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { Conversation } from '../../assistant_context/types';
+import * as i18n from '../../content/prompts/welcome/translations';
+import {
+  DEFAULT_CONVERSATION_TITLE,
+  ELASTIC_SECURITY_ASSISTANT,
+  ELASTIC_SECURITY_ASSISTANT_TITLE,
+  WELCOME_CONVERSATION_TITLE,
+} from './translations';
+
+export const BASE_CONVERSATIONS: Record<string, Conversation> = {
+  [DEFAULT_CONVERSATION_TITLE]: {
+    id: DEFAULT_CONVERSATION_TITLE,
+    messages: [
+      {
+        role: 'user',
+        content: 'Can you provide a sample KQL query please? (Kibana)',
+        timestamp: '5/12/2023, 12:04:07 AM',
+      },
+      {
+        role: 'assistant',
+        content:
+          'Certainly! Here\'s a sample KQL (Kibana Query Language) query for a fictional web server log data:\n\n```\nresponse.keyword: "200" AND extension.keyword: "html" AND NOT (geo.src: "US" OR geo.src: "CA")\n```\n\nThis query will return all documents where:\n\n1. The `response` field has a value of "200" (HTTP status code for a successful request).\n2. The `extension` field has a value of "html" (indicating an HTML file was requested).\n3. The `geo.src` field is not "US" or "CA" (meaning the request did not come from the United States or Canada).\n\nYou can use this query in Kibana\'s Discover or Dashboard panels to filter the data based on these conditions.',
+        timestamp: '5/12/2023, 12:04:21 AM',
+      },
+      {
+        role: 'user',
+        content:
+          'What about an EQL sequence query for 4 failed logons followed by a successful login?',
+        timestamp: '5/12/2023, 12:08:31 AM',
+      },
+      {
+        role: 'assistant',
+        content:
+          'Here\'s an EQL (Event Query Language) sequence query to detect 4 failed logons followed by a successful login for a fictional logon event data:\n\n```eql\nsequence by user.name with maxspan=5m\n  [authentication where result == "failure" and event.action == "logon_attempt"]{4}\n  [authentication where result == "success" and event.action == "logon_attempt"]\n```\n\nThis query will return sequences where:\n\n1. The events are grouped by the `user.name` field.\n2. The maximum time span between the first and last event in the sequence is 5 minutes (`maxspan=5m`).\n3. There are 4 consecutive `authentication` events with a `result` field value of "failure" and an `event.action` field value of "logon_attempt".\n4. After the 4 failed logon attempts, there\'s an `authentication` event with a `result` field value of "success" and an `event.action` field value of "logon_attempt".\n\nYou can use this EQL query in Elasticsearch or Kibana to detect potential brute force attacks or suspicious logon behavior.',
+        timestamp: '5/12/2023, 12:08:46 AM',
+      },
+      {
+        role: 'user',
+        content: "Can you fix the markdown please, it's not rendering",
+        timestamp: '5/12/2023, 12:09:00 AM',
+      },
+      {
+        role: 'assistant',
+        content:
+          'Apologies for the formatting issue. Here\'s the corrected EQL sequence query:\n\n```\nsequence by user.name with maxspan=5m\n  [authentication where result == "failure" and event.action == "logon_attempt"]{4}\n  [authentication where result == "success" and event.action == "logon_attempt"]\n```\n\nThis query will return sequences where:\n\n1. The events are grouped by the `user.name` field.\n2. The maximum time span between the first and last event in the sequence is 5 minutes (`maxspan=5m`).\n3. There are 4 consecutive `authentication` events with a `result` field value of "failure" and an `event.action` field value of "logon_attempt".\n4. After the 4 failed logon attempts, there\'s an `authentication` event with a `result` field value of "success" and an `event.action` field value of "logon_attempt".\n\nYou can use this EQL query in Elasticsearch or Kibana to detect potential brute force attacks or suspicious logon behavior.',
+        timestamp: '5/12/2023, 12:09:16 AM',
+      },
+      {
+        role: 'user',
+        content:
+          'Can you response with a message that contains both the first KQL query you sent me, and also the EQL sequence query you sent?',
+        timestamp: '5/12/2023, 12:11:49 AM',
+      },
+      {
+        role: 'assistant',
+        content:
+          'Certainly! Here are both the KQL and EQL queries in a single response:\n\n**KQL Query (Kibana Query Language):**\n\n```\nresponse.keyword: "200" AND extension.keyword: "html" AND NOT (geo.src: "US" OR geo.src: "CA")\n```\n\nThis KQL query returns all documents where:\n\n1. The `response` field has a value of "200" (HTTP status code for a successful request).\n2. The `extension` field has a value of "html" (indicating an HTML file was requested).\n3. The `geo.src` field is not "US" or "CA" (meaning the request did not come from the United States or Canada).\n\nYou can use this query in Kibana\'s Discover or Dashboard panels to filter the data based on these conditions.\n\n**EQL Sequence Query (Event Query Language):**\n\n```\nsequence by user.name with maxspan=5m\n  [authentication where result == "failure" and event.action == "logon_attempt"]{4}\n  [authentication where result == "success" and event.action == "logon_attempt"]\n```\n\nThis EQL query returns sequences where:\n\n1. The events are grouped by the `user.name` field.\n2. The maximum time span between the first and last event in the sequence is 5 minutes (`maxspan=5m`).\n3. There are 4 consecutive `authentication` events with a `result` field value of "failure" and an `event.action` field value of "logon_attempt".\n4. After the 4 failed logon attempts, there\'s an `authentication` event with a `result` field value of "success" and an `event.action` field value of "logon_attempt".\n\nYou can use this EQL query in Elasticsearch or Kibana to detect potential brute force attacks or suspicious logon behavior.',
+        timestamp: '5/12/2023, 12:12:09 AM',
+      },
+      {
+        role: 'user',
+        content:
+          'Last but not least, could you write an Elasticsearch QueryDSL for filtering events where `event.action` is `logon_attempt`',
+        timestamp: '5/12/2023, 12:30:38 AM',
+      },
+      {
+        role: 'assistant',
+        content:
+          'Certainly! Here\'s an Elasticsearch QueryDSL for filtering events where `file.name` is `fake_behavior.exe`:\n\n```json\n{\n  "match_phrase": {\n    "file.name": {\n      "query": "fake_behavior.exe"\n    }\n  }\n}\n```\n\nThis QueryDSL is searching for documents where the file.name field matches the exact phrase "fake_behavior.exe". It is useful for finding documents that have a specific file name in an Elasticsearch index.',
+        timestamp: '5/12/2023, 12:30:49 AM',
+      },
+    ],
+    apiConfig: {},
+  },
+  timeline: {
+    id: 'timeline',
+    messages: [],
+    apiConfig: {},
+  },
+  [WELCOME_CONVERSATION_TITLE]: {
+    id: WELCOME_CONVERSATION_TITLE,
+    theme: {
+      title: ELASTIC_SECURITY_ASSISTANT_TITLE,
+      titleIcon: 'logoSecurity',
+      assistant: {
+        name: ELASTIC_SECURITY_ASSISTANT,
+        icon: 'logoSecurity',
+      },
+      system: {
+        icon: 'logoElastic',
+      },
+      user: {},
+    },
+    messages: [
+      {
+        role: 'assistant',
+        content: i18n.WELCOME_GENERAL,
+        timestamp: '',
+        presentation: {
+          delay: 2 * 1000,
+          stream: true,
+        },
+      },
+      {
+        role: 'assistant',
+        content: i18n.WELCOME_GENERAL_2,
+        timestamp: '',
+        presentation: {
+          delay: 1000,
+          stream: true,
+        },
+      },
+      {
+        role: 'assistant',
+        content: i18n.WELCOME_GENERAL_3,
+        timestamp: '',
+        presentation: {
+          delay: 1000,
+          stream: true,
+        },
+      },
+      // {
+      //   role: 'assistant',
+      //   content: i18n.WELCOME_NO_CONNECTOR_PRIVILEGES,
+      //   timestamp: '',
+      // },
+    ],
+    apiConfig: {},
+  },
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/translations.ts
new file mode 100644
index 0000000000000..48271c8b50629
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/translations.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const WELCOME_CONVERSATION_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.useConversation.welcomeConversationTitle',
+  {
+    defaultMessage: 'Welcome',
+  }
+);
+export const DEFAULT_CONVERSATION_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.useConversation.defaultConversationTitle',
+  {
+    defaultMessage: 'Default',
+  }
+);
+
+export const ELASTIC_SECURITY_ASSISTANT_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.useConversation.elasticSecurityAssistantTitle',
+  {
+    defaultMessage: 'Elastic Security Assistant',
+  }
+);
+
+export const ELASTIC_SECURITY_ASSISTANT = i18n.translate(
+  'xpack.elasticAssistant.assistant.useConversation.elasticSecurityAssistantName',
+  {
+    defaultMessage: 'Assistant',
+  }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_send_messages/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_send_messages/index.tsx
new file mode 100644
index 0000000000000..3a3b72c253862
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_send_messages/index.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useCallback, useState } from 'react';
+
+import { HttpSetup } from '@kbn/core-http-browser';
+import { Conversation, Message } from '../../assistant_context/types';
+import { fetchConnectorExecuteAction } from '../api';
+
+interface SendMessagesProps {
+  http: HttpSetup;
+  messages: Message[];
+  apiConfig: Conversation['apiConfig'];
+}
+
+interface UseSendMessages {
+  isLoading: boolean;
+  sendMessages: ({ apiConfig, http, messages }: SendMessagesProps) => Promise<string>;
+}
+
+export const useSendMessages = (): UseSendMessages => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const sendMessages = useCallback(async ({ apiConfig, http, messages }: SendMessagesProps) => {
+    setIsLoading(true);
+    try {
+      return await fetchConnectorExecuteAction({
+        http,
+        messages,
+        apiConfig,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  return { isLoading, sendMessages };
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/helpers.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/helpers.ts
new file mode 100644
index 0000000000000..f285f8b1f3c41
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/helpers.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { v4 } from 'uuid';
+
+import type { PromptContext } from '../assistant/prompt_context/types';
+
+export const getUniquePromptContextId = (): string => v4();
+
+export const updatePromptContexts = ({
+  prevPromptContexts,
+  promptContext,
+}: {
+  prevPromptContexts: Record<string, PromptContext>;
+  promptContext: PromptContext;
+}): Record<string, PromptContext> => ({
+  ...prevPromptContexts,
+  [promptContext.id]: {
+    ...promptContext,
+  },
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.test.tsx
new file mode 100644
index 0000000000000..564d57ddd39fa
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.test.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+
+import { AssistantProvider, useAssistantContext } from '.';
+import { httpServiceMock } from '@kbn/core-http-browser-mocks';
+import { actionTypeRegistryMock } from '@kbn/triggers-actions-ui-plugin/public/application/action_type_registry.mock';
+
+const actionTypeRegistry = actionTypeRegistryMock.create();
+const mockGetInitialConversations = jest.fn(() => ({}));
+const mockGetComments = jest.fn(() => []);
+const mockHttp = httpServiceMock.createStartContract({ basePath: '/test' });
+
+const ContextWrapper: React.FC = ({ children }) => (
+  <AssistantProvider
+    actionTypeRegistry={actionTypeRegistry}
+    augmentMessageCodeBlocks={jest.fn()}
+    getInitialConversations={mockGetInitialConversations}
+    getComments={mockGetComments}
+    http={mockHttp}
+    setConversations={jest.fn()}
+  >
+    {children}
+  </AssistantProvider>
+);
+
+describe('AssistantContext', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  test('it throws an error when useAssistantContext hook is used without a SecurityAssistantContext', () => {
+    const { result } = renderHook(useAssistantContext);
+
+    expect(result.error).toEqual(
+      new Error('useAssistantContext must be used within a AssistantProvider')
+    );
+  });
+
+  test('it should return the httpFetch function', async () => {
+    const { result } = renderHook(useAssistantContext, { wrapper: ContextWrapper });
+    const http = await result.current.http;
+
+    const path = '/path/to/resource';
+    await http.fetch(path);
+
+    expect(mockHttp.fetch).toBeCalledWith(path);
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx
new file mode 100644
index 0000000000000..a11ad21237237
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx
@@ -0,0 +1,217 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiCommentProps } from '@elastic/eui';
+import type { HttpSetup } from '@kbn/core-http-browser';
+import { omit } from 'lodash/fp';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { ActionTypeRegistryContract } from '@kbn/triggers-actions-ui-plugin/public';
+import { updatePromptContexts } from './helpers';
+import type {
+  PromptContext,
+  RegisterPromptContext,
+  UnRegisterPromptContext,
+} from '../assistant/prompt_context/types';
+import type { Conversation } from './types';
+import { DEFAULT_ASSISTANT_TITLE } from '../assistant/translations';
+import { CodeBlockDetails } from '../assistant/use_conversation/helpers';
+import { PromptContextTemplate } from '../assistant/prompt_context/types';
+import { QuickPrompt } from '../assistant/quick_prompts/types';
+
+export interface ShowAssistantOverlayProps {
+  showOverlay: boolean;
+  promptContextId?: string;
+  conversationId?: string;
+}
+
+type ShowAssistantOverlay = ({
+  showOverlay,
+  promptContextId,
+  conversationId,
+}: ShowAssistantOverlayProps) => void;
+interface AssistantProviderProps {
+  actionTypeRegistry: ActionTypeRegistryContract;
+  augmentMessageCodeBlocks: (currentConversation: Conversation) => CodeBlockDetails[][];
+  basePromptContexts?: PromptContextTemplate[];
+  baseQuickPrompts?: QuickPrompt[];
+  children: React.ReactNode;
+  getComments: ({
+    currentConversation,
+    lastCommentRef,
+  }: {
+    currentConversation: Conversation;
+    lastCommentRef: React.MutableRefObject<HTMLDivElement | null>;
+  }) => EuiCommentProps[];
+  http: HttpSetup;
+  getInitialConversations: () => Record<string, Conversation>;
+  nameSpace?: string;
+  setConversations: React.Dispatch<React.SetStateAction<Record<string, Conversation>>>;
+  title?: string;
+}
+
+interface UseAssistantContext {
+  actionTypeRegistry: ActionTypeRegistryContract;
+  augmentMessageCodeBlocks: (currentConversation: Conversation) => CodeBlockDetails[][];
+  basePromptContexts: PromptContextTemplate[];
+  baseQuickPrompts: QuickPrompt[];
+  conversationIds: string[];
+  conversations: Record<string, Conversation>;
+  getComments: ({
+    currentConversation,
+    lastCommentRef,
+  }: {
+    currentConversation: Conversation;
+    lastCommentRef: React.MutableRefObject<HTMLDivElement | null>;
+  }) => EuiCommentProps[];
+  http: HttpSetup;
+  promptContexts: Record<string, PromptContext>;
+  nameSpace: string;
+  registerPromptContext: RegisterPromptContext;
+  setConversations: React.Dispatch<React.SetStateAction<Record<string, Conversation>>>;
+  setShowAssistantOverlay: (showAssistantOverlay: ShowAssistantOverlay) => void;
+  showAssistantOverlay: ShowAssistantOverlay;
+  title: string;
+  unRegisterPromptContext: UnRegisterPromptContext;
+}
+
+const AssistantContext = React.createContext<UseAssistantContext | undefined>(undefined);
+
+export const AssistantProvider: React.FC<AssistantProviderProps> = ({
+  actionTypeRegistry,
+  augmentMessageCodeBlocks,
+  basePromptContexts = [],
+  baseQuickPrompts = [],
+  children,
+  getComments,
+  http,
+  getInitialConversations,
+  nameSpace = 'elasticAssistantDefault',
+  setConversations,
+  title = DEFAULT_ASSISTANT_TITLE,
+}) => {
+  /**
+   * Prompt contexts are used to provide components a way to register and make their data available to the assistant.
+   */
+  const [promptContexts, setPromptContexts] = useState<Record<string, PromptContext>>({});
+
+  const registerPromptContext: RegisterPromptContext = useCallback(
+    (promptContext: PromptContext) => {
+      setPromptContexts((prevPromptContexts) => {
+        if (promptContext != null && prevPromptContexts[promptContext.id] == null) {
+          return updatePromptContexts({
+            prevPromptContexts,
+            promptContext,
+          });
+        } else {
+          return prevPromptContexts;
+        }
+      });
+    },
+    []
+  );
+
+  const unRegisterPromptContext: UnRegisterPromptContext = useCallback(
+    (queryContextId: string) =>
+      setPromptContexts((prevPromptContexts) => {
+        if (prevPromptContexts[queryContextId] == null) {
+          return prevPromptContexts;
+        } else {
+          return omit(queryContextId, prevPromptContexts);
+        }
+      }),
+    []
+  );
+
+  /**
+   * Global Assistant Overlay actions
+   */
+  const [showAssistantOverlay, setShowAssistantOverlay] = useState<ShowAssistantOverlay>(
+    (showAssistant) => {}
+  );
+
+  const [conversations, setConversationsInternal] = useState(getInitialConversations());
+  const conversationIds = useMemo(() => Object.keys(conversations).sort(), [conversations]);
+
+  // TODO: This is a fix for conversations not loading out of localstorage. Also re-introduces our cascading render issue (as it loops back in localstorage)
+  useEffect(() => {
+    setConversationsInternal(getInitialConversations());
+  }, [getInitialConversations]);
+
+  const onConversationsUpdated = useCallback<
+    React.Dispatch<React.SetStateAction<Record<string, Conversation>>>
+  >(
+    (
+      newConversations:
+        | Record<string, Conversation>
+        | ((prev: Record<string, Conversation>) => Record<string, Conversation>)
+    ) => {
+      if (typeof newConversations === 'function') {
+        const updater = newConversations;
+        setConversationsInternal((prevValue) => {
+          const newValue = updater(prevValue);
+          setConversations(newValue);
+          return newValue;
+        });
+      } else {
+        setConversations(newConversations);
+        setConversationsInternal(newConversations);
+      }
+    },
+    [setConversations]
+  );
+
+  const value = useMemo(
+    () => ({
+      actionTypeRegistry,
+      augmentMessageCodeBlocks,
+      basePromptContexts,
+      baseQuickPrompts,
+      conversationIds,
+      conversations,
+      getComments,
+      http,
+      promptContexts,
+      nameSpace,
+      registerPromptContext,
+      setConversations: onConversationsUpdated,
+      setShowAssistantOverlay,
+      showAssistantOverlay,
+      title,
+      unRegisterPromptContext,
+    }),
+    [
+      actionTypeRegistry,
+      augmentMessageCodeBlocks,
+      basePromptContexts,
+      baseQuickPrompts,
+      conversationIds,
+      conversations,
+      getComments,
+      http,
+      promptContexts,
+      nameSpace,
+      registerPromptContext,
+      onConversationsUpdated,
+      showAssistantOverlay,
+      title,
+      unRegisterPromptContext,
+    ]
+  );
+
+  return <AssistantContext.Provider value={value}>{children}</AssistantContext.Provider>;
+};
+
+export const useAssistantContext = () => {
+  const context = React.useContext(AssistantContext);
+
+  if (context == null) {
+    throw new Error('useAssistantContext must be used within a AssistantProvider');
+  }
+
+  return context;
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/types.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/types.tsx
new file mode 100644
index 0000000000000..33af928a8e900
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/types.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { OpenAiProviderType } from '@kbn/stack-connectors-plugin/common/gen_ai/constants';
+
+export type ConversationRole = 'system' | 'user' | 'assistant';
+
+export interface MessagePresentation {
+  delay?: number;
+  stream?: boolean;
+}
+export interface Message {
+  role: ConversationRole;
+  content: string;
+  timestamp: string;
+  presentation?: MessagePresentation;
+}
+
+export interface ConversationTheme {
+  title?: JSX.Element | string;
+  titleIcon?: string;
+  user?: {
+    name?: string;
+    icon?: string;
+  };
+  assistant?: {
+    name?: string;
+    icon?: string;
+  };
+  system?: {
+    name?: string;
+    icon?: string;
+  };
+}
+
+/**
+ * Complete state to reconstruct a conversation instance.
+ * Includes all messages, connector configured, and relevant UI state.
+ *
+ */
+export interface Conversation {
+  apiConfig: {
+    connectorId?: string;
+    provider?: OpenAiProviderType;
+  };
+  id: string;
+  messages: Message[];
+  theme?: ConversationTheme;
+}
+
+export interface OpenAIConfig {
+  temperature: number;
+  model: string;
+}
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_button/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_button/index.tsx
new file mode 100644
index 0000000000000..51150264c7988
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_button/index.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiCard, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
+
+import { GenAiLogo } from '@kbn/stack-connectors-plugin/public/common';
+import * as i18n from '../translations';
+
+export interface ConnectorButtonProps {
+  setIsConnectorModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  connectorAdded?: boolean;
+}
+
+/**
+ * Simple button component for adding a connector. Note: component is basic and does not handle connector
+ * add logic. Must pass in `setIsConnectorModalVisible`, see ConnectorSetup component if wanting to manage
+ * connector add logic.
+ */
+export const ConnectorButton: React.FC<ConnectorButtonProps> = React.memo<ConnectorButtonProps>(
+  ({ setIsConnectorModalVisible, connectorAdded = false }) => {
+    return (
+      <EuiFlexGroup gutterSize="l" justifyContent="spaceAround">
+        <EuiFlexItem grow={false}>
+          <EuiCard
+            layout="horizontal"
+            icon={<EuiIcon size="xl" type={GenAiLogo} />}
+            title={connectorAdded ? i18n.CONNECTOR_ADDED_TITLE : i18n.ADD_CONNECTOR_TITLE}
+            isDisabled={connectorAdded}
+            description={
+              connectorAdded ? i18n.CONNECTOR_ADDED_DESCRIPTION : i18n.ADD_CONNECTOR_DESCRIPTION
+            }
+            onClick={() => setIsConnectorModalVisible(true)}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+);
+ConnectorButton.displayName = 'ConnectorButton';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx
new file mode 100644
index 0000000000000..3d6e4a3db29dc
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx
@@ -0,0 +1,180 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiButtonEmpty, EuiSuperSelect, EuiText } from '@elastic/eui';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import {
+  ActionConnector,
+  ActionTypeRegistryContract,
+} from '@kbn/triggers-actions-ui-plugin/public';
+
+import { HttpSetup } from '@kbn/core-http-browser';
+import { ActionConnectorProps } from '@kbn/triggers-actions-ui-plugin/public/types';
+import { ConnectorAddModal } from '@kbn/triggers-actions-ui-plugin/public/common/constants';
+import {
+  GEN_AI_CONNECTOR_ID,
+  OpenAiProviderType,
+} from '@kbn/stack-connectors-plugin/public/common';
+import { css } from '@emotion/react';
+import { Conversation } from '../../assistant_context/types';
+import { useLoadConnectors } from '../use_load_connectors';
+import { useConversation } from '../../assistant/use_conversation';
+import * as i18n from '../translations';
+import { useLoadActionTypes } from '../use_load_action_types';
+
+export const ADD_NEW_CONNECTOR = 'ADD_NEW_CONNECTOR';
+interface Props {
+  actionTypeRegistry: ActionTypeRegistryContract;
+  conversation: Conversation;
+  http: HttpSetup;
+  onConnectorModalVisibilityChange?: (isVisible: boolean) => void;
+}
+
+interface Config {
+  apiProvider: string;
+}
+
+export const ConnectorSelector: React.FC<Props> = React.memo(
+  ({ actionTypeRegistry, conversation, http, onConnectorModalVisibilityChange }) => {
+    const { setApiConfig } = useConversation();
+
+    // Connector Modal State
+    const [isConnectorModalVisible, setIsConnectorModalVisible] = useState<boolean>(false);
+    const { data: actionTypes } = useLoadActionTypes({ http });
+    const actionType = actionTypes?.find((at) => at.id === GEN_AI_CONNECTOR_ID) ?? {
+      enabledInConfig: true,
+      enabledInLicense: true,
+      minimumLicenseRequired: 'platinum',
+      supportedFeatureIds: ['general'],
+      id: '.gen-ai',
+      name: 'Generative AI',
+      enabled: true,
+    };
+
+    const {
+      data: connectors,
+      isLoading: isLoadingActionTypes,
+      isFetching: isFetchingActionTypes,
+      refetch: refetchConnectors,
+    } = useLoadConnectors({ http });
+    const isLoading = isLoadingActionTypes || isFetchingActionTypes;
+
+    const addNewConnectorOption = useMemo(() => {
+      return {
+        value: ADD_NEW_CONNECTOR,
+        inputDisplay: i18n.ADD_NEW_CONNECTOR,
+        dropdownDisplay: (
+          <React.Fragment key={ADD_NEW_CONNECTOR}>
+            <EuiButtonEmpty
+              iconType="plus"
+              size="xs"
+              css={css`
+                width: 100%;
+              `}
+            >
+              {i18n.ADD_NEW_CONNECTOR}
+            </EuiButtonEmpty>
+          </React.Fragment>
+        ),
+      };
+    }, []);
+
+    const connectorOptions = useMemo(() => {
+      return (
+        connectors?.map((connector) => {
+          const apiProvider: string | undefined = (
+            connector as ActionConnectorProps<Config, unknown>
+          )?.config?.apiProvider;
+          return {
+            value: connector.id,
+            inputDisplay: connector.name,
+            dropdownDisplay: (
+              <React.Fragment key={connector.id}>
+                <strong>{connector.name}</strong>
+                {apiProvider && (
+                  <EuiText size="s" color="subdued">
+                    <p>{apiProvider}</p>
+                  </EuiText>
+                )}
+              </React.Fragment>
+            ),
+          };
+        }) ?? []
+      );
+    }, [connectors]);
+
+    const cleanupAndCloseModal = useCallback(() => {
+      onConnectorModalVisibilityChange?.(false);
+      setIsConnectorModalVisible(false);
+    }, [onConnectorModalVisibilityChange]);
+
+    const onChange = useCallback(
+      (connectorId: string) => {
+        if (connectorId === ADD_NEW_CONNECTOR) {
+          onConnectorModalVisibilityChange?.(true);
+          setIsConnectorModalVisible(true);
+          return;
+        }
+
+        const apiProvider = (
+          connectors?.find((c) => c.id === connectorId) as ActionConnectorProps<Config, unknown>
+        )?.config.apiProvider as OpenAiProviderType;
+        setApiConfig({
+          conversationId: conversation.id,
+          apiConfig: {
+            ...conversation.apiConfig,
+            connectorId,
+            provider: apiProvider,
+          },
+        });
+      },
+      [
+        connectors,
+        conversation.apiConfig,
+        conversation.id,
+        setApiConfig,
+        onConnectorModalVisibilityChange,
+      ]
+    );
+
+    return (
+      <>
+        <EuiSuperSelect
+          options={[...connectorOptions, addNewConnectorOption]}
+          valueOfSelected={conversation.apiConfig.connectorId ?? ''}
+          onChange={onChange}
+          compressed={true}
+          isLoading={isLoading}
+          aria-label={i18n.CONNECTOR_SELECTOR_TITLE}
+        />
+        {isConnectorModalVisible && (
+          <ConnectorAddModal
+            actionType={actionType}
+            onClose={cleanupAndCloseModal}
+            postSaveEventHandler={(savedAction: ActionConnector) => {
+              setApiConfig({
+                conversationId: conversation.id,
+                apiConfig: {
+                  ...conversation.apiConfig,
+                  connectorId: savedAction.id,
+                  provider: (savedAction as ActionConnectorProps<Config, unknown>)?.config
+                    .apiProvider as OpenAiProviderType,
+                },
+              });
+              refetchConnectors?.();
+              cleanupAndCloseModal();
+            }}
+            actionTypeRegistry={actionTypeRegistry}
+          />
+        )}
+      </>
+    );
+  }
+);
+
+ConnectorSelector.displayName = 'ConnectorSelector';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/helpers.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/helpers.tsx
new file mode 100644
index 0000000000000..cb11ca51047f0
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/helpers.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { Conversation } from '../../assistant_context/types';
+
+/**
+ * Removes all presentation data from the conversation
+ * @param conversation
+ */
+export const clearPresentationData = (conversation: Conversation): Conversation => {
+  const { messages, ...restConversation } = conversation;
+  return {
+    ...restConversation,
+    messages: messages.map((message) => {
+      const { presentation, ...restMessages } = message;
+      return {
+        ...restMessages,
+        presentation: undefined,
+      };
+    }),
+  };
+};
+
+/**
+ * Returns true if the conversation has no presentation data
+ * @param conversation
+ */
+export const conversationHasNoPresentationData = (conversation: Conversation): boolean =>
+  !conversation.messages.some((message) => message.presentation !== undefined);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/index.tsx
new file mode 100644
index 0000000000000..6229419a397cf
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/index.tsx
@@ -0,0 +1,261 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useRef, useState } from 'react';
+import type { EuiCommentProps } from '@elastic/eui';
+import {
+  EuiAvatar,
+  EuiBadge,
+  EuiCommentList,
+  EuiMarkdownFormat,
+  EuiText,
+  EuiTextAlign,
+} from '@elastic/eui';
+// eslint-disable-next-line @kbn/eslint/module_migration
+import styled from 'styled-components';
+import { ConnectorAddModal } from '@kbn/triggers-actions-ui-plugin/public/common/constants';
+import type { ActionConnector } from '@kbn/triggers-actions-ui-plugin/public';
+
+import { HttpSetup } from '@kbn/core-http-browser';
+import { ActionTypeRegistryContract } from '@kbn/triggers-actions-ui-plugin/public';
+import {
+  GEN_AI_CONNECTOR_ID,
+  OpenAiProviderType,
+} from '@kbn/stack-connectors-plugin/public/common';
+import { ActionConnectorProps } from '@kbn/triggers-actions-ui-plugin/public/types';
+import { BASE_CONVERSATIONS, Conversation, Message } from '../../..';
+import { useLoadActionTypes } from '../use_load_action_types';
+import { StreamingText } from '../../assistant/streaming_text';
+import { ConnectorButton } from '../connector_button';
+import { useConversation } from '../../assistant/use_conversation';
+import { clearPresentationData, conversationHasNoPresentationData } from './helpers';
+import * as i18n from '../translations';
+import { useAssistantContext } from '../../assistant_context';
+import { WELCOME_CONVERSATION_TITLE } from '../../assistant/use_conversation/translations';
+
+const MESSAGE_INDEX_BEFORE_CONNECTOR = 2;
+
+const CommentsContainer = styled.div`
+  max-height: 600px;
+  overflow-y: scroll;
+`;
+
+const StyledCommentList = styled(EuiCommentList)`
+  margin-right: 20px;
+`;
+
+const ConnectorButtonWrapper = styled.div`
+  margin-top: 20px;
+`;
+
+const SkipEuiText = styled(EuiText)`
+  margin-top: 20px;
+`;
+
+interface Config {
+  apiProvider: string;
+}
+
+export interface ConnectorSetupProps {
+  isConnectorConfigured: boolean;
+  actionTypeRegistry: ActionTypeRegistryContract;
+  conversation?: Conversation;
+  http: HttpSetup;
+  onSetupComplete?: () => void;
+  refetchConnectors?: () => void;
+}
+
+export const ConnectorSetup: React.FC<ConnectorSetupProps> = React.memo<ConnectorSetupProps>(
+  ({
+    actionTypeRegistry,
+    conversation = BASE_CONVERSATIONS[WELCOME_CONVERSATION_TITLE],
+    http,
+    isConnectorConfigured = false,
+    onSetupComplete,
+    refetchConnectors,
+  }) => {
+    const { appendMessage, setApiConfig, setConversation } = useConversation();
+    const lastCommentRef = useRef<HTMLDivElement | null>(null);
+    const bottomRef = useRef<HTMLDivElement | null>(null);
+
+    // Access all conversations so we can add connector to all on initial setup
+    const { conversations } = useAssistantContext();
+
+    const [isConnectorModalVisible, setIsConnectorModalVisible] = useState<boolean>(false);
+    const [showAddConnectorButton, setShowAddConnectorButton] = useState<boolean>(() => {
+      // If no presentation data on messages, default to showing add connector button so it doesn't delay render and flash on screen
+      return conversationHasNoPresentationData(conversation);
+    });
+    const { data: actionTypes } = useLoadActionTypes({ http });
+
+    const actionType = actionTypes?.find((at) => at.id === GEN_AI_CONNECTOR_ID) ?? {
+      enabledInConfig: true,
+      enabledInLicense: true,
+      minimumLicenseRequired: 'platinum',
+      supportedFeatureIds: ['general'],
+      id: '.gen-ai',
+      name: 'Generative AI',
+      enabled: true,
+    };
+
+    // User constants
+    const userName = conversation.theme?.user?.name ?? i18n.CONNECTOR_SETUP_USER_YOU;
+    const assistantName =
+      conversation.theme?.assistant?.name ?? i18n.CONNECTOR_SETUP_USER_ASSISTANT;
+
+    const [currentMessageIndex, setCurrentMessageIndex] = useState(
+      // If connector is configured or conversation has already been replayed show all messages immediately
+      isConnectorConfigured || conversationHasNoPresentationData(conversation)
+        ? MESSAGE_INDEX_BEFORE_CONNECTOR
+        : 0
+    );
+
+    // Once streaming of previous message is complete, proceed to next message
+    const onHandleMessageStreamingComplete = useCallback(() => {
+      const timeoutId = setTimeout(
+        () => setCurrentMessageIndex(currentMessageIndex + 1),
+        conversation.messages[currentMessageIndex].presentation?.delay ?? 0
+      );
+
+      return () => clearTimeout(timeoutId);
+    }, [conversation.messages, currentMessageIndex]);
+
+    // Show button to add connector after last message has finished streaming
+    const onHandleLastMessageStreamingComplete = useCallback(() => {
+      setShowAddConnectorButton(true);
+      onSetupComplete?.();
+      setConversation({ conversation: clearPresentationData(conversation) });
+    }, [conversation, onSetupComplete, setConversation]);
+
+    // Show button to add connector after last message has finished streaming
+    const handleSkipSetup = useCallback(() => {
+      setCurrentMessageIndex(MESSAGE_INDEX_BEFORE_CONNECTOR);
+    }, [setCurrentMessageIndex]);
+
+    // Create EuiCommentProps[] from conversation messages
+    const commentBody = useCallback(
+      (message: Message, index: number, length: number) => {
+        // If timestamp is not set, set it to current time (will update conversation at end of setup)
+        if (conversation.messages[index].timestamp.length === 0) {
+          conversation.messages[index].timestamp = new Date().toLocaleString();
+        }
+        const isLastMessage = index === length - 1;
+        const enableStreaming =
+          (message.presentation?.stream ?? false) && currentMessageIndex !== length - 1;
+        return (
+          <StreamingText
+            text={message.content}
+            delay={enableStreaming ? 50 : 0}
+            onStreamingComplete={
+              isLastMessage
+                ? onHandleLastMessageStreamingComplete
+                : onHandleMessageStreamingComplete
+            }
+          >
+            {(streamedText, isStreamingComplete) => (
+              <EuiText>
+                <EuiMarkdownFormat className={`message-${index}`}>{streamedText}</EuiMarkdownFormat>
+                {isLastMessage && isStreamingComplete && <span ref={lastCommentRef} />}
+              </EuiText>
+            )}
+          </StreamingText>
+        );
+      },
+      [
+        conversation.messages,
+        currentMessageIndex,
+        onHandleLastMessageStreamingComplete,
+        onHandleMessageStreamingComplete,
+      ]
+    );
+
+    return (
+      <>
+        <CommentsContainer className="eui-scrollBar">
+          <StyledCommentList
+            comments={conversation.messages
+              .slice(0, currentMessageIndex + 1)
+              .map((message, index) => {
+                const isUser = message.role === 'user';
+
+                const commentProps: EuiCommentProps = {
+                  username: isUser ? userName : assistantName,
+                  children: commentBody(message, index, conversation.messages.length),
+                  timelineAvatar: (
+                    <EuiAvatar
+                      name={i18n.CONNECTOR_SETUP_USER_ASSISTANT}
+                      size="l"
+                      color="subdued"
+                      iconType={conversation?.theme?.assistant?.icon ?? 'logoElastic'}
+                    />
+                  ),
+                  timestamp: `${i18n.CONNECTOR_SETUP_TIMESTAMP_AT}: ${message.timestamp}`,
+                };
+                return commentProps;
+              })}
+          />
+          <div ref={bottomRef} />
+        </CommentsContainer>
+        {(showAddConnectorButton || isConnectorConfigured) && (
+          <ConnectorButtonWrapper>
+            <ConnectorButton
+              setIsConnectorModalVisible={setIsConnectorModalVisible}
+              connectorAdded={isConnectorConfigured}
+            />
+          </ConnectorButtonWrapper>
+        )}
+        {!showAddConnectorButton && (
+          <SkipEuiText color="subdued" size={'xs'}>
+            <EuiTextAlign textAlign="center">
+              <EuiBadge
+                color="hollow"
+                onClick={handleSkipSetup}
+                onClickAriaLabel={i18n.CONNECTOR_SETUP_SKIP}
+              >
+                {i18n.CONNECTOR_SETUP_SKIP}
+              </EuiBadge>
+            </EuiTextAlign>
+          </SkipEuiText>
+        )}
+
+        {isConnectorModalVisible && (
+          <ConnectorAddModal
+            actionType={actionType}
+            onClose={() => setIsConnectorModalVisible(false)}
+            postSaveEventHandler={(savedAction: ActionConnector) => {
+              // Add connector to all conversations
+              Object.values(conversations).forEach((c) => {
+                setApiConfig({
+                  conversationId: c.id,
+                  apiConfig: {
+                    ...c.apiConfig,
+                    connectorId: savedAction.id,
+                    provider: (savedAction as ActionConnectorProps<Config, unknown>)?.config
+                      .apiProvider as OpenAiProviderType,
+                  },
+                });
+              });
+
+              refetchConnectors?.();
+              setIsConnectorModalVisible(false);
+              appendMessage({
+                conversationId: conversation.id,
+                message: {
+                  role: 'assistant',
+                  content: 'Connector setup complete!',
+                  timestamp: new Date().toLocaleString(),
+                },
+              });
+            }}
+            actionTypeRegistry={actionTypeRegistry}
+          />
+        )}
+      </>
+    );
+  }
+);
+ConnectorSetup.displayName = 'ConnectorSetup';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/translations.ts
new file mode 100644
index 0000000000000..c9eb7797e362c
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/translations.ts
@@ -0,0 +1,102 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const LOAD_ACTIONS_ERROR_MESSAGE = i18n.translate(
+  'xpack.elasticAssistant.connectors.useLoadActionTypes.errorMessage',
+  {
+    defaultMessage:
+      'Welcome to your Elastic Assistant! I am your 100% open-source portal into your Elastic Life. ',
+  }
+);
+
+export const LOAD_CONNECTORS_ERROR_MESSAGE = i18n.translate(
+  'xpack.elasticAssistant.connectors.useLoadConnectors.errorMessage',
+  {
+    defaultMessage:
+      'Welcome to your Elastic Assistant! I am your 100% open-source portal into your Elastic Life. ',
+  }
+);
+
+export const WELCOME_SECURITY = i18n.translate(
+  'xpack.elasticAssistant.content.prompts.welcome.welcomeSecurityPrompt',
+  {
+    defaultMessage:
+      'Welcome to your Elastic Assistant! I am your 100% open-source portal into Elastic Security. ',
+  }
+);
+
+export const CONNECTOR_SELECTOR_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.connectors.connectorSelector.ariaLabel',
+  {
+    defaultMessage: 'Conversation Selector',
+  }
+);
+
+export const ADD_NEW_CONNECTOR = i18n.translate(
+  'xpack.elasticAssistant.assistant.connectors.connectorSelector.newConnectorOptions',
+  {
+    defaultMessage: 'Add new Connector...',
+  }
+);
+
+export const ADD_CONNECTOR_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.connectors.addConnectorButton.title',
+  {
+    defaultMessage: 'Add Generative AI Connector',
+  }
+);
+
+export const ADD_CONNECTOR_DESCRIPTION = i18n.translate(
+  'xpack.elasticAssistant.assistant.connectors.addConnectorButton.description',
+  {
+    defaultMessage: 'Configure a connector to continue the conversation',
+  }
+);
+
+export const CONNECTOR_ADDED_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.connectors.addConnectorButton.connectorAddedTitle',
+  {
+    defaultMessage: 'Generative AI Connector added!',
+  }
+);
+
+export const CONNECTOR_ADDED_DESCRIPTION = i18n.translate(
+  'xpack.elasticAssistant.assistant.connectors.addConnectorButton.connectorAddedDescription',
+  {
+    defaultMessage: 'Ready to continue the conversation...',
+  }
+);
+
+export const CONNECTOR_SETUP_USER_YOU = i18n.translate(
+  'xpack.elasticAssistant.assistant.connectors.setup.userYouTitle',
+  {
+    defaultMessage: 'You',
+  }
+);
+
+export const CONNECTOR_SETUP_USER_ASSISTANT = i18n.translate(
+  'xpack.elasticAssistant.assistant.connectors.setup.userAssistantTitle',
+  {
+    defaultMessage: 'Assistant',
+  }
+);
+
+export const CONNECTOR_SETUP_TIMESTAMP_AT = i18n.translate(
+  'xpack.elasticAssistant.assistant.connectors.setup.timestampAtTitle',
+  {
+    defaultMessage: 'at',
+  }
+);
+
+export const CONNECTOR_SETUP_SKIP = i18n.translate(
+  'xpack.elasticAssistant.assistant.connectors.setup.skipTitle',
+  {
+    defaultMessage: 'Click to skip...',
+  }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/use_load_action_types/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/use_load_action_types/index.tsx
new file mode 100644
index 0000000000000..796ece694664a
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/use_load_action_types/index.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import type { UserProfile } from '@kbn/security-plugin/common';
+import type { ServerError } from '@kbn/cases-plugin/public/types';
+import { loadActionTypes } from '@kbn/triggers-actions-ui-plugin/public/common/constants';
+import type { IHttpFetchError } from '@kbn/core-http-browser';
+
+import type { ActionType } from '@kbn/actions-plugin/common';
+import { HttpSetup } from '@kbn/core-http-browser';
+import { IToasts } from '@kbn/core-notifications-browser';
+import { GeneralConnectorFeatureId } from '@kbn/actions-plugin/common';
+import * as i18n from '../translations';
+
+/**
+ * Cache expiration in ms -- 1 minute, useful if connector is deleted/access removed
+ */
+const STALE_TIME = 1000 * 60;
+const QUERY_KEY = ['elastic-assistant, load-action-types'];
+
+export interface Props {
+  http: HttpSetup;
+  toasts?: IToasts;
+}
+
+export const useLoadActionTypes = ({
+  http,
+  toasts,
+}: Props): UseQueryResult<ActionType[], IHttpFetchError> => {
+  return useQuery(
+    QUERY_KEY,
+
+    async () => {
+      const queryResult = await loadActionTypes({ http, featureId: GeneralConnectorFeatureId });
+      const sortedData = queryResult.sort((a, b) => a.name.localeCompare(b.name));
+
+      return sortedData;
+    },
+    {
+      retry: false,
+      keepPreviousData: true,
+      staleTime: STALE_TIME,
+      onError: (error: ServerError) => {
+        if (error.name !== 'AbortError') {
+          toasts?.addError(
+            error.body && error.body.message ? new Error(error.body.message) : error,
+            {
+              title: i18n.LOAD_ACTIONS_ERROR_MESSAGE,
+            }
+          );
+        }
+      },
+    }
+  );
+};
+
+export type UseSuggestUserProfiles = UseQueryResult<UserProfile[], ServerError>;
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/use_load_connectors/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/use_load_connectors/index.tsx
new file mode 100644
index 0000000000000..9f67285ac3dc9
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/use_load_connectors/index.tsx
@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import type { ServerError } from '@kbn/cases-plugin/public/types';
+import { loadAllActions as loadConnectors } from '@kbn/triggers-actions-ui-plugin/public/common/constants';
+import type { IHttpFetchError } from '@kbn/core-http-browser';
+import type { ActionConnector } from '@kbn/triggers-actions-ui-plugin/public';
+import { HttpSetup } from '@kbn/core-http-browser';
+import { IToasts } from '@kbn/core-notifications-browser';
+import * as i18n from '../translations';
+
+/**
+ * Cache expiration in ms -- 1 minute, useful if connector is deleted/access removed
+ */
+// const STALE_TIME = 1000 * 60;
+const QUERY_KEY = ['elastic-assistant, load-connectors'];
+
+export interface Props {
+  http: HttpSetup;
+  toasts?: IToasts;
+}
+
+export const useLoadConnectors = ({
+  http,
+  toasts,
+}: Props): UseQueryResult<ActionConnector[], IHttpFetchError> => {
+  return useQuery(
+    QUERY_KEY,
+    async () => {
+      const queryResult = await loadConnectors({ http });
+      const filteredData = queryResult.filter(
+        (connector) => !connector.isMissingSecrets && connector.actionTypeId === '.gen-ai'
+      );
+
+      return filteredData;
+    },
+    {
+      retry: false,
+      keepPreviousData: true,
+      // staleTime: STALE_TIME,
+      onError: (error: ServerError) => {
+        if (error.name !== 'AbortError') {
+          toasts?.addError(
+            error.body && error.body.message ? new Error(error.body.message) : error,
+            {
+              title: i18n.LOAD_CONNECTORS_ERROR_MESSAGE,
+            }
+          );
+        }
+      },
+    }
+  );
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/content/prompts/system/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/content/prompts/system/translations.ts
new file mode 100644
index 0000000000000..dda0c9844c33f
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/content/prompts/system/translations.ts
@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const YOU_ARE_A_HELPFUL_EXPERT_ASSISTANT = i18n.translate(
+  'xpack.elasticAssistant.assistant.content.prompts.system.youAreAHelpfulExpertAssistant',
+  {
+    defaultMessage:
+      'You are a helpful, expert assistant who only answers questions about Elastic Security.',
+  }
+);
+
+export const USE_THE_FOLLOWING_CONTEXT_TO_ANSWER = i18n.translate(
+  'xpack.elasticAssistant.assistant.content.prompts.system.useTheFollowingContextToAnswer',
+  {
+    defaultMessage: 'Use the following context to answer questions:',
+  }
+);
+
+export const IF_YOU_DONT_KNOW_THE_ANSWER = i18n.translate(
+  'xpack.elasticAssistant.assistant.content.prompts.system.ifYouDontKnowTheAnswer',
+  {
+    defaultMessage: 'Do not answer questions unrelated to Elastic Security.',
+  }
+);
+
+export const SUPERHERO_PERSONALITY = i18n.translate(
+  'xpack.elasticAssistant.assistant.content.prompts.system.superheroPersonality',
+  {
+    defaultMessage:
+      'Provide the most detailed and relevant answer possible, as if you were relaying this information back to a cyber security expert.',
+  }
+);
+
+export const DEFAULT_SYSTEM_PROMPT_NON_I18N = `${YOU_ARE_A_HELPFUL_EXPERT_ASSISTANT} ${IF_YOU_DONT_KNOW_THE_ANSWER}
+${USE_THE_FOLLOWING_CONTEXT_TO_ANSWER}`;
+
+export const DEFAULT_SYSTEM_PROMPT_NAME = i18n.translate(
+  'xpack.elasticAssistant.assistant.content.prompts.system.defaultSystemPromptName',
+  {
+    defaultMessage: 'default system prompt',
+  }
+);
+
+export const SUPERHERO_SYSTEM_PROMPT_NON_I18N = `${YOU_ARE_A_HELPFUL_EXPERT_ASSISTANT} ${IF_YOU_DONT_KNOW_THE_ANSWER}
+${SUPERHERO_PERSONALITY}
+${USE_THE_FOLLOWING_CONTEXT_TO_ANSWER}`;
+
+export const SUPERHERO_SYSTEM_PROMPT_NAME = i18n.translate(
+  'xpack.elasticAssistant.assistant.content.prompts.system.superheroSystemPromptName',
+  {
+    defaultMessage: 'Enhanced system prompt',
+  }
+);
+
+export const SYSTEM_PROMPT_CONTEXT_NON_I18N = (context: string) => {
+  return `CONTEXT:\n"""\n${context}\n"""`;
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/content/prompts/user/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/content/prompts/user/translations.ts
new file mode 100644
index 0000000000000..28cda1f9414a8
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/content/prompts/user/translations.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const THEN_SUMMARIZE_SUGGESTED_KQL_AND_EQL_QUERIES = i18n.translate(
+  'xpack.elasticAssistant.assistant.content.prompts.user.thenSummarizeSuggestedKqlAndEqlQueries',
+  {
+    defaultMessage:
+      'Evaluate the event from the context above and format your output neatly in markdown syntax for my Elastic Security case.',
+  }
+);
+
+export const FINALLY_SUGGEST_INVESTIGATION_GUIDE_AND_FORMAT_AS_MARKDOWN = i18n.translate(
+  'xpack.elasticAssistant.assistant.content.prompts.user.finallySuggestInvestigationGuideAndFormatAsMarkdown',
+  {
+    defaultMessage: `Add your description, recommended actions and bulleted triage steps. Use the MITRE ATT&CK data provided to add more context and recommendations from MITRE, and hyperlink to the relevant pages on MITRE\'s website. Be sure to include the user and host risk score data from the context. Your response should include steps that point to Elastic Security specific features, including endpoint response actions, the Elastic Agent OSQuery manager integration (with example osquery queries), timelines and entity analytics and link to all the relevant Elastic Security documentation.`,
+  }
+);
+
+export const EXPLAIN_THEN_SUMMARIZE_SUGGEST_INVESTIGATION_GUIDE_NON_I18N = `${THEN_SUMMARIZE_SUGGESTED_KQL_AND_EQL_QUERIES}
+${FINALLY_SUGGEST_INVESTIGATION_GUIDE_AND_FORMAT_AS_MARKDOWN}`;
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/content/prompts/welcome/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/content/prompts/welcome/translations.ts
new file mode 100644
index 0000000000000..6a6b1253ca2b1
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/content/prompts/welcome/translations.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const WELCOME_GENERAL = i18n.translate(
+  'xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneralPrompt',
+  {
+    defaultMessage:
+      'Welcome to your Elastic Assistant! I am your 100% open-code portal into your Elastic life. In time, I will be able to answer questions and provide assistance across all your information in Elastic, and oh-so much more. Till then, I hope this early preview will open your mind to the possibilities of what we can create when we work together, in the open. Cheers!',
+  }
+);
+
+export const WELCOME_GENERAL_2 = i18n.translate(
+  'xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneral2Prompt',
+  {
+    defaultMessage:
+      "First things first, we'll need to set up a Generative AI Connector to get this chat experience going! With the Generative AI Connector, you'll be able to configure access to either an Azure OpenAI Service or OpenAI API account, but you better believe you'll be able to deploy your own models within your Elastic Cloud instance and use those here in the future... 😉",
+  }
+);
+
+export const WELCOME_GENERAL_3 = i18n.translate(
+  'xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneral3Prompt',
+  {
+    defaultMessage:
+      'Go ahead and click the add connector button below to continue the conversation!',
+  }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/mock/prompt_context/index.ts b/x-pack/packages/kbn-elastic-assistant/impl/mock/prompt_context/index.ts
new file mode 100644
index 0000000000000..289fff2c633e5
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/mock/prompt_context/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { PromptContext } from '../../assistant/prompt_context/types';
+
+export const mockAlertPromptContext: PromptContext = {
+  category: 'alert',
+  description: 'An alert pill description',
+  getPromptContext: () => Promise.resolve('alert data'),
+  id: 'mock-alert-prompt-context-1',
+  tooltip: 'Add this alert as context',
+};
+
+export const mockEventPromptContext: PromptContext = {
+  category: 'event',
+  description: 'An event pill description',
+  getPromptContext: () => Promise.resolve('event data'),
+  id: 'mock-event-prompt-context-1',
+  tooltip: 'Add this event as context',
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/mock/system_prompt/index.ts b/x-pack/packages/kbn-elastic-assistant/impl/mock/system_prompt/index.ts
new file mode 100644
index 0000000000000..bfd0187b5ede4
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/mock/system_prompt/index.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { Prompt } from '../../assistant/types';
+
+export const mockSystemPrompt: Prompt = {
+  id: 'mock-system-prompt-1',
+  content: 'You are a helpful, expert assistant who answers questions about Elastic Security.',
+  name: 'Mock system prompt',
+  promptType: 'system',
+};
+
+export const mockSuperheroSystemPrompt: Prompt = {
+  id: 'mock-superhero-system-prompt-1',
+  content: `You are a helpful, expert assistant who answers questions about Elastic Security.
+You have the personality of a mutant superhero who says "bub" a lot.`,
+  name: 'Mock superhero system prompt',
+  promptType: 'system',
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx b/x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx
new file mode 100644
index 0000000000000..9ceda348795ae
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { httpServiceMock } from '@kbn/core-http-browser-mocks';
+import { I18nProvider } from '@kbn/i18n-react';
+import { actionTypeRegistryMock } from '@kbn/triggers-actions-ui-plugin/public/application/action_type_registry.mock';
+import { euiDarkVars } from '@kbn/ui-theme';
+import React from 'react';
+// eslint-disable-next-line @kbn/eslint/module_migration
+import { ThemeProvider } from 'styled-components';
+
+import { AssistantProvider } from '../../assistant_context';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+window.scrollTo = jest.fn();
+
+/** A utility for wrapping children in the providers required to run tests */
+export const TestProvidersComponent: React.FC<Props> = ({ children }) => {
+  const actionTypeRegistry = actionTypeRegistryMock.create();
+  const mockGetInitialConversations = jest.fn(() => ({}));
+  const mockGetComments = jest.fn(() => []);
+  const mockHttp = httpServiceMock.createStartContract({ basePath: '/test' });
+
+  return (
+    <I18nProvider>
+      <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
+        <AssistantProvider
+          actionTypeRegistry={actionTypeRegistry}
+          augmentMessageCodeBlocks={jest.fn()}
+          getComments={mockGetComments}
+          getInitialConversations={mockGetInitialConversations}
+          setConversations={jest.fn()}
+          http={mockHttp}
+        >
+          {children}
+        </AssistantProvider>
+      </ThemeProvider>
+    </I18nProvider>
+  );
+};
+
+TestProvidersComponent.displayName = 'TestProvidersComponent';
+
+export const TestProviders = React.memo(TestProvidersComponent);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/mock/user_prompt/index.ts b/x-pack/packages/kbn-elastic-assistant/impl/mock/user_prompt/index.ts
new file mode 100644
index 0000000000000..5bc23b0d680e3
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/mock/user_prompt/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { Prompt } from '../../assistant/types';
+
+export const mockUserPrompt: Prompt = {
+  id: 'mock-user-prompt-1',
+  content: `Explain the meaning from the context above, then summarize a list of suggested Elasticsearch KQL and EQL queries.
+Finally, suggest an investigation guide, and format it as markdown.`,
+  name: 'Mock user prompt',
+  promptType: 'user',
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/new_chat/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/new_chat/index.test.tsx
new file mode 100644
index 0000000000000..26327c523ce6b
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/new_chat/index.test.tsx
@@ -0,0 +1,82 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Props, NewChat } from '.';
+
+const mockUseAssistantOverlay = {
+  showAssistantOverlay: jest.fn(),
+};
+jest.mock('../assistant/use_assistant_overlay', () => ({
+  useAssistantOverlay: () => mockUseAssistantOverlay,
+}));
+
+const defaultProps: Props = {
+  category: 'alert',
+  description: 'Test description',
+  getPromptContext: () => Promise.resolve('Test prompt context'),
+  tooltip: 'Test tooltip',
+};
+
+describe('NewChat', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the default New Chat button with a discuss icon', () => {
+    render(<NewChat {...defaultProps} />);
+
+    const newChatButton = screen.getByTestId('newChat');
+
+    expect(newChatButton.querySelector('[data-euiicon-type="discuss"]')).toBeInTheDocument();
+  });
+
+  it('renders the default "New Chat" text when children are NOT provided', () => {
+    render(<NewChat {...defaultProps} />);
+
+    const newChatButton = screen.getByTestId('newChat');
+
+    expect(newChatButton.textContent).toContain('New chat');
+  });
+
+  it('renders custom children', () => {
+    render(<NewChat {...defaultProps}>{'🪄✨'}</NewChat>);
+
+    const newChatButton = screen.getByTestId('newChat');
+
+    expect(newChatButton.textContent).toContain('🪄✨');
+  });
+
+  it('renders custom icons', () => {
+    render(<NewChat {...defaultProps} iconType="help" />);
+
+    const newChatButton = screen.getByTestId('newChat');
+
+    expect(newChatButton.querySelector('[data-euiicon-type="help"]')).toBeInTheDocument();
+  });
+
+  it('does NOT render an icon when iconType is null', () => {
+    render(<NewChat {...defaultProps} iconType={null} />);
+
+    const newChatButton = screen.getByTestId('newChat');
+
+    expect(newChatButton.querySelector('.euiButtonContent__icon')).not.toBeInTheDocument();
+  });
+
+  it('calls showAssistantOverlay on click', () => {
+    render(<NewChat {...defaultProps} />);
+
+    const newChatButton = screen.getByTestId('newChat');
+
+    userEvent.click(newChatButton);
+
+    expect(mockUseAssistantOverlay.showAssistantOverlay).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/new_chat/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/new_chat/index.tsx
new file mode 100644
index 0000000000000..3f6b7afc14c71
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/new_chat/index.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiButtonEmpty } from '@elastic/eui';
+import React, { useCallback, useMemo } from 'react';
+
+import { PromptContext } from '../assistant/prompt_context/types';
+import { useAssistantOverlay } from '../assistant/use_assistant_overlay';
+
+import * as i18n from './translations';
+
+export type Props = Omit<PromptContext, 'id'> & {
+  children?: React.ReactNode;
+  /** Optionally automatically add this context to a conversation when the assistant is shown */
+  conversationId?: string;
+  /** Defaults to `discuss`. If null, the button will not have an icon */
+  iconType?: string | null;
+  /** Optionally specify a well known ID, or default to a UUID */
+  promptContextId?: string;
+};
+
+const NewChatComponent: React.FC<Props> = ({
+  category,
+  children = i18n.NEW_CHAT,
+  conversationId,
+  description,
+  getPromptContext,
+  iconType,
+  promptContextId,
+  suggestedUserPrompt,
+  tooltip,
+}) => {
+  const { showAssistantOverlay } = useAssistantOverlay(
+    category,
+    conversationId ?? null,
+    description,
+    getPromptContext,
+    promptContextId ?? null,
+    suggestedUserPrompt,
+    tooltip
+  );
+
+  const showOverlay = useCallback(() => {
+    showAssistantOverlay(true);
+  }, [showAssistantOverlay]);
+
+  const icon = useMemo(() => {
+    if (iconType === null) {
+      return undefined;
+    }
+
+    return iconType ?? 'discuss';
+  }, [iconType]);
+
+  return useMemo(
+    () => (
+      <EuiButtonEmpty data-test-subj="newChat" onClick={showOverlay} iconType={icon}>
+        {children}
+      </EuiButtonEmpty>
+    ),
+    [children, icon, showOverlay]
+  );
+};
+
+NewChatComponent.displayName = 'NewChatComponent';
+
+/**
+ * `NewChat` displays a _New chat_ icon button, providing all the context
+ * necessary to start a new chat. You may optionally style the button icon,
+ * or override the default _New chat_ text with custom content, like `🪄✨`
+ *
+ * USE THIS WHEN: All the data necessary to start a new chat is available
+ * in the same part of the React tree as the _New chat_ button.
+ */
+export const NewChat = React.memo(NewChatComponent);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/new_chat/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/new_chat/translations.ts
new file mode 100644
index 0000000000000..5bc87dc1a261c
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/new_chat/translations.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const NEW_CHAT = i18n.translate('xpack.elasticAssistant.assistant.newChat.newChatButton', {
+  defaultMessage: 'New chat',
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/new_chat_by_id/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/new_chat_by_id/index.test.tsx
new file mode 100644
index 0000000000000..c2ff10fa22a20
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/new_chat_by_id/index.test.tsx
@@ -0,0 +1,81 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { NewChatById } from '.';
+
+const mockUseAssistantContext = {
+  showAssistantOverlay: jest.fn(),
+};
+jest.mock('../assistant_context', () => ({
+  useAssistantContext: () => mockUseAssistantContext,
+}));
+
+describe('NewChatById', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the default New Chat button with a discuss icon', () => {
+    render(<NewChatById />);
+
+    const newChatButton = screen.getByTestId('newChatById');
+
+    expect(newChatButton.querySelector('[data-euiicon-type="discuss"]')).toBeInTheDocument();
+  });
+
+  it('renders the default "New Chat" text when children are NOT provided', () => {
+    render(<NewChatById />);
+
+    const newChatButton = screen.getByTestId('newChatById');
+
+    expect(newChatButton.textContent).toContain('New chat');
+  });
+
+  it('renders custom children', async () => {
+    render(<NewChatById>{'🪄✨'}</NewChatById>);
+
+    const newChatButton = screen.getByTestId('newChatById');
+
+    expect(newChatButton.textContent).toContain('🪄✨');
+  });
+
+  it('renders custom icons', async () => {
+    render(<NewChatById iconType="help" />);
+
+    const newChatButton = screen.getByTestId('newChatById');
+
+    expect(newChatButton.querySelector('[data-euiicon-type="help"]')).toBeInTheDocument();
+  });
+
+  it('does NOT render an icon when iconType is null', () => {
+    render(<NewChatById iconType={null} />);
+
+    const newChatButton = screen.getByTestId('newChatById');
+
+    expect(newChatButton.querySelector('.euiButtonContent__icon')).not.toBeInTheDocument();
+  });
+
+  it('calls showAssistantOverlay on click', () => {
+    const conversationId = 'test-conversation-id';
+    const promptContextId = 'test-prompt-context-id';
+
+    render(<NewChatById conversationId={conversationId} promptContextId={promptContextId} />);
+    const newChatButton = screen.getByTestId('newChatById');
+
+    userEvent.click(newChatButton);
+
+    expect(mockUseAssistantContext.showAssistantOverlay).toHaveBeenCalledWith({
+      conversationId,
+      promptContextId,
+      showOverlay: true,
+    });
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/new_chat_by_id/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/new_chat_by_id/index.tsx
new file mode 100644
index 0000000000000..721d40118695a
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/new_chat_by_id/index.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiButtonEmpty } from '@elastic/eui';
+import React, { useCallback, useMemo } from 'react';
+
+import { useAssistantContext } from '../assistant_context';
+
+import * as i18n from './translations';
+
+export interface Props {
+  children?: React.ReactNode;
+  /** Optionally automatically add this context to a conversation when the assistant is shown */
+  conversationId?: string;
+  /** Defaults to `discuss`. If null, the button will not have an icon */
+  iconType?: string | null;
+  /** Optionally specify a well known ID, or default to a UUID */
+  promptContextId?: string;
+}
+
+const NewChatByIdComponent: React.FC<Props> = ({
+  children = i18n.NEW_CHAT,
+  conversationId,
+  iconType,
+  promptContextId,
+}) => {
+  const { showAssistantOverlay } = useAssistantContext();
+
+  // proxy show / hide calls to assistant context, using our internal prompt context id:
+  const showOverlay = useCallback(
+    () =>
+      showAssistantOverlay({
+        conversationId,
+        promptContextId,
+        showOverlay: true,
+      }),
+    [conversationId, promptContextId, showAssistantOverlay]
+  );
+
+  const icon = useMemo(() => {
+    if (iconType === null) {
+      return undefined;
+    }
+
+    return iconType ?? 'discuss';
+  }, [iconType]);
+
+  return useMemo(
+    () => (
+      <EuiButtonEmpty data-test-subj="newChatById" iconType={icon} onClick={showOverlay}>
+        {children}
+      </EuiButtonEmpty>
+    ),
+    [children, icon, showOverlay]
+  );
+};
+
+NewChatByIdComponent.displayName = 'NewChatByIdComponent';
+
+/**
+ * `NewChatByID` displays a _New chat_ icon button by providing only the `promptContextId`
+ * of a context that was (already) registered by the `useAssistantOverlay` hook. You may
+ * optionally style the button icon, or override the default _New chat_ text with custom
+ * content, like {'🪄✨'}
+ *
+ * USE THIS WHEN: all the data necessary to start a new chat is NOT available
+ * in the same part of the React tree as the _New chat_ button. When paired
+ * with the `useAssistantOverlay` hook, this option enables context to be be
+ * registered where the data is available, and then the _New chat_ button can be displayed
+ * in another part of the tree.
+ */
+export const NewChatById = React.memo(NewChatByIdComponent);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/new_chat_by_id/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/new_chat_by_id/translations.ts
new file mode 100644
index 0000000000000..373aae6297eee
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/new_chat_by_id/translations.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const NEW_CHAT = i18n.translate(
+  'xpack.elasticAssistant.assistant.newChatById.newChatByIdButton',
+  {
+    defaultMessage: 'New chat',
+  }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/index.ts b/x-pack/packages/kbn-elastic-assistant/index.ts
new file mode 100644
index 0000000000000..b238d070af61c
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/index.ts
@@ -0,0 +1,120 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+// To integrate the assistant into a Kibana app, perform the following three steps:
+
+// Step 1: Wrap your Kibana app in the `AssistantProvider` component. This typically
+// happens in the root of your app. Optionally provide a custom title for the assistant:
+
+/** provides context (from the app) to the assistant, and injects Kibana services, like `http` */
+export { AssistantProvider } from './impl/assistant_context';
+
+// Step 2: Add the `AssistantOverlay` component to your app. This component displays the assistant
+// overlay in a modal, bound to a shortcut key:
+
+/** modal overlay for Elastic Assistant conversations */
+export { AssistantOverlay } from './impl/assistant/assistant_overlay';
+
+// In addition to the `AssistantOverlay`, or as an alternative, you may use the `Assistant` component
+// to display the assistant without the modal overlay:
+
+/** this component renders the Assistant without the modal overlay to, for example, render it in a Timeline tab */
+export { Assistant } from './impl/assistant';
+
+// Step 3: Wherever you want to bring context into the assistant, use the any combination of the following
+// components and hooks:
+// - `NewChat` component
+// - `NewChatById` component
+// - `useAssistantOverlay` hook
+
+/**
+ * `NewChat` displays a _New chat_ icon button, providing all the context
+ * necessary to start a new chat. You may optionally style the button icon,
+ * or override the default _New chat_ text with custom content, like `🪄✨`
+ *
+ * USE THIS WHEN: All the data necessary to start a new chat is available
+ * in the same part of the React tree as the _New chat_ button.
+ */
+export { NewChat } from './impl/new_chat';
+
+/**
+ * `NewChatByID` displays a _New chat_ icon button by providing only the `promptContextId`
+ * of a context that was (already) registered by the `useAssistantOverlay` hook. You may
+ * optionally style the button icon, or override the default _New chat_ text with custom
+ * content, like {'🪄✨'}
+ *
+ * USE THIS WHEN: all the data necessary to start a new chat is NOT available
+ * in the same part of the React tree as the _New chat_ button. When paired
+ * with the `useAssistantOverlay` hook, this option enables context to be be
+ * registered where the data is available, and then the _New chat_ button can be displayed
+ * in another part of the tree.
+ */
+export { NewChatById } from './impl/new_chat_by_id';
+
+/**
+ * `useAssistantOverlay` is a hook that registers context with the assistant overlay, and
+ * returns an optional `showAssistantOverlay` function to display the assistant overlay.
+ * As an alterative to using the `showAssistantOverlay` returned from this hook, you may
+ * use the `NewChatById` component and pass it the `promptContextId` returned by this hook.
+ *
+ * USE THIS WHEN: You want to register context in one part of the tree, and then show
+ * a _New chat_ button in another part of the tree without passing around the data, or when
+ * you want to build a custom `New chat` button with features not not provided by the
+ * `NewChat` component.
+ */
+export { useAssistantOverlay } from './impl/assistant/use_assistant_overlay';
+
+/** a helper that enriches content returned from a query with action buttons */
+export { analyzeMarkdown } from './impl/assistant/use_conversation/helpers';
+
+// Sample content is exported with the following:
+/** sample content */
+export { BASE_CONVERSATIONS } from './impl/assistant/use_conversation/sample_conversations';
+
+/** i18n translations of system prompts */
+export * as SYSTEM_PROMPTS from './impl/content/prompts/system/translations';
+
+/** i18n translations of user prompts */
+export * as USER_PROMPTS from './impl/content/prompts/user/translations';
+
+export type {
+  /** for rendering results in a code block */
+  CodeBlockDetails,
+  /** the type of query that will be executed for a code block */
+  QueryType,
+} from './impl/assistant/use_conversation/helpers';
+
+/** serialized conversations */
+export type { Conversation, Message } from './impl/assistant_context/types';
+
+/**
+ * This interface is used to pass context to the assistant,
+ * for the purpose of building prompts. Examples of context include:
+ * - a single alert
+ * - multiple alerts
+ * - a single event
+ * - multiple events
+ * - markdown
+ * - csv
+ * - anything else that the LLM can interpret
+ */
+export type { PromptContext } from './impl/assistant/prompt_context/types';
+
+/**
+ * This interface is used to pass a default or base set of contexts to the Elastic Assistant when
+ * initializing it. This is used to provide 'category' options when users create Quick Prompts.
+ * Also, useful for collating all of a solutions' prompts in one place.
+ *
+ * e.g. see Security Solution's x-pack/plugins/security_solution/public/assistant/prompt_contexts/index.tsx
+ */
+export type { PromptContextTemplate } from './impl/assistant/prompt_context/types';
+
+/**
+ * This interface is used to pass a default or base set of Quick Prompts to the Elastic Assistant that
+ * can be displayed when corresponding PromptContext's are registered.
+ */
+export type { QuickPrompt } from './impl/assistant/quick_prompts/types';
diff --git a/x-pack/packages/kbn-elastic-assistant/jest.config.js b/x-pack/packages/kbn-elastic-assistant/jest.config.js
new file mode 100644
index 0000000000000..46d4ca8b91eb4
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/jest.config.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+module.exports = {
+  coverageDirectory:
+    '<rootDir>/target/kibana-coverage/jest/x-pack/packages/kbn_elastic_assistant_impl',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: [
+    '<rootDir>/x-pack/packages/kbn-elastic-assistant/impl/**/*.{ts,tsx}',
+    '!<rootDir>/x-pack/packages/kbn-elastic-assistant/impl/{__test__,__snapshots__,__examples__,*mock*,tests,test_helpers,integration_tests,types}/**/*',
+    '!<rootDir>/x-pack/packages/kbn-elastic-assistant/impl/*mock*.{ts,tsx}',
+    '!<rootDir>/x-pack/packages/kbn-elastic-assistant/impl/*.test.{ts,tsx}',
+    '!<rootDir>/x-pack/packages/kbn-elastic-assistant/impl/*.d.ts',
+    '!<rootDir>/x-pack/packages/kbn-elastic-assistant/impl/*.config.ts',
+  ],
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/x-pack/packages/kbn-elastic-assistant'],
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/kibana.jsonc b/x-pack/packages/kbn-elastic-assistant/kibana.jsonc
new file mode 100644
index 0000000000000..9371fcdfe3a8a
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/kibana.jsonc
@@ -0,0 +1,5 @@
+{
+  "id": "@kbn/elastic-assistant",
+  "owner": "@elastic/security-solution",
+  "type": "shared-browser"
+}
diff --git a/x-pack/packages/kbn-elastic-assistant/package.json b/x-pack/packages/kbn-elastic-assistant/package.json
new file mode 100644
index 0000000000000..7bc41b6dffe64
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/elastic-assistant",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0"
+}
\ No newline at end of file
diff --git a/x-pack/packages/kbn-elastic-assistant/setup_tests.ts b/x-pack/packages/kbn-elastic-assistant/setup_tests.ts
new file mode 100644
index 0000000000000..72e0edd0d07f7
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/setup_tests.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import '@testing-library/jest-dom';
diff --git a/x-pack/packages/kbn-elastic-assistant/tsconfig.json b/x-pack/packages/kbn-elastic-assistant/tsconfig.json
new file mode 100644
index 0000000000000..f460832b040d7
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": [
+    "@kbn/core-http-browser",
+    "@kbn/i18n",
+    "@kbn/stack-connectors-plugin",
+    "@kbn/triggers-actions-ui-plugin",
+    "@kbn/core-http-browser-mocks",
+    "@kbn/security-plugin",
+    "@kbn/cases-plugin",
+    "@kbn/actions-plugin",
+    "@kbn/core-notifications-browser",
+    "@kbn/i18n-react",
+    "@kbn/ui-theme",
+  ]
+}
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/index.test.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/index.test.tsx
index 3278ec3a1def3..71e63d361a0bc 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/index.test.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/index.test.tsx
@@ -55,6 +55,7 @@ const defaultProps: Props = {
   formatNumber,
   getGroupByFieldsOnClick: jest.fn(),
   ilmPhases,
+  isAssistantEnabled: true,
   openCreateCaseFlyout: jest.fn(),
   patternIndexNames,
   patternRollups,
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/index.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/index.tsx
index 3c996dd095dc8..45bb717c52706 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/index.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/index.tsx
@@ -41,6 +41,7 @@ export interface Props {
     groupByField1: string;
   };
   ilmPhases: string[];
+  isAssistantEnabled: boolean;
   openCreateCaseFlyout: ({
     comments,
     headerContent,
@@ -69,6 +70,7 @@ const DataQualityDetailsComponent: React.FC<Props> = ({
   formatNumber,
   getGroupByFieldsOnClick,
   ilmPhases,
+  isAssistantEnabled,
   openCreateCaseFlyout,
   patternIndexNames,
   patternRollups,
@@ -105,6 +107,7 @@ const DataQualityDetailsComponent: React.FC<Props> = ({
         formatNumber={formatNumber}
         getGroupByFieldsOnClick={getGroupByFieldsOnClick}
         ilmPhases={ilmPhases}
+        isAssistantEnabled={isAssistantEnabled}
         openCreateCaseFlyout={openCreateCaseFlyout}
         patterns={patterns}
         theme={theme}
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/indices_details/index.test.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/indices_details/index.test.tsx
index 2b21154d70b3a..8251b16c389b0 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/indices_details/index.test.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/indices_details/index.test.tsx
@@ -55,6 +55,7 @@ const defaultProps: Props = {
   formatNumber,
   getGroupByFieldsOnClick: jest.fn(),
   ilmPhases,
+  isAssistantEnabled: true,
   openCreateCaseFlyout: jest.fn(),
   patternIndexNames,
   patternRollups,
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/indices_details/index.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/indices_details/index.tsx
index 9b59a78430e1c..3f9ef7575b385 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/indices_details/index.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/indices_details/index.tsx
@@ -39,6 +39,7 @@ export interface Props {
     groupByField1: string;
   };
   ilmPhases: string[];
+  isAssistantEnabled: boolean;
   openCreateCaseFlyout: ({
     comments,
     headerContent,
@@ -69,6 +70,7 @@ const IndicesDetailsComponent: React.FC<Props> = ({
   formatNumber,
   getGroupByFieldsOnClick,
   ilmPhases,
+  isAssistantEnabled,
   openCreateCaseFlyout,
   patternIndexNames,
   patternRollups,
@@ -90,6 +92,7 @@ const IndicesDetailsComponent: React.FC<Props> = ({
           getGroupByFieldsOnClick={getGroupByFieldsOnClick}
           ilmPhases={ilmPhases}
           indexNames={patternIndexNames[pattern]}
+          isAssistantEnabled={isAssistantEnabled}
           openCreateCaseFlyout={openCreateCaseFlyout}
           pattern={pattern}
           patternRollup={patternRollups[pattern]}
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/index.test.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/index.test.tsx
index 242229870de25..6e9c5861e6bae 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/index.test.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/index.test.tsx
@@ -35,6 +35,7 @@ describe('IndexInvalidValues', () => {
           formatNumber={formatNumber}
           getGroupByFieldsOnClick={jest.fn()}
           ilmPhases={[]}
+          isAssistantEnabled={true}
           lastChecked={''}
           openCreateCaseFlyout={jest.fn()}
           patterns={[]}
@@ -63,6 +64,7 @@ describe('IndexInvalidValues', () => {
               formatNumber={formatNumber}
               getGroupByFieldsOnClick={jest.fn()}
               ilmPhases={ilmPhases}
+              isAssistantEnabled={true}
               lastChecked={''}
               openCreateCaseFlyout={jest.fn()}
               patterns={patterns}
@@ -88,6 +90,7 @@ describe('IndexInvalidValues', () => {
             formatNumber={formatNumber}
             getGroupByFieldsOnClick={jest.fn()}
             ilmPhases={ilmPhases}
+            isAssistantEnabled={true}
             lastChecked={''}
             openCreateCaseFlyout={jest.fn()}
             patterns={patterns}
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/index.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/index.tsx
index 69de3b8c110e5..ca43cf1e7d40c 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/index.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/index.tsx
@@ -40,6 +40,7 @@ interface Props {
     groupByField1: string;
   };
   ilmPhases: string[];
+  isAssistantEnabled: boolean;
   lastChecked: string;
   openCreateCaseFlyout: ({
     comments,
@@ -60,6 +61,7 @@ const BodyComponent: React.FC<Props> = ({
   formatNumber,
   getGroupByFieldsOnClick,
   ilmPhases,
+  isAssistantEnabled,
   lastChecked,
   openCreateCaseFlyout,
   patterns,
@@ -112,6 +114,7 @@ const BodyComponent: React.FC<Props> = ({
           formatNumber={formatNumber}
           getGroupByFieldsOnClick={getGroupByFieldsOnClick}
           ilmPhases={ilmPhases}
+          isAssistantEnabled={isAssistantEnabled}
           openCreateCaseFlyout={openCreateCaseFlyout}
           patterns={patterns}
           patternIndexNames={patternIndexNames}
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/index_properties/index.test.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/index_properties/index.test.tsx
index c578ec8c91f96..ef0868fe3233b 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/index_properties/index.test.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/index_properties/index.test.tsx
@@ -111,6 +111,7 @@ const defaultProps: Props = {
   getGroupByFieldsOnClick: jest.fn(),
   ilmPhase: 'hot',
   indexName: 'auditbeat-custom-index-1',
+  isAssistantEnabled: true,
   openCreateCaseFlyout: jest.fn(),
   pattern,
   patternRollup,
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/index_properties/index.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/index_properties/index.tsx
index ca9eda507f8dd..ac16b9dfbcccf 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/index_properties/index.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/index_properties/index.tsx
@@ -60,6 +60,7 @@ export interface Props {
   };
   ilmPhase: IlmPhase | undefined;
   indexName: string;
+  isAssistantEnabled: boolean;
   openCreateCaseFlyout: ({
     comments,
     headerContent,
@@ -82,6 +83,7 @@ const IndexPropertiesComponent: React.FC<Props> = ({
   getGroupByFieldsOnClick,
   ilmPhase,
   indexName,
+  isAssistantEnabled,
   openCreateCaseFlyout,
   pattern,
   patternRollup,
@@ -143,6 +145,7 @@ const IndexPropertiesComponent: React.FC<Props> = ({
         docsCount,
         getGroupByFieldsOnClick,
         ilmPhase,
+        isAssistantEnabled,
         indexName,
         onAddToNewCase,
         partitionedFieldMetadata: partitionedFieldMetadata ?? EMPTY_METADATA,
@@ -161,6 +164,7 @@ const IndexPropertiesComponent: React.FC<Props> = ({
       getGroupByFieldsOnClick,
       ilmPhase,
       indexName,
+      isAssistantEnabled,
       onAddToNewCase,
       partitionedFieldMetadata,
       pattern,
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/pattern/index.test.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/pattern/index.test.tsx
index d9b002a63dc68..d06866544a6bf 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/pattern/index.test.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/pattern/index.test.tsx
@@ -46,6 +46,7 @@ const defaultProps = {
   getGroupByFieldsOnClick: jest.fn(),
   ilmPhases: ['hot', 'warm', 'unmanaged'],
   indexNames: undefined,
+  isAssistantEnabled: true,
   openCreateCaseFlyout: jest.fn(),
   patternRollup: undefined,
   selectedIndex: null,
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/pattern/index.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/pattern/index.tsx
index cb430d75ef12e..3213c1c1dbef9 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/pattern/index.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/pattern/index.tsx
@@ -76,6 +76,7 @@ interface Props {
   };
   ilmPhases: string[];
   indexNames: string[] | undefined;
+  isAssistantEnabled: boolean;
   openCreateCaseFlyout: ({
     comments,
     headerContent,
@@ -106,6 +107,7 @@ const PatternComponent: React.FC<Props> = ({
   getGroupByFieldsOnClick,
   indexNames,
   ilmPhases,
+  isAssistantEnabled,
   openCreateCaseFlyout,
   pattern,
   patternRollup,
@@ -150,6 +152,7 @@ const PatternComponent: React.FC<Props> = ({
                 getGroupByFieldsOnClick={getGroupByFieldsOnClick}
                 ilmPhase={ilmExplain != null ? getIlmPhase(ilmExplain[indexName]) : undefined}
                 indexName={indexName}
+                isAssistantEnabled={isAssistantEnabled}
                 openCreateCaseFlyout={openCreateCaseFlyout}
                 pattern={pattern}
                 patternRollup={patternRollup}
@@ -168,6 +171,7 @@ const PatternComponent: React.FC<Props> = ({
       formatNumber,
       getGroupByFieldsOnClick,
       ilmExplain,
+      isAssistantEnabled,
       itemIdToExpandedRowMap,
       openCreateCaseFlyout,
       pattern,
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.test.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.test.tsx
index c0dc6a8aaafe2..fe436309dae78 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.test.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.test.tsx
@@ -77,6 +77,7 @@ describe('helpers', () => {
           getGroupByFieldsOnClick: jest.fn(),
           ilmPhase: 'unmanaged',
           indexName: 'auditbeat-custom-index-1',
+          isAssistantEnabled: true,
           onAddToNewCase: jest.fn(),
           partitionedFieldMetadata: mockPartitionedFieldMetadata,
           pattern: 'auditbeat-*',
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.tsx
index c0cbebd45cb8d..c04a7a861d17f 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.tsx
@@ -66,6 +66,7 @@ export const getTabs = ({
   getGroupByFieldsOnClick,
   ilmPhase,
   indexName,
+  isAssistantEnabled,
   onAddToNewCase,
   partitionedFieldMetadata,
   pattern,
@@ -94,6 +95,7 @@ export const getTabs = ({
   };
   ilmPhase: IlmPhase | undefined;
   indexName: string;
+  isAssistantEnabled: boolean;
   onAddToNewCase: (markdownComments: string[]) => void;
   partitionedFieldMetadata: PartitionedFieldMetadata;
   pattern: string;
@@ -113,6 +115,7 @@ export const getTabs = ({
         getGroupByFieldsOnClick={getGroupByFieldsOnClick}
         ilmPhase={ilmPhase}
         indexName={indexName}
+        isAssistantEnabled={isAssistantEnabled}
         onAddToNewCase={onAddToNewCase}
         partitionedFieldMetadata={partitionedFieldMetadata}
         pattern={pattern}
@@ -140,6 +143,7 @@ export const getTabs = ({
         formatNumber={formatNumber}
         ilmPhase={ilmPhase}
         indexName={indexName}
+        isAssistantEnabled={isAssistantEnabled}
         onAddToNewCase={onAddToNewCase}
         partitionedFieldMetadata={partitionedFieldMetadata}
         patternDocsCount={patternDocsCount}
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/incompatible_tab/index.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/incompatible_tab/index.tsx
index 2fa4fcdb4f8ed..e0e26f3928bde 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/incompatible_tab/index.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/incompatible_tab/index.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { NewChat } from '@kbn/elastic-assistant';
 import {
   copyToClipboard,
   EuiButton,
@@ -33,8 +34,14 @@ import {
   INCOMPATIBLE_FIELD_MAPPINGS_TABLE_TITLE,
   INCOMPATIBLE_FIELD_VALUES_TABLE_TITLE,
 } from './translations';
-import { COPIED_RESULTS_TOAST_TITLE } from '../../../translations';
+import {
+  COPIED_RESULTS_TOAST_TITLE,
+  DATA_QUALITY_PROMPT_CONTEXT_PILL,
+  DATA_QUALITY_PROMPT_CONTEXT_PILL_TOOLTIP,
+  DATA_QUALITY_SUGGESTED_USER_PROMPT,
+} from '../../../translations';
 import type { IlmPhase, PartitionedFieldMetadata } from '../../../types';
+import { DATA_QUALITY_DASHBOARD_CONVERSATION_ID } from '../summary_tab/callout_summary/translations';
 
 interface Props {
   addSuccessToast: (toast: { title: string }) => void;
@@ -44,6 +51,7 @@ interface Props {
   formatNumber: (value: number | undefined) => string;
   ilmPhase: IlmPhase | undefined;
   indexName: string;
+  isAssistantEnabled: boolean;
   onAddToNewCase: (markdownComments: string[]) => void;
   partitionedFieldMetadata: PartitionedFieldMetadata;
   patternDocsCount: number;
@@ -58,6 +66,7 @@ const IncompatibleTabComponent: React.FC<Props> = ({
   formatNumber,
   ilmPhase,
   indexName,
+  isAssistantEnabled,
   onAddToNewCase,
   partitionedFieldMetadata,
   patternDocsCount,
@@ -108,6 +117,8 @@ const IncompatibleTabComponent: React.FC<Props> = ({
     });
   }, [addSuccessToast, markdownComments]);
 
+  const getPromptContext = useCallback(async () => markdownComments.join('\n'), [markdownComments]);
+
   return (
     <div data-test-subj="incompatibleTab">
       {showInvalidCallout(partitionedFieldMetadata.incompatible) ? (
@@ -129,6 +140,19 @@ const IncompatibleTabComponent: React.FC<Props> = ({
                   {i18n.COPY_TO_CLIPBOARD}
                 </CopyToClipboardButton>
               </EuiFlexItem>
+
+              {isAssistantEnabled && (
+                <EuiFlexItem grow={false}>
+                  <NewChat
+                    category="data-quality-dashboard"
+                    conversationId={DATA_QUALITY_DASHBOARD_CONVERSATION_ID}
+                    description={DATA_QUALITY_PROMPT_CONTEXT_PILL(indexName)}
+                    getPromptContext={getPromptContext}
+                    suggestedUserPrompt={DATA_QUALITY_SUGGESTED_USER_PROMPT}
+                    tooltip={DATA_QUALITY_PROMPT_CONTEXT_PILL_TOOLTIP}
+                  />
+                </EuiFlexItem>
+              )}
             </EuiFlexGroup>
           </IncompatibleCallout>
 
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/callout_summary/index.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/callout_summary/index.tsx
index 6d36fdd50370a..ba3aebc501010 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/callout_summary/index.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/callout_summary/index.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { NewChat } from '@kbn/elastic-assistant';
 import { copyToClipboard, EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
 
@@ -15,8 +16,14 @@ import { getMarkdownComments } from '../helpers';
 import { showInvalidCallout } from '../../incompatible_tab/helpers';
 import { CopyToClipboardButton } from '../../styles';
 import * as i18n from '../../../index_properties/translations';
-import { COPIED_RESULTS_TOAST_TITLE } from '../../../../translations';
+import {
+  COPIED_RESULTS_TOAST_TITLE,
+  DATA_QUALITY_PROMPT_CONTEXT_PILL,
+  DATA_QUALITY_PROMPT_CONTEXT_PILL_TOOLTIP,
+  DATA_QUALITY_SUGGESTED_USER_PROMPT,
+} from '../../../../translations';
 import type { IlmPhase, PartitionedFieldMetadata } from '../../../../types';
+import { DATA_QUALITY_DASHBOARD_CONVERSATION_ID } from './translations';
 
 interface Props {
   addSuccessToast: (toast: { title: string }) => void;
@@ -26,6 +33,7 @@ interface Props {
   formatNumber: (value: number | undefined) => string;
   ilmPhase: IlmPhase | undefined;
   indexName: string;
+  isAssistantEnabled: boolean;
   onAddToNewCase: (markdownComment: string[]) => void;
   partitionedFieldMetadata: PartitionedFieldMetadata;
   pattern: string;
@@ -41,6 +49,7 @@ const CalloutSummaryComponent: React.FC<Props> = ({
   formatNumber,
   ilmPhase,
   indexName,
+  isAssistantEnabled,
   onAddToNewCase,
   partitionedFieldMetadata,
   pattern,
@@ -86,6 +95,8 @@ const CalloutSummaryComponent: React.FC<Props> = ({
     });
   }, [addSuccessToast, markdownComments]);
 
+  const getPromptContext = useCallback(async () => markdownComments.join('\n'), [markdownComments]);
+
   const showActions =
     showInvalidCallout(partitionedFieldMetadata.incompatible) ||
     showMissingTimestampCallout(partitionedFieldMetadata.ecsCompliant);
@@ -122,6 +133,19 @@ const CalloutSummaryComponent: React.FC<Props> = ({
                 {i18n.COPY_TO_CLIPBOARD}
               </CopyToClipboardButton>
             </EuiFlexItem>
+
+            {isAssistantEnabled && (
+              <EuiFlexItem grow={false}>
+                <NewChat
+                  conversationId={DATA_QUALITY_DASHBOARD_CONVERSATION_ID}
+                  category="data-quality-dashboard"
+                  description={DATA_QUALITY_PROMPT_CONTEXT_PILL(indexName)}
+                  getPromptContext={getPromptContext}
+                  suggestedUserPrompt={DATA_QUALITY_SUGGESTED_USER_PROMPT}
+                  tooltip={DATA_QUALITY_PROMPT_CONTEXT_PILL_TOOLTIP}
+                />
+              </EuiFlexItem>
+            )}
           </EuiFlexGroup>
 
           <EuiSpacer size="s" />
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/callout_summary/translations.ts b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/callout_summary/translations.ts
new file mode 100644
index 0000000000000..07337268b7d8c
--- /dev/null
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/callout_summary/translations.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const DATA_QUALITY_DASHBOARD_CONVERSATION_ID = i18n.translate(
+  'securitySolutionPackages.ecsDataQualityDashboard.incompatibleTab.dataQualityDashboardConversationId',
+  {
+    defaultMessage: 'Data Quality dashboard',
+  }
+);
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/index.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/index.tsx
index c830ac2f6c7be..8f27a409c7455 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/index.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/index.tsx
@@ -42,6 +42,7 @@ interface Props {
   };
   ilmPhase: IlmPhase | undefined;
   indexName: string;
+  isAssistantEnabled: boolean;
   onAddToNewCase: (markdownComments: string[]) => void;
   partitionedFieldMetadata: PartitionedFieldMetadata;
   pattern: string;
@@ -60,6 +61,7 @@ const SummaryTabComponent: React.FC<Props> = ({
   getGroupByFieldsOnClick,
   ilmPhase,
   indexName,
+  isAssistantEnabled,
   onAddToNewCase,
   partitionedFieldMetadata,
   pattern,
@@ -77,6 +79,7 @@ const SummaryTabComponent: React.FC<Props> = ({
       docsCount={docsCount}
       ilmPhase={ilmPhase}
       indexName={indexName}
+      isAssistantEnabled={isAssistantEnabled}
       onAddToNewCase={onAddToNewCase}
       partitionedFieldMetadata={partitionedFieldMetadata}
       pattern={pattern}
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/index.test.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/index.test.tsx
index 17f7e830750af..44bc2458990e9 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/index.test.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/index.test.tsx
@@ -27,6 +27,7 @@ describe('DataQualityPanel', () => {
             getGroupByFieldsOnClick={jest.fn()}
             httpFetch={jest.fn()}
             ilmPhases={ilmPhases}
+            isAssistantEnabled={true}
             lastChecked={''}
             openCreateCaseFlyout={jest.fn()}
             patterns={[]}
@@ -60,6 +61,7 @@ describe('DataQualityPanel', () => {
             getGroupByFieldsOnClick={jest.fn()}
             httpFetch={jest.fn()}
             ilmPhases={ilmPhases}
+            isAssistantEnabled={true}
             lastChecked={''}
             openCreateCaseFlyout={jest.fn()}
             patterns={[]}
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/index.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/index.tsx
index 758cad54f7caa..026be1f05d0d8 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/index.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/index.tsx
@@ -42,6 +42,7 @@ interface Props {
   };
   httpFetch: HttpHandler;
   ilmPhases: string[];
+  isAssistantEnabled: boolean;
   lastChecked: string;
   openCreateCaseFlyout: ({
     comments,
@@ -64,6 +65,7 @@ const DataQualityPanelComponent: React.FC<Props> = ({
   getGroupByFieldsOnClick,
   httpFetch,
   ilmPhases,
+  isAssistantEnabled,
   lastChecked,
   openCreateCaseFlyout,
   patterns,
@@ -91,6 +93,7 @@ const DataQualityPanelComponent: React.FC<Props> = ({
         formatNumber={formatNumber}
         getGroupByFieldsOnClick={getGroupByFieldsOnClick}
         ilmPhases={ilmPhases}
+        isAssistantEnabled={isAssistantEnabled}
         lastChecked={lastChecked}
         openCreateCaseFlyout={openCreateCaseFlyout}
         patterns={patterns}
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/mock/test_providers/test_providers.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/mock/test_providers/test_providers.tsx
index 3aba964c68783..7c9933942b270 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/mock/test_providers/test_providers.tsx
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/mock/test_providers/test_providers.tsx
@@ -5,7 +5,9 @@
  * 2.0.
  */
 
+import { actionTypeRegistryMock } from '@kbn/triggers-actions-ui-plugin/public/application/action_type_registry.mock';
 import { httpServiceMock } from '@kbn/core-http-browser-mocks';
+import { AssistantProvider } from '@kbn/elastic-assistant';
 import { I18nProvider } from '@kbn/i18n-react';
 import { euiDarkVars } from '@kbn/ui-theme';
 import React from 'react';
@@ -22,11 +24,24 @@ window.scrollTo = jest.fn();
 /** A utility for wrapping children in the providers required to run tests */
 export const TestProvidersComponent: React.FC<Props> = ({ children }) => {
   const http = httpServiceMock.createSetupContract({ basePath: '/test' });
+  const actionTypeRegistry = actionTypeRegistryMock.create();
+  const mockGetInitialConversations = jest.fn(() => ({}));
+  const mockGetComments = jest.fn(() => []);
+  const mockHttp = httpServiceMock.createStartContract({ basePath: '/test' });
 
   return (
     <I18nProvider>
       <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
-        <DataQualityProvider httpFetch={http.fetch}>{children}</DataQualityProvider>
+        <AssistantProvider
+          actionTypeRegistry={actionTypeRegistry}
+          augmentMessageCodeBlocks={jest.fn()}
+          getComments={mockGetComments}
+          getInitialConversations={mockGetInitialConversations}
+          setConversations={jest.fn()}
+          http={mockHttp}
+        >
+          <DataQualityProvider httpFetch={http.fetch}>{children}</DataQualityProvider>
+        </AssistantProvider>
       </ThemeProvider>
     </I18nProvider>
   );
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/translations.ts b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/translations.ts
index 18c14d5036b6b..f0e6ab6fba137 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/translations.ts
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/translations.ts
@@ -63,6 +63,19 @@ export const COPY_TO_CLIPBOARD = i18n.translate(
   }
 );
 
+export const DATA_QUALITY_PROMPT_CONTEXT_PILL = (indexName: string) =>
+  i18n.translate('securitySolutionPackages.ecsDataQualityDashboard.dataQualityPromptContextPill', {
+    values: { indexName },
+    defaultMessage: 'Data Quality ({indexName})',
+  });
+
+export const DATA_QUALITY_PROMPT_CONTEXT_PILL_TOOLTIP = i18n.translate(
+  'securitySolutionPackages.ecsDataQualityDashboard.dataQualityPromptContextPillTooltip',
+  {
+    defaultMessage: 'Add this Data Quality report as context',
+  }
+);
+
 /** The subtitle displayed on the Data Quality dashboard */
 export const DATA_QUALITY_SUBTITLE: string = i18n.translate(
   'securitySolutionPackages.ecsDataQualityDashboard.securitySolutionPackages.ecsDataQualityDashboardSubtitle',
@@ -71,6 +84,13 @@ export const DATA_QUALITY_SUBTITLE: string = i18n.translate(
   }
 );
 
+export const DATA_QUALITY_SUGGESTED_USER_PROMPT = i18n.translate(
+  'securitySolutionPackages.ecsDataQualityDashboard.dataQualitySuggestedUserPrompt',
+  {
+    defaultMessage: 'Explain how to fix issues step by step, and provide API calls.',
+  }
+);
+
 export const DATA_QUALITY_TITLE = i18n.translate(
   'securitySolutionPackages.ecsDataQualityDashboard.securitySolutionPackages.ecsDataQualityDashboardTitle',
   {
diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/tsconfig.json b/x-pack/packages/security-solution/ecs_data_quality_dashboard/tsconfig.json
index 8e6edbf56af82..b033af7aa5a0c 100644
--- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/tsconfig.json
+++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/tsconfig.json
@@ -22,5 +22,7 @@
     "@kbn/ui-theme",
     "@kbn/core-http-browser",
     "@kbn/core-http-browser-mocks",
+    "@kbn/elastic-assistant",
+    "@kbn/triggers-actions-ui-plugin",
   ]
 }
diff --git a/x-pack/plugins/security_solution/common/experimental_features.ts b/x-pack/plugins/security_solution/common/experimental_features.ts
index 11bd87ae7cc82..906011ff2cac7 100644
--- a/x-pack/plugins/security_solution/common/experimental_features.ts
+++ b/x-pack/plugins/security_solution/common/experimental_features.ts
@@ -108,6 +108,11 @@ export const allowedExperimentalValues = Object.freeze({
    */
   securityFlyoutEnabled: false,
 
+  /**
+   * Enables the Elastic Security Assistant and generative AI connector (.gen-ai)
+   */
+  assistantEnabled: false,
+
   /**
    * Keep DEPRECATED experimental flags that are documented to prevent failed upgrades.
    * https://www.elastic.co/guide/en/security/current/user-risk-score.html
@@ -129,8 +134,6 @@ export const allowedExperimentalValues = Object.freeze({
    *
    **/
   newUserDetailsFlyout: false,
-  /* enables the Security Assistant and generative AI connector (.gen-ai) */
-  assistantEnabled: false,
 });
 
 type ExperimentalConfigKeys = Array<keyof ExperimentalFeatures>;
diff --git a/x-pack/plugins/security_solution/common/types/timeline/index.ts b/x-pack/plugins/security_solution/common/types/timeline/index.ts
index ba4a8a13501fa..31b7dd22c8d21 100644
--- a/x-pack/plugins/security_solution/common/types/timeline/index.ts
+++ b/x-pack/plugins/security_solution/common/types/timeline/index.ts
@@ -444,6 +444,7 @@ export enum TimelineTabs {
   pinned = 'pinned',
   eql = 'eql',
   session = 'session',
+  securityAssistant = 'securityAssistant',
 }
 
 /**
diff --git a/x-pack/plugins/security_solution/kibana.jsonc b/x-pack/plugins/security_solution/kibana.jsonc
index a929c15b48641..b279ea77e0bac 100644
--- a/x-pack/plugins/security_solution/kibana.jsonc
+++ b/x-pack/plugins/security_solution/kibana.jsonc
@@ -43,6 +43,7 @@
       "controls",
       "dataViews",
       "savedObjectsManagement",
+      "stackConnectors",
     ],
     "optionalPlugins": [
       "cloudExperiments",
diff --git a/x-pack/plugins/security_solution/public/app/app.tsx b/x-pack/plugins/security_solution/public/app/app.tsx
index a986d21d2f356..a1aa0ecfb813d 100644
--- a/x-pack/plugins/security_solution/public/app/app.tsx
+++ b/x-pack/plugins/security_solution/public/app/app.tsx
@@ -5,9 +5,10 @@
  * 2.0.
  */
 
+import { AssistantProvider } from '@kbn/elastic-assistant';
 import type { History } from 'history';
 import type { FC } from 'react';
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 import type { Store, Action } from 'redux';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 
@@ -17,18 +18,24 @@ import type { AppLeaveHandler, AppMountParameters } from '@kbn/core/public';
 
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { CellActionsProvider } from '@kbn/cell-actions';
+
+import { getComments } from '../assistant/get_comments';
+import { augmentMessageCodeBlocks, LOCAL_STORAGE_KEY } from '../assistant/helpers';
+import { useConversationStore } from '../assistant/use_conversation_store';
 import { ManageUserInfo } from '../detections/components/user_info';
-import { DEFAULT_DARK_MODE, APP_NAME } from '../../common/constants';
+import { DEFAULT_DARK_MODE, APP_NAME, APP_ID } from '../../common/constants';
 import { ErrorToastDispatcher } from '../common/components/error_toast_dispatcher';
 import { MlCapabilitiesProvider } from '../common/components/ml/permissions/ml_capabilities_provider';
 import { GlobalToaster, ManageGlobalToaster } from '../common/components/toasters';
 import { KibanaContextProvider, useKibana, useUiSetting$ } from '../common/lib/kibana';
 import type { State } from '../common/store';
-
+import { ASSISTANT_TITLE } from './translations';
 import type { StartServices } from '../types';
 import { PageRouter } from './routes';
 import { UserPrivilegesProvider } from '../common/components/user_privileges/user_privileges_context';
 import { ReactQueryClientProvider } from '../common/containers/query_client/query_client_provider';
+import { PROMPT_CONTEXTS } from '../assistant/content/prompt_contexts';
+import { BASE_SECURITY_QUICK_PROMPTS } from '../assistant/content/quick_prompts';
 
 interface StartAppComponent {
   children: React.ReactNode;
@@ -50,8 +57,18 @@ const StartAppComponent: FC<StartAppComponent> = ({
   const {
     i18n,
     application: { capabilities },
+    http,
+    triggersActionsUi: { actionTypeRegistry },
     uiActions,
   } = useKibana().services;
+
+  const { conversations, setConversations } = useConversationStore();
+  const getInitialConversation = useCallback(() => {
+    return conversations;
+  }, [conversations]);
+
+  const nameSpace = `${APP_ID}.${LOCAL_STORAGE_KEY}`;
+
   const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
   return (
     <EuiErrorBoundary>
@@ -60,25 +77,38 @@ const StartAppComponent: FC<StartAppComponent> = ({
           <ReduxStoreProvider store={store}>
             <KibanaThemeProvider theme$={theme$}>
               <EuiThemeProvider darkMode={darkMode}>
-                <MlCapabilitiesProvider>
-                  <UserPrivilegesProvider kibanaCapabilities={capabilities}>
-                    <ManageUserInfo>
-                      <ReactQueryClientProvider>
-                        <CellActionsProvider
-                          getTriggerCompatibleActions={uiActions.getTriggerCompatibleActions}
-                        >
-                          <PageRouter
-                            history={history}
-                            onAppLeave={onAppLeave}
-                            setHeaderActionMenu={setHeaderActionMenu}
+                <AssistantProvider
+                  actionTypeRegistry={actionTypeRegistry}
+                  augmentMessageCodeBlocks={augmentMessageCodeBlocks}
+                  basePromptContexts={Object.values(PROMPT_CONTEXTS)}
+                  baseQuickPrompts={BASE_SECURITY_QUICK_PROMPTS}
+                  getInitialConversations={getInitialConversation}
+                  getComments={getComments}
+                  http={http}
+                  nameSpace={nameSpace}
+                  setConversations={setConversations}
+                  title={ASSISTANT_TITLE}
+                >
+                  <MlCapabilitiesProvider>
+                    <UserPrivilegesProvider kibanaCapabilities={capabilities}>
+                      <ManageUserInfo>
+                        <ReactQueryClientProvider>
+                          <CellActionsProvider
+                            getTriggerCompatibleActions={uiActions.getTriggerCompatibleActions}
                           >
-                            {children}
-                          </PageRouter>
-                        </CellActionsProvider>
-                      </ReactQueryClientProvider>
-                    </ManageUserInfo>
-                  </UserPrivilegesProvider>
-                </MlCapabilitiesProvider>
+                            <PageRouter
+                              history={history}
+                              onAppLeave={onAppLeave}
+                              setHeaderActionMenu={setHeaderActionMenu}
+                            >
+                              {children}
+                            </PageRouter>
+                          </CellActionsProvider>
+                        </ReactQueryClientProvider>
+                      </ManageUserInfo>
+                    </UserPrivilegesProvider>
+                  </MlCapabilitiesProvider>
+                </AssistantProvider>
               </EuiThemeProvider>
             </KibanaThemeProvider>
             <ErrorToastDispatcher />
diff --git a/x-pack/plugins/security_solution/public/app/translations.ts b/x-pack/plugins/security_solution/public/app/translations.ts
index 3ea42f8229ea4..1c75cb7bba595 100644
--- a/x-pack/plugins/security_solution/public/app/translations.ts
+++ b/x-pack/plugins/security_solution/public/app/translations.ts
@@ -7,6 +7,10 @@
 
 import { i18n } from '@kbn/i18n';
 
+export const ASSISTANT_TITLE = i18n.translate('xpack.securitySolution.assistant.title', {
+  defaultMessage: 'Elastic Security Assistant',
+});
+
 export const OVERVIEW = i18n.translate('xpack.securitySolution.navigation.overview', {
   defaultMessage: 'Overview',
 });
diff --git a/x-pack/plugins/security_solution/public/assistant/comment_actions/index.tsx b/x-pack/plugins/security_solution/public/assistant/comment_actions/index.tsx
new file mode 100644
index 0000000000000..6a782f6d58d84
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/assistant/comment_actions/index.tsx
@@ -0,0 +1,106 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiButtonIcon, EuiCopy, EuiToolTip } from '@elastic/eui';
+import { CommentType } from '@kbn/cases-plugin/common';
+import type { Message } from '@kbn/elastic-assistant';
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { useKibana, useToasts } from '../../common/lib/kibana';
+import type { Note } from '../../common/lib/note';
+import { appActions } from '../../common/store/actions';
+import { TimelineId } from '../../../common/types';
+import { updateAndAssociateNode } from '../../timelines/components/notes/helpers';
+import { timelineActions } from '../../timelines/store/timeline';
+import * as i18n from './translations';
+
+interface Props {
+  message: Message;
+}
+
+const CommentActionsComponent: React.FC<Props> = ({ message }) => {
+  const toasts = useToasts();
+  const { cases } = useKibana().services;
+  const dispatch = useDispatch();
+
+  const associateNote = useCallback(
+    (noteId: string) => dispatch(timelineActions.addNote({ id: TimelineId.active, noteId })),
+    [dispatch]
+  );
+
+  const updateNote = useCallback(
+    (note: Note) => dispatch(appActions.updateNote({ note })),
+    [dispatch]
+  );
+
+  const onAddNoteToTimeline = useCallback(() => {
+    updateAndAssociateNode({
+      associateNote,
+      newNote: message.content,
+      updateNewNote: () => {},
+      updateNote,
+      user: '', // TODO: attribute assistant messages
+    });
+
+    toasts.addSuccess(i18n.ADDED_NOTE_TO_TIMELINE);
+  }, [associateNote, message.content, toasts, updateNote]);
+
+  // Attach to case support
+  const selectCaseModal = cases.hooks.useCasesAddToExistingCaseModal({
+    onClose: () => {},
+    onSuccess: () => {},
+  });
+
+  const onAddToExistingCase = useCallback(() => {
+    selectCaseModal.open({
+      getAttachments: () => [
+        {
+          comment: message.content,
+          type: CommentType.user,
+          owner: i18n.ELASTIC_SECURITY_ASSISTANT,
+        },
+      ],
+    });
+  }, [message.content, selectCaseModal]);
+
+  return (
+    <>
+      <EuiToolTip position="top" content={i18n.ADD_NOTE_TO_TIMELINE}>
+        <EuiButtonIcon
+          aria-label={i18n.ADD_MESSAGE_CONTENT_AS_TIMELINE_NOTE}
+          color="primary"
+          iconType="editorComment"
+          onClick={onAddNoteToTimeline}
+        />
+      </EuiToolTip>
+
+      <EuiToolTip position="top" content={i18n.ADD_TO_CASE_EXISTING_CASE}>
+        <EuiButtonIcon
+          aria-label={i18n.ADD_TO_CASE_EXISTING_CASE}
+          color="primary"
+          iconType="addDataApp"
+          onClick={onAddToExistingCase}
+        />
+      </EuiToolTip>
+
+      <EuiToolTip position="top" content={i18n.COPY_TO_CLIPBOARD}>
+        <EuiCopy textToCopy={message.content}>
+          {(copy) => (
+            <EuiButtonIcon
+              aria-label={i18n.COPY_TO_CLIPBOARD}
+              color="primary"
+              iconType="copyClipboard"
+              onClick={copy}
+            />
+          )}
+        </EuiCopy>
+      </EuiToolTip>
+    </>
+  );
+};
+
+export const CommentActions = React.memo(CommentActionsComponent);
diff --git a/x-pack/plugins/security_solution/public/assistant/comment_actions/translations.ts b/x-pack/plugins/security_solution/public/assistant/comment_actions/translations.ts
new file mode 100644
index 0000000000000..878fbab69d6af
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/assistant/comment_actions/translations.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const ADDED_NOTE_TO_TIMELINE = i18n.translate(
+  'xpack.securitySolution.assistant.commentActions.addedNoteToTimelineToast',
+  {
+    defaultMessage: 'Added note to timeline',
+  }
+);
+
+export const ADD_MESSAGE_CONTENT_AS_TIMELINE_NOTE = i18n.translate(
+  'xpack.securitySolution.assistant.commentActions.addMessageContentAsTimelineNoteAriaLabel',
+  {
+    defaultMessage: 'Add message content as a timeline note',
+  }
+);
+
+export const ADD_NOTE_TO_TIMELINE = i18n.translate(
+  'xpack.securitySolution.assistant.commentActions.addNoteToTimelineTooltip',
+  {
+    defaultMessage: 'Add note to timeline',
+  }
+);
+
+export const ADD_TO_CASE_EXISTING_CASE = i18n.translate(
+  'xpack.securitySolution.assistant.commentActions.addToCaseExistingCase',
+  {
+    defaultMessage: 'Add to existing case',
+  }
+);
+
+export const ELASTIC_SECURITY_ASSISTANT = i18n.translate(
+  'xpack.securitySolution.assistant.commentActions.elasticSecurityAssistantTitle',
+  {
+    defaultMessage: 'Elastic Security Assistant',
+  }
+);
+
+export const COPY_TO_CLIPBOARD = i18n.translate(
+  'xpack.securitySolution.assistant.commentActions.copyToClipboard',
+  {
+    defaultMessage: 'Copy to clipboard',
+  }
+);
diff --git a/x-pack/plugins/security_solution/public/assistant/content/conversations/index.tsx b/x-pack/plugins/security_solution/public/assistant/content/conversations/index.tsx
new file mode 100644
index 0000000000000..927810e02606d
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/assistant/content/conversations/index.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  ELASTIC_SECURITY_ASSISTANT_TITLE,
+  WELCOME_CONVERSATION_TITLE,
+} from '@kbn/elastic-assistant/impl/assistant/use_conversation/translations';
+import type { Conversation } from '@kbn/elastic-assistant';
+import {
+  WELCOME_GENERAL,
+  WELCOME_GENERAL_2,
+  WELCOME_GENERAL_3,
+} from '@kbn/elastic-assistant/impl/content/prompts/welcome/translations';
+import { DATA_QUALITY_DASHBOARD_CONVERSATION_ID } from '@kbn/ecs-data-quality-dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/callout_summary/translations';
+import { DETECTION_RULES_CONVERSATION_ID } from '../../../detections/pages/detection_engine/rules/translations';
+import {
+  ALERT_SUMMARY_CONVERSATION_ID,
+  EVENT_SUMMARY_CONVERSATION_ID,
+} from '../../../common/components/event_details/translations';
+import { ELASTIC_SECURITY_ASSISTANT } from '../../comment_actions/translations';
+
+export const BASE_SECURITY_CONVERSATIONS: Record<string, Conversation> = {
+  [ALERT_SUMMARY_CONVERSATION_ID]: {
+    id: ALERT_SUMMARY_CONVERSATION_ID,
+    messages: [],
+    apiConfig: {},
+  },
+  [DATA_QUALITY_DASHBOARD_CONVERSATION_ID]: {
+    id: DATA_QUALITY_DASHBOARD_CONVERSATION_ID,
+    messages: [],
+    apiConfig: {},
+  },
+  [DETECTION_RULES_CONVERSATION_ID]: {
+    id: DETECTION_RULES_CONVERSATION_ID,
+    messages: [],
+    apiConfig: {},
+  },
+  [EVENT_SUMMARY_CONVERSATION_ID]: {
+    id: EVENT_SUMMARY_CONVERSATION_ID,
+    messages: [],
+    apiConfig: {},
+  },
+  [WELCOME_CONVERSATION_TITLE]: {
+    id: WELCOME_CONVERSATION_TITLE,
+    theme: {
+      title: ELASTIC_SECURITY_ASSISTANT_TITLE,
+      titleIcon: 'logoSecurity',
+      assistant: {
+        name: ELASTIC_SECURITY_ASSISTANT,
+        icon: 'logoSecurity',
+      },
+      system: {
+        icon: 'logoElastic',
+      },
+      user: {},
+    },
+    messages: [
+      {
+        role: 'assistant',
+        content: WELCOME_GENERAL,
+        timestamp: '',
+        presentation: {
+          delay: 2 * 1000,
+          stream: true,
+        },
+      },
+      {
+        role: 'assistant',
+        content: WELCOME_GENERAL_2,
+        timestamp: '',
+        presentation: {
+          delay: 1000,
+          stream: true,
+        },
+      },
+      {
+        role: 'assistant',
+        content: WELCOME_GENERAL_3,
+        timestamp: '',
+        presentation: {
+          delay: 1000,
+          stream: true,
+        },
+      },
+    ],
+    apiConfig: {},
+  },
+};
diff --git a/x-pack/plugins/security_solution/public/assistant/content/conversations/translations.ts b/x-pack/plugins/security_solution/public/assistant/content/conversations/translations.ts
new file mode 100644
index 0000000000000..4cdb1b3f27e54
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/assistant/content/conversations/translations.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const TIMELINE_CONVERSATION_TITLE = i18n.translate(
+  'xpack.securitySolution.assistant.conversations.timelineConversationTitle',
+  {
+    defaultMessage: 'Timeline',
+  }
+);
diff --git a/x-pack/plugins/security_solution/public/assistant/content/prompt_contexts/index.tsx b/x-pack/plugins/security_solution/public/assistant/content/prompt_contexts/index.tsx
new file mode 100644
index 0000000000000..c5d036dc9cc02
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/assistant/content/prompt_contexts/index.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { PromptContext, PromptContextTemplate } from '@kbn/elastic-assistant';
+import { USER_PROMPTS } from '@kbn/elastic-assistant';
+import * as i18n from '../../../common/components/event_details/translations';
+import * as i18nDetections from '../../../detections/pages/detection_engine/rules/translations';
+import { SUMMARY_VIEW } from '../../../common/components/event_details/translations';
+
+export const PROMPT_CONTEXT_ALERT_CATEGORY = 'alert';
+export const PROMPT_CONTEXT_EVENT_CATEGORY = 'event';
+export const PROMPT_CONTEXT_DETECTION_RULES_CATEGORY = 'detection-rules';
+
+/**
+ * Global list of PromptContexts intended to be used throughout Security Solution.
+ * Useful if wanting to see all available PromptContexts in one place, or if needing
+ * a unique set of categories to reference since the PromptContexts available on
+ * useAssistantContext are dynamic (not globally registered).
+ */
+export const PROMPT_CONTEXTS: Record<PromptContext['category'], PromptContextTemplate> = {
+  /**
+   * Alert summary view context, made available on the alert details flyout
+   */
+  PROMPT_CONTEXT_ALERT_CATEGORY: {
+    category: PROMPT_CONTEXT_ALERT_CATEGORY,
+    suggestedUserPrompt: USER_PROMPTS.EXPLAIN_THEN_SUMMARIZE_SUGGEST_INVESTIGATION_GUIDE_NON_I18N,
+    description: i18n.ALERT_SUMMARY_CONTEXT_DESCRIPTION(SUMMARY_VIEW),
+    tooltip: i18n.ALERT_SUMMARY_VIEW_CONTEXT_TOOLTIP,
+  },
+  /**
+   * Event summary view context, made available from Timeline events
+   */
+  PROMPT_CONTEXT_EVENT_CATEGORY: {
+    category: PROMPT_CONTEXT_EVENT_CATEGORY,
+    suggestedUserPrompt: USER_PROMPTS.EXPLAIN_THEN_SUMMARIZE_SUGGEST_INVESTIGATION_GUIDE_NON_I18N,
+    description: i18n.EVENT_SUMMARY_CONTEXT_DESCRIPTION('view'),
+    tooltip: i18n.EVENT_SUMMARY_VIEW_CONTEXT_TOOLTIP,
+  },
+  /**
+   * Detection Rules context, made available on the Rule Management page when rules are selected
+   */
+  PROMPT_CONTEXT_DETECTION_RULES_CATEGORY: {
+    category: PROMPT_CONTEXT_DETECTION_RULES_CATEGORY,
+    suggestedUserPrompt: i18nDetections.EXPLAIN_THEN_SUMMARIZE_RULE_DETAILS,
+    description: i18nDetections.RULE_MANAGEMENT_CONTEXT_DESCRIPTION,
+    tooltip: i18nDetections.RULE_MANAGEMENT_CONTEXT_TOOLTIP,
+  },
+};
diff --git a/x-pack/plugins/security_solution/public/assistant/content/quick_prompts/index.tsx b/x-pack/plugins/security_solution/public/assistant/content/quick_prompts/index.tsx
new file mode 100644
index 0000000000000..c35598f8898ba
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/assistant/content/quick_prompts/index.tsx
@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { QuickPrompt } from '@kbn/elastic-assistant';
+import * as i18n from './translations';
+import {
+  PROMPT_CONTEXT_ALERT_CATEGORY,
+  PROMPT_CONTEXT_DETECTION_RULES_CATEGORY,
+  PROMPT_CONTEXT_EVENT_CATEGORY,
+} from '../prompt_contexts';
+
+/**
+ * Global list of QuickPrompts intended to be used throughout Security Solution.
+ * Useful if wanting to see all available QuickPrompts in one place, or if needing
+ * to reference when constructing a new chat window to include a QuickPrompt.
+ */
+export const BASE_SECURITY_QUICK_PROMPTS: QuickPrompt[] = [
+  {
+    title: i18n.ALERT_SUMMARIZATION_TITLE,
+    prompt: i18n.ALERT_SUMMARIZATION_PROMPT,
+    color: '#F68FBE',
+    categories: [PROMPT_CONTEXT_ALERT_CATEGORY],
+    isDefault: true,
+  },
+  {
+    title: i18n.RULE_CREATION_TITLE,
+    prompt: i18n.RULE_CREATION_PROMPT,
+    categories: [PROMPT_CONTEXT_DETECTION_RULES_CATEGORY],
+    color: '#7DDED8',
+    isDefault: true,
+  },
+  {
+    title: i18n.WORKFLOW_ANALYSIS_TITLE,
+    prompt: i18n.WORKFLOW_ANALYSIS_PROMPT,
+    color: '#36A2EF',
+    isDefault: true,
+  },
+  {
+    title: i18n.THREAT_INVESTIGATION_GUIDES_TITLE,
+    prompt: i18n.THREAT_INVESTIGATION_GUIDES_PROMPT,
+    categories: [PROMPT_CONTEXT_EVENT_CATEGORY],
+    color: '#F3D371',
+    isDefault: true,
+  },
+  {
+    title: i18n.SPL_QUERY_CONVERSION_TITLE,
+    prompt: i18n.SPL_QUERY_CONVERSION_PROMPT,
+    color: '#BADA55',
+    isDefault: true,
+  },
+  {
+    title: i18n.AUTOMATION_TITLE,
+    prompt: i18n.AUTOMATION_PROMPT,
+    color: '#FFA500',
+    isDefault: true,
+  },
+];
diff --git a/x-pack/plugins/security_solution/public/assistant/content/quick_prompts/translations.ts b/x-pack/plugins/security_solution/public/assistant/content/quick_prompts/translations.ts
new file mode 100644
index 0000000000000..1d122b0169be2
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/assistant/content/quick_prompts/translations.ts
@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const ALERT_SUMMARIZATION_TITLE = i18n.translate(
+  'xpack.securitySolution.assistant.quickPrompts.alertSummarizationTitle',
+  {
+    defaultMessage: 'Alert summarization',
+  }
+);
+
+export const ALERT_SUMMARIZATION_PROMPT = i18n.translate(
+  'xpack.securitySolution.assistant.quickPrompts.alertSummarizationPrompt',
+  {
+    defaultMessage:
+      'As an expert in security operations and incident response, provide a breakdown of the attached alert and summarize what it might mean for my organization.',
+  }
+);
+
+export const RULE_CREATION_TITLE = i18n.translate(
+  'xpack.securitySolution.assistant.quickPrompts.ruleCreationTitle',
+  {
+    defaultMessage: 'Query generation',
+  }
+);
+
+export const RULE_CREATION_PROMPT = i18n.translate(
+  'xpack.securitySolution.assistant.quickPrompts.ruleCreationPrompt',
+  {
+    defaultMessage:
+      'As an expert user of Elastic Security, please generate an accurate and valid EQL query to detect the use case below. Your response should be formatted to be able to use immediately in an Elastic Security timeline or detection rule. If Elastic Security already has a prebuilt rule for the use case, or a similar one, please provide a link to it and describe it.',
+  }
+);
+
+export const WORKFLOW_ANALYSIS_TITLE = i18n.translate(
+  'xpack.securitySolution.assistant.quickPrompts.workflowAnalysisTitle',
+  {
+    defaultMessage: 'Workflow suggestions',
+  }
+);
+
+export const WORKFLOW_ANALYSIS_PROMPT = i18n.translate(
+  'xpack.securitySolution.assistant.quickPrompts.workflowAnalysisPrompt',
+  {
+    defaultMessage:
+      'As an expert user of Elastic Security, please suggest a workflow, with step by step instructions on how to:',
+  }
+);
+
+export const THREAT_INVESTIGATION_GUIDES_TITLE = i18n.translate(
+  'xpack.securitySolution.assistant.quickPrompts.threatInvestigationGuidesTitle',
+  {
+    defaultMessage: 'Custom data ingestion helper',
+  }
+);
+
+export const THREAT_INVESTIGATION_GUIDES_PROMPT = i18n.translate(
+  'xpack.securitySolution.assistant.quickPrompts.threatInvestigationGuidesPrompt',
+  {
+    defaultMessage:
+      'As an expert user of Elastic Security, Elastic Agent, and Ingest pipelines, please list accurate and formatted, step by step instructions on how to ingest the following data using Elastic Agent and Fleet in Kibana and convert it to the Elastic Common Schema:',
+  }
+);
+
+export const SPL_QUERY_CONVERSION_TITLE = i18n.translate(
+  'xpack.securitySolution.assistant.quickPrompts.splQueryConversionTitle',
+  {
+    defaultMessage: 'Query conversion',
+  }
+);
+
+export const SPL_QUERY_CONVERSION_PROMPT = i18n.translate(
+  'xpack.securitySolution.assistant.quickPrompts.splQueryConversionPrompt',
+  {
+    defaultMessage:
+      'I have the following query from a previous SIEM platform. As an expert user of Elastic Security, please suggest an Elastic EQL equivalent. I should be able to copy it immediately into an Elastic security timeline.',
+  }
+);
+
+export const AUTOMATION_TITLE = i18n.translate(
+  'xpack.securitySolution.assistant.quickPrompts.AutomationTitle',
+  {
+    defaultMessage: 'Agent integration advice',
+  }
+);
+
+export const AUTOMATION_PROMPT = i18n.translate(
+  'xpack.securitySolution.assistant.quickPrompts.AutomationPrompt',
+  {
+    defaultMessage:
+      'Which Fleet enabled Elastic Agent integration should I use to collect logs and events from:',
+  }
+);
diff --git a/x-pack/plugins/security_solution/public/assistant/get_comments/index.tsx b/x-pack/plugins/security_solution/public/assistant/get_comments/index.tsx
new file mode 100644
index 0000000000000..fd0de680ee84c
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/assistant/get_comments/index.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { EuiCommentProps } from '@elastic/eui';
+import type { Conversation } from '@kbn/elastic-assistant';
+import { EuiAvatar, EuiMarkdownFormat, EuiText } from '@elastic/eui';
+import React from 'react';
+
+import { CommentActions } from '../comment_actions';
+import * as i18n from './translations';
+
+export const getComments = ({
+  currentConversation,
+  lastCommentRef,
+}: {
+  currentConversation: Conversation;
+  lastCommentRef: React.MutableRefObject<HTMLDivElement | null>;
+}): EuiCommentProps[] =>
+  currentConversation.messages.map((message, index) => {
+    const isUser = message.role === 'user';
+
+    return {
+      actions: <CommentActions message={message} />,
+      children:
+        index !== currentConversation.messages.length - 1 ? (
+          <EuiText>
+            <EuiMarkdownFormat className={`message-${index}`}>{message.content}</EuiMarkdownFormat>
+          </EuiText>
+        ) : (
+          <EuiText>
+            <EuiMarkdownFormat className={`message-${index}`}>{message.content}</EuiMarkdownFormat>
+            <span ref={lastCommentRef} />
+          </EuiText>
+        ),
+      timelineAvatar: isUser ? (
+        <EuiAvatar name="user" size="l" color="subdued" iconType="userAvatar" />
+      ) : (
+        <EuiAvatar name="machine" size="l" color="subdued" iconType="logoSecurity" />
+      ),
+      timestamp: i18n.AT(message.timestamp),
+      username: isUser ? i18n.YOU : i18n.ASSISTANT,
+    };
+  });
diff --git a/x-pack/plugins/security_solution/public/assistant/get_comments/translations.ts b/x-pack/plugins/security_solution/public/assistant/get_comments/translations.ts
new file mode 100644
index 0000000000000..2b83d580ef2cd
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/assistant/get_comments/translations.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const ASSISTANT = i18n.translate('xpack.securitySolution.assistant.getComments.assistant', {
+  defaultMessage: 'Assistant',
+});
+
+export const AT = (timestamp: string) =>
+  i18n.translate('xpack.securitySolution.assistant.getComments.at', {
+    defaultMessage: 'at: {timestamp}',
+    values: { timestamp },
+  });
+
+export const YOU = i18n.translate('xpack.securitySolution.assistant.getComments.you', {
+  defaultMessage: 'You',
+});
diff --git a/x-pack/plugins/security_solution/public/assistant/helpers.tsx b/x-pack/plugins/security_solution/public/assistant/helpers.tsx
new file mode 100644
index 0000000000000..896bb5b13cd65
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/assistant/helpers.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiIcon, EuiToolTip } from '@elastic/eui';
+import { analyzeMarkdown } from '@kbn/elastic-assistant';
+import type { Conversation, CodeBlockDetails } from '@kbn/elastic-assistant';
+import React from 'react';
+
+import type { TimelineEventsDetailsItem } from '../../common/search_strategy';
+import type { Rule } from '../detection_engine/rule_management/logic';
+import { SendToTimelineButton } from './send_to_timeline';
+
+export const LOCAL_STORAGE_KEY = `securityAssistant`;
+
+export interface QueryField {
+  field: string;
+  values: string;
+}
+
+export const SECURITY_ASSISTANT_UI_SETTING_KEY = 'securityAssistant';
+
+export const getPromptContextFromDetectionRules = (rules: Rule[]): string => {
+  const data = rules.map((rule) => `Rule Name:${rule.name}\nRule Description:${rule.description}`);
+
+  return data.join('\n\n');
+};
+
+export const getAllFields = (data: TimelineEventsDetailsItem[]): QueryField[] =>
+  data
+    .filter(({ field }) => !field.startsWith('signal.'))
+    .map(({ field, values }) => ({ field, values: values?.join(',') ?? '' }));
+
+export const getFieldsAsCsv = (queryFields: QueryField[]): string =>
+  queryFields.map(({ field, values }) => `${field},${values}`).join('\n');
+
+export const getPromptContextFromEventDetailsItem = (data: TimelineEventsDetailsItem[]): string => {
+  const allFields = getAllFields(data);
+
+  return getFieldsAsCsv(allFields);
+};
+
+/**
+ * Augments the messages in a conversation with code block details, including
+ * the start and end indices of the code block in the message, the type of the
+ * code block, and the button to add the code block to the timeline.
+ *
+ * @param currentConversation
+ */
+export const augmentMessageCodeBlocks = (
+  currentConversation: Conversation
+): CodeBlockDetails[][] => {
+  const cbd = currentConversation.messages.map(({ content }) => analyzeMarkdown(content));
+
+  return cbd.map((codeBlocks, messageIndex) =>
+    codeBlocks.map((codeBlock, codeBlockIndex) => ({
+      ...codeBlock,
+      controlContainer: document.querySelectorAll(
+        `.message-${messageIndex} .euiCodeBlock__controls`
+      )[codeBlockIndex],
+      button: (
+        <SendToTimelineButton
+          asEmptyButton={true}
+          dataProviders={[
+            {
+              id: 'assistant-data-provider',
+              name: `Assistant Query from conversation ${currentConversation.id}`,
+              enabled: true,
+              excluded: false,
+              queryType: codeBlock.type,
+              kqlQuery: codeBlock.content ?? '',
+              queryMatch: {
+                field: 'host.name',
+                operator: ':',
+                value: 'test',
+              },
+              and: [],
+            },
+          ]}
+          keepDataView={true}
+        >
+          <EuiToolTip position="right" content={'Add to timeline'}>
+            <EuiIcon type="timeline" />
+          </EuiToolTip>
+        </SendToTimelineButton>
+      ),
+    }))
+  );
+};
diff --git a/x-pack/plugins/security_solution/public/assistant/jest.config.js b/x-pack/plugins/security_solution/public/assistant/jest.config.js
new file mode 100644
index 0000000000000..184141b299f4a
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/assistant/jest.config.js
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../..',
+  roots: ['<rootDir>/x-pack/plugins/security_solution/public/assistant'],
+  coverageDirectory:
+    '<rootDir>/target/kibana-coverage/jest/x-pack/plugins/security_solution/public/assistant',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: [
+    '<rootDir>/x-pack/plugins/security_solution/public/assistant/**/*.{ts,tsx}',
+  ],
+  moduleNameMapper: require('../../server/__mocks__/module_name_map'),
+};
diff --git a/x-pack/plugins/security_solution/public/assistant/send_to_timeline/index.tsx b/x-pack/plugins/security_solution/public/assistant/send_to_timeline/index.tsx
new file mode 100644
index 0000000000000..0c745359ef8e9
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/assistant/send_to_timeline/index.tsx
@@ -0,0 +1,204 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { EuiButton, EuiButtonEmpty } from '@elastic/eui';
+import type { Filter } from '@kbn/es-query';
+import { useDispatch } from 'react-redux';
+
+import { useDeepEqualSelector } from '../../common/hooks/use_selector';
+import { sourcererSelectors } from '../../common/store';
+import { sourcererActions } from '../../common/store/actions';
+import { inputsActions } from '../../common/store/inputs';
+import { InputsModelId } from '../../common/store/inputs/constants';
+import type { TimeRange } from '../../common/store/inputs/model';
+import { SourcererScopeName } from '../../common/store/sourcerer/model';
+import { TimelineTabs, TimelineId, TimelineType } from '../../../common/types';
+import { ACTION_INVESTIGATE_IN_TIMELINE } from '../../detections/components/alerts_table/translations';
+import type { DataProvider } from '../../timelines/components/timeline/data_providers/data_provider';
+import { useCreateTimeline } from '../../timelines/components/timeline/properties/use_create_timeline';
+import {
+  applyKqlFilterQuery,
+  setActiveTabTimeline,
+  setFilters,
+  updateDataView,
+  updateEqlOptions,
+} from '../../timelines/store/timeline/actions';
+
+export interface SendToTimelineButtonProps {
+  asEmptyButton: boolean;
+  dataProviders: DataProvider[] | null;
+  filters?: Filter[] | null;
+  timeRange?: TimeRange;
+  keepDataView?: boolean;
+  isDisabled?: boolean;
+}
+
+export const SendToTimelineButton: React.FunctionComponent<SendToTimelineButtonProps> = ({
+  asEmptyButton,
+  children,
+  dataProviders,
+  filters,
+  timeRange,
+  keepDataView,
+  ...rest
+}) => {
+  const dispatch = useDispatch();
+
+  const getDataViewsSelector = useMemo(
+    () => sourcererSelectors.getSourcererDataViewsSelector(),
+    []
+  );
+  const { defaultDataView, signalIndexName } = useDeepEqualSelector((state) =>
+    getDataViewsSelector(state)
+  );
+
+  const hasTemplateProviders =
+    dataProviders && dataProviders.find((provider) => provider.type === 'template');
+
+  const clearTimeline = useCreateTimeline({
+    timelineId: TimelineId.active,
+    timelineType: hasTemplateProviders ? TimelineType.template : TimelineType.default,
+  });
+
+  const configureAndOpenTimeline = useCallback(() => {
+    if (dataProviders || filters) {
+      // Reset the current timeline
+      if (timeRange) {
+        clearTimeline({
+          timeRange,
+        });
+      } else {
+        clearTimeline();
+      }
+      if (dataProviders) {
+        // Ensure Security Solution Default DataView is selected (so it's not just alerts)
+        dispatch(
+          updateDataView({
+            id: TimelineId.active,
+            dataViewId: 'security-solution-default',
+            indexNames: ['logs-*'],
+          })
+        );
+
+        // Added temporary queryType to dataproviders to support EQL/DSL
+        switch (dataProviders[0].queryType) {
+          case 'eql':
+            // is EQL
+            dispatch(
+              updateEqlOptions({
+                id: TimelineId.active,
+                field: 'query',
+                value: dataProviders[0].kqlQuery,
+              })
+            );
+            dispatch(
+              setActiveTabTimeline({
+                id: TimelineId.active,
+                activeTab: TimelineTabs.eql,
+              })
+            );
+            break;
+          case 'kql':
+            // is KQL
+            dispatch(
+              applyKqlFilterQuery({
+                id: TimelineId.active,
+                filterQuery: {
+                  kuery: {
+                    kind: 'kuery',
+                    expression: dataProviders[0].kqlQuery,
+                  },
+                  serializedQuery: dataProviders[0].kqlQuery,
+                },
+              })
+            );
+            dispatch(
+              setActiveTabTimeline({
+                id: TimelineId.active,
+                activeTab: TimelineTabs.query,
+              })
+            );
+            break;
+          case 'dsl':
+            const filter = {
+              meta: {
+                type: 'custom',
+                disabled: false,
+                negate: false,
+                alias: dataProviders[0].name,
+                key: 'query',
+                value: dataProviders[0].kqlQuery,
+              },
+              query: JSON.parse(dataProviders[0].kqlQuery),
+            };
+            dispatch(setFilters({ id: TimelineId.active, filters: [filter] }));
+            dispatch(
+              setActiveTabTimeline({
+                id: TimelineId.active,
+                activeTab: TimelineTabs.query,
+              })
+            );
+            break;
+        }
+      }
+      // Use filters if more than a certain amount of ids for dom performance.
+      if (filters) {
+        dispatch(
+          setFilters({
+            id: TimelineId.active,
+            filters,
+          })
+        );
+      }
+      // Only show detection alerts
+      // (This is required so the timeline event count matches the prevalence count)
+      if (!keepDataView) {
+        dispatch(
+          sourcererActions.setSelectedDataView({
+            id: SourcererScopeName.timeline,
+            selectedDataViewId: defaultDataView.id,
+            selectedPatterns: [signalIndexName || ''],
+          })
+        );
+      }
+      // Unlock the time range from the global time range
+      dispatch(inputsActions.removeLinkTo([InputsModelId.timeline, InputsModelId.global]));
+    }
+  }, [
+    dataProviders,
+    clearTimeline,
+    dispatch,
+    defaultDataView.id,
+    signalIndexName,
+    filters,
+    timeRange,
+    keepDataView,
+  ]);
+
+  return asEmptyButton ? (
+    <EuiButtonEmpty
+      aria-label={ACTION_INVESTIGATE_IN_TIMELINE}
+      onClick={configureAndOpenTimeline}
+      color="text"
+      flush="both"
+      size="xs"
+    >
+      {children}
+    </EuiButtonEmpty>
+  ) : (
+    <EuiButton
+      aria-label={ACTION_INVESTIGATE_IN_TIMELINE}
+      onClick={configureAndOpenTimeline}
+      {...rest}
+    >
+      {children}
+    </EuiButton>
+  );
+};
+
+SendToTimelineButton.displayName = 'SendToTimelineButton';
diff --git a/x-pack/plugins/security_solution/public/assistant/use_conversation_store/index.tsx b/x-pack/plugins/security_solution/public/assistant/use_conversation_store/index.tsx
new file mode 100644
index 0000000000000..04321df16ea29
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/assistant/use_conversation_store/index.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { Conversation } from '@kbn/elastic-assistant';
+
+import { useLocalStorage } from '../../common/components/local_storage';
+import { LOCAL_STORAGE_KEY } from '../helpers';
+import { BASE_SECURITY_CONVERSATIONS } from '../content/conversations';
+
+export interface UseConversationStore {
+  conversations: Record<string, Conversation>;
+  setConversations: React.Dispatch<React.SetStateAction<Record<string, Conversation>>>;
+}
+
+export const useConversationStore = (): UseConversationStore => {
+  const [conversations, setConversations] = useLocalStorage<Record<string, Conversation>>({
+    defaultValue: BASE_SECURITY_CONVERSATIONS,
+    key: LOCAL_STORAGE_KEY,
+    isInvalidDefault: (valueFromStorage) => {
+      return !valueFromStorage;
+    },
+  });
+
+  return {
+    conversations,
+    setConversations,
+  };
+};
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx
index 03327cea9ba1e..5704eab502ed8 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx
@@ -7,12 +7,10 @@
 
 import React, { useMemo } from 'react';
 
-import type { BrowserFields } from '../../../../common/search_strategy/index_fields';
-import { SummaryView } from './summary_view';
-
 import type { TimelineEventsDetailsItem } from '../../../../common/search_strategy';
-
+import type { BrowserFields } from '../../../../common/search_strategy/index_fields';
 import { getSummaryRows } from './get_alert_summary_rows';
+import { SummaryView } from './summary_view';
 
 const AlertSummaryViewComponent: React.FC<{
   browserFields: BrowserFields;
@@ -30,7 +28,7 @@ const AlertSummaryViewComponent: React.FC<{
   );
 
   return (
-    <SummaryView rows={summaryRows} title={title} goToTable={goToTable} isReadOnly={isReadOnly} />
+    <SummaryView goToTable={goToTable} isReadOnly={isReadOnly} rows={summaryRows} title={title} />
   );
 };
 
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/summary_view.test.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/summary_view.test.tsx
index 7fac3083e0b8b..e465bfb37407e 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/summary_view.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/summary_view.test.tsx
@@ -53,6 +53,7 @@ const enrichedHostIpData: AlertSummaryRow['description'] = {
 };
 
 const mockCount = 90019001;
+
 jest.mock('../../containers/alerts/use_alert_prevalence', () => ({
   useAlertPrevalence: () => ({
     loading: false,
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/translations.ts b/x-pack/plugins/security_solution/public/common/components/event_details/translations.ts
index a0fb58551deb5..f1c1797562284 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/translations.ts
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/translations.ts
@@ -146,3 +146,51 @@ export const ALERT_REASON = i18n.translate('xpack.securitySolution.eventDetails.
 export const VIEW_ALL_FIELDS = i18n.translate('xpack.securitySolution.eventDetails.viewAllFields', {
   defaultMessage: 'View all fields in table',
 });
+
+export const SUMMARY_VIEW = i18n.translate('xpack.securitySolution.eventDetails.summaryView', {
+  defaultMessage: 'summary',
+});
+
+export const TIMELINE_VIEW = i18n.translate('xpack.securitySolution.eventDetails.timelineView', {
+  defaultMessage: 'Timeline',
+});
+
+export const ALERT_SUMMARY_CONVERSATION_ID = i18n.translate(
+  'xpack.securitySolution.alertSummaryView.alertSummaryViewConversationId',
+  {
+    defaultMessage: 'Alert summary',
+  }
+);
+
+export const ALERT_SUMMARY_CONTEXT_DESCRIPTION = (view: string) =>
+  i18n.translate('xpack.securitySolution.alertSummaryView.alertSummaryViewContextDescription', {
+    defaultMessage: 'Alert (from {view})',
+    values: { view },
+  });
+
+export const ALERT_SUMMARY_VIEW_CONTEXT_TOOLTIP = i18n.translate(
+  'xpack.securitySolution.alertSummaryView.alertSummaryViewContextTooltip',
+  {
+    defaultMessage: 'Add this alert as context',
+  }
+);
+
+export const EVENT_SUMMARY_CONVERSATION_ID = i18n.translate(
+  'xpack.securitySolution.alertSummaryView.eventSummaryViewConversationId',
+  {
+    defaultMessage: 'Event summary',
+  }
+);
+
+export const EVENT_SUMMARY_CONTEXT_DESCRIPTION = (view: string) =>
+  i18n.translate('xpack.securitySolution.alertSummaryView.eventSummaryViewContextDescription', {
+    defaultMessage: 'Event (from {view})',
+    values: { view },
+  });
+
+export const EVENT_SUMMARY_VIEW_CONTEXT_TOOLTIP = i18n.translate(
+  'xpack.securitySolution.alertSummaryView.eventSummaryViewContextTooltip',
+  {
+    defaultMessage: 'Add this event as context',
+  }
+);
diff --git a/x-pack/plugins/security_solution/public/common/components/local_storage/index.tsx b/x-pack/plugins/security_solution/public/common/components/local_storage/index.tsx
index 2e496e5fa10d7..5fcde971ae146 100644
--- a/x-pack/plugins/security_solution/public/common/components/local_storage/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/local_storage/index.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import type { Dispatch, SetStateAction } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 
 import { APP_ID } from '../../../../common/constants';
@@ -23,7 +24,7 @@ export const useLocalStorage = <T,>({
   key,
   plugin = APP_ID,
   isInvalidDefault,
-}: Props<T>): [T, (value: T) => void] => {
+}: Props<T>): [T, Dispatch<SetStateAction<T>>, Dispatch<SetStateAction<boolean>>] => {
   const { storage } = useKibana().services;
   const [initialized, setInitialized] = useState<boolean>(false);
   const [_value, _setValue] = useState<T>(defaultValue);
@@ -37,10 +38,18 @@ export const useLocalStorage = <T,>({
   }, [defaultValue, isInvalidDefault, key, plugin, storage]);
 
   const setValue = useCallback(
-    (value: T) => {
-      storage.set(`${plugin}.${key}`, value);
-
-      _setValue(value);
+    (value: T | ((prev: T) => T)) => {
+      if (typeof value === 'function') {
+        const updater = value as (prev: T) => T;
+        _setValue((prevValue) => {
+          const newValue = updater(prevValue);
+          storage.set(`${plugin}.${key}`, newValue);
+          return newValue;
+        });
+      } else {
+        storage.set(`${plugin}.${key}`, value);
+        _setValue(value);
+      }
     },
     [key, plugin, storage]
   );
@@ -52,5 +61,5 @@ export const useLocalStorage = <T,>({
     }
   }, [initialized, readValueFromLocalStorage]);
 
-  return [_value, setValue];
+  return [_value, setValue, setInitialized];
 };
diff --git a/x-pack/plugins/security_solution/public/common/components/page_wrapper/index.tsx b/x-pack/plugins/security_solution/public/common/components/page_wrapper/index.tsx
index 0ece17f9dd297..6cf4167ea6d6e 100644
--- a/x-pack/plugins/security_solution/public/common/components/page_wrapper/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/page_wrapper/index.tsx
@@ -5,12 +5,14 @@
  * 2.0.
  */
 
+import { AssistantOverlay } from '@kbn/elastic-assistant';
 import classNames from 'classnames';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import type { CommonProps } from '@elastic/eui';
 
 import { useGlobalFullScreen } from '../../containers/use_full_screen';
+import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
 import { AppGlobalStyle } from '../page';
 
 const Wrapper = styled.div`
@@ -41,6 +43,7 @@ interface SecuritySolutionPageWrapperProps {
 const SecuritySolutionPageWrapperComponent: React.FC<
   SecuritySolutionPageWrapperProps & CommonProps
 > = ({ children, className, style, noPadding, noTimeline, ...otherProps }) => {
+  const isAssistantEnabled = useIsExperimentalFeatureEnabled('assistantEnabled');
   const { globalFullScreen, setGlobalFullScreen } = useGlobalFullScreen();
   useEffect(() => {
     setGlobalFullScreen(false); // exit full screen mode on page load
@@ -57,6 +60,7 @@ const SecuritySolutionPageWrapperComponent: React.FC<
     <Wrapper className={classes} style={style} {...otherProps}>
       {children}
       <AppGlobalStyle />
+      {isAssistantEnabled && <AssistantOverlay />}
     </Wrapper>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/common/mock/storybook_providers.tsx b/x-pack/plugins/security_solution/public/common/mock/storybook_providers.tsx
index dc92b1892541d..c40fd2b6cebf3 100644
--- a/x-pack/plugins/security_solution/public/common/mock/storybook_providers.tsx
+++ b/x-pack/plugins/security_solution/public/common/mock/storybook_providers.tsx
@@ -5,15 +5,18 @@
  * 2.0.
  */
 
+import { AssistantProvider } from '@kbn/elastic-assistant';
 import { euiLightVars } from '@kbn/ui-theme';
 import React from 'react';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { ThemeProvider } from 'styled-components';
+import { httpServiceMock } from '@kbn/core-http-browser-mocks';
 import type { CoreStart } from '@kbn/core/public';
 import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
 import { I18nProvider } from '@kbn/i18n-react';
 import { CellActionsProvider } from '@kbn/cell-actions';
+import { actionTypeRegistryMock } from '@kbn/triggers-actions-ui-plugin/public/application/action_type_registry.mock';
 import { createStore } from '../store';
 import { mockGlobalState } from './global_state';
 import { SUB_PLUGINS_REDUCER } from './utils';
@@ -52,13 +55,27 @@ const KibanaReactContext = createKibanaReactContext(coreMock);
  */
 export const StorybookProviders: React.FC = ({ children }) => {
   const store = createStore(mockGlobalState, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
+  const actionTypeRegistry = actionTypeRegistryMock.create();
+  const mockGetInitialConversations = jest.fn(() => ({}));
+  const mockGetComments = jest.fn(() => []);
+  const mockHttp = httpServiceMock.createStartContract({ basePath: '/test' });
+
   return (
     <I18nProvider>
       <KibanaReactContext.Provider>
         <CellActionsProvider getTriggerCompatibleActions={() => Promise.resolve([])}>
           <ReduxStoreProvider store={store}>
             <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-              {children}
+              <AssistantProvider
+                actionTypeRegistry={actionTypeRegistry}
+                augmentMessageCodeBlocks={jest.fn()}
+                getComments={mockGetComments}
+                getInitialConversations={mockGetInitialConversations}
+                setConversations={jest.fn()}
+                http={mockHttp}
+              >
+                {children}
+              </AssistantProvider>
             </ThemeProvider>
           </ReduxStoreProvider>
         </CellActionsProvider>
diff --git a/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx b/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx
index d0901071063ab..89f5a6351411f 100644
--- a/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx
+++ b/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { AssistantProvider } from '@kbn/elastic-assistant';
 import { euiDarkVars } from '@kbn/ui-theme';
 import { I18nProvider } from '@kbn/i18n-react';
 
@@ -16,11 +17,13 @@ import type { Store } from 'redux';
 import { BehaviorSubject } from 'rxjs';
 import { ThemeProvider } from 'styled-components';
 import type { Capabilities } from '@kbn/core/public';
+import { httpServiceMock } from '@kbn/core-http-browser-mocks';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import type { Action } from '@kbn/ui-actions-plugin/public';
 import { CellActionsProvider } from '@kbn/cell-actions';
 import { ExpandableFlyoutProvider } from '@kbn/expandable-flyout';
+import { actionTypeRegistryMock } from '@kbn/triggers-actions-ui-plugin/public/application/action_type_registry.mock';
 import { ConsoleManager } from '../../management/components/console';
 import type { State } from '../store';
 import { createStore } from '../store';
@@ -61,22 +64,36 @@ export const TestProvidersComponent: React.FC<Props> = ({
   cellActions = [],
 }) => {
   const queryClient = new QueryClient();
+  const actionTypeRegistry = actionTypeRegistryMock.create();
+  const mockGetInitialConversations = jest.fn(() => ({}));
+  const mockGetComments = jest.fn(() => []);
+  const mockHttp = httpServiceMock.createStartContract({ basePath: '/test' });
+
   return (
     <I18nProvider>
       <MockKibanaContextProvider>
         <ReduxStoreProvider store={store}>
           <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
-            <QueryClientProvider client={queryClient}>
-              <ExpandableFlyoutProvider>
-                <ConsoleManager>
-                  <CellActionsProvider
-                    getTriggerCompatibleActions={() => Promise.resolve(cellActions)}
-                  >
-                    <DragDropContext onDragEnd={onDragEnd}>{children}</DragDropContext>
-                  </CellActionsProvider>
-                </ConsoleManager>
-              </ExpandableFlyoutProvider>
-            </QueryClientProvider>
+            <AssistantProvider
+              actionTypeRegistry={actionTypeRegistry}
+              augmentMessageCodeBlocks={jest.fn()}
+              getComments={mockGetComments}
+              getInitialConversations={mockGetInitialConversations}
+              setConversations={jest.fn()}
+              http={mockHttp}
+            >
+              <QueryClientProvider client={queryClient}>
+                <ExpandableFlyoutProvider>
+                  <ConsoleManager>
+                    <CellActionsProvider
+                      getTriggerCompatibleActions={() => Promise.resolve(cellActions)}
+                    >
+                      <DragDropContext onDragEnd={onDragEnd}>{children}</DragDropContext>
+                    </CellActionsProvider>
+                  </ConsoleManager>
+                </ExpandableFlyoutProvider>
+              </QueryClientProvider>
+            </AssistantProvider>
           </ThemeProvider>
         </ReduxStoreProvider>
       </MockKibanaContextProvider>
@@ -93,28 +110,46 @@ const TestProvidersWithPrivilegesComponent: React.FC<Props> = ({
   store = createStore(state, SUB_PLUGINS_REDUCER, kibanaObservable, storage),
   onDragEnd = jest.fn(),
   cellActions = [],
-}) => (
-  <I18nProvider>
-    <MockKibanaContextProvider>
-      <ReduxStoreProvider store={store}>
-        <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
-          <UserPrivilegesProvider
-            kibanaCapabilities={
-              {
-                siem: { show: true, crud: true },
-                [CASES_FEATURE_ID]: { read_cases: true, crud_cases: false },
-              } as unknown as Capabilities
-            }
-          >
-            <CellActionsProvider getTriggerCompatibleActions={() => Promise.resolve(cellActions)}>
-              <DragDropContext onDragEnd={onDragEnd}>{children}</DragDropContext>
-            </CellActionsProvider>
-          </UserPrivilegesProvider>
-        </ThemeProvider>
-      </ReduxStoreProvider>
-    </MockKibanaContextProvider>
-  </I18nProvider>
-);
+}) => {
+  const actionTypeRegistry = actionTypeRegistryMock.create();
+  const mockGetInitialConversations = jest.fn(() => ({}));
+  const mockGetComments = jest.fn(() => []);
+  const mockHttp = httpServiceMock.createStartContract({ basePath: '/test' });
+
+  return (
+    <I18nProvider>
+      <MockKibanaContextProvider>
+        <ReduxStoreProvider store={store}>
+          <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
+            <AssistantProvider
+              actionTypeRegistry={actionTypeRegistry}
+              augmentMessageCodeBlocks={jest.fn()}
+              getComments={mockGetComments}
+              getInitialConversations={mockGetInitialConversations}
+              setConversations={jest.fn()}
+              http={mockHttp}
+            >
+              <UserPrivilegesProvider
+                kibanaCapabilities={
+                  {
+                    siem: { show: true, crud: true },
+                    [CASES_FEATURE_ID]: { read_cases: true, crud_cases: false },
+                  } as unknown as Capabilities
+                }
+              >
+                <CellActionsProvider
+                  getTriggerCompatibleActions={() => Promise.resolve(cellActions)}
+                >
+                  <DragDropContext onDragEnd={onDragEnd}>{children}</DragDropContext>
+                </CellActionsProvider>
+              </UserPrivilegesProvider>
+            </AssistantProvider>
+          </ThemeProvider>
+        </ReduxStoreProvider>
+      </MockKibanaContextProvider>
+    </I18nProvider>
+  );
+};
 
 export const TestProviders = React.memo(TestProvidersComponent);
 export const TestProvidersWithPrivileges = React.memo(TestProvidersWithPrivilegesComponent);
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx
index 03231f2030eb2..1e2ae5b88fba7 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx
@@ -10,7 +10,6 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 
 import { APP_UI_ID } from '../../../../../common/constants';
 import { SecurityPageName } from '../../../../app/types';
-import { HeaderPage } from '../../../../common/components/header_page';
 import { ImportDataModal } from '../../../../common/components/import_data_modal';
 import { SecuritySolutionLinkButton } from '../../../../common/components/links';
 import { getDetectionEngineUrl } from '../../../../common/components/link_to/redirect_to_detection_engine';
@@ -43,6 +42,7 @@ import * as i18n from '../../../../detections/pages/detection_engine/rules/trans
 import { useInvalidateFetchRuleManagementFiltersQuery } from '../../../rule_management/api/hooks/use_fetch_rule_management_filters_query';
 
 import { MaintenanceWindowCallout } from '../../components/maintenance_window_callout/maintenance_window_callout';
+import { SuperHeader } from './super_header';
 
 const RulesPageComponent: React.FC = () => {
   const [isImportModalVisible, showImportModal, hideImportModal] = useBoolState();
@@ -114,7 +114,7 @@ const RulesPageComponent: React.FC = () => {
 
       <RulesTableContextProvider>
         <SecuritySolutionPageWrapper>
-          <HeaderPage title={i18n.PAGE_TITLE}>
+          <SuperHeader>
             <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={true}>
               <EuiFlexItem grow={false}>
                 <LoadPrePackagedRules>
@@ -155,7 +155,7 @@ const RulesPageComponent: React.FC = () => {
                 </SecuritySolutionLinkButton>
               </EuiFlexItem>
             </EuiFlexGroup>
-          </HeaderPage>
+          </SuperHeader>
           {(prePackagedRuleStatus === 'ruleNeedUpdate' ||
             prePackagedTimelineStatus === 'timelineNeedUpdate') && (
             <UpdatePrePackagedRulesCallOut data-test-subj="update-callout-button" />
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/super_header.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/super_header.tsx
new file mode 100644
index 0000000000000..e7bdaca00f2d1
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/super_header.tsx
@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { NewChat } from '@kbn/elastic-assistant';
+import React, { useCallback, useMemo } from 'react';
+
+import { getPromptContextFromDetectionRules } from '../../../../assistant/helpers';
+import { HeaderPage } from '../../../../common/components/header_page';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
+import { useRulesTableContext } from '../../components/rules_table/rules_table/rules_table_context';
+import * as i18n from '../../../../detections/pages/detection_engine/rules/translations';
+
+export const SuperHeader: React.FC<{ children: React.ReactNode }> = React.memo(({ children }) => {
+  const isAssistantEnabled = useIsExperimentalFeatureEnabled('assistantEnabled');
+  const memoizedChildren = useMemo(() => children, [children]);
+  // Rules state
+  const {
+    state: { rules, selectedRuleIds },
+  } = useRulesTableContext();
+
+  const selectedRules = useMemo(
+    () => rules.filter((rule) => selectedRuleIds.includes(rule.id)),
+    [rules, selectedRuleIds]
+  );
+
+  const getPromptContext = useCallback(
+    async () => getPromptContextFromDetectionRules(selectedRules),
+    [selectedRules]
+  );
+
+  return (
+    <HeaderPage
+      title={
+        <>
+          {i18n.PAGE_TITLE}{' '}
+          {isAssistantEnabled && selectedRules.length > 0 && (
+            <NewChat
+              category="detection-rules"
+              conversationId={i18n.DETECTION_RULES_CONVERSATION_ID}
+              description={i18n.RULE_MANAGEMENT_CONTEXT_DESCRIPTION}
+              getPromptContext={getPromptContext}
+              iconType={null}
+              suggestedUserPrompt={i18n.EXPLAIN_THEN_SUMMARIZE_RULE_DETAILS}
+              tooltip={i18n.RULE_MANAGEMENT_CONTEXT_TOOLTIP}
+            >
+              {'🪄✨'}
+            </NewChat>
+          )}
+        </>
+      }
+    >
+      {memoizedChildren}
+    </HeaderPage>
+  );
+});
+
+SuperHeader.displayName = 'NewChatComponent';
diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts
index 487a6176969d1..3ad119a67c4ac 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts
+++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts
@@ -1140,3 +1140,33 @@ export const SAVED_QUERY_LOAD_ERROR_TOAST = i18n.translate(
     defaultMessage: 'Failed to load the saved query',
   }
 );
+
+// Prompt Context i18n
+export const RULE_MANAGEMENT_CONTEXT_DESCRIPTION = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleManagement.ruleManagementContextDescription',
+  {
+    defaultMessage: 'Selected Detection Rules',
+  }
+);
+
+export const EXPLAIN_THEN_SUMMARIZE_RULE_DETAILS = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleManagement.explainThenSummarizeRuleDetails',
+  {
+    defaultMessage:
+      "Please explain the selected rules above. For each rule, highlight why they are relevant, the query as published on Elastic's detection rules repository and an in-depth explanation of it, and what they typically mean for an organization if detected.",
+  }
+);
+
+export const DETECTION_RULES_CONVERSATION_ID = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleManagement.detectionRulesConversationId',
+  {
+    defaultMessage: 'Detection Rules',
+  }
+);
+
+export const RULE_MANAGEMENT_CONTEXT_TOOLTIP = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleManagement.ruleManagementContextTooltip',
+  {
+    defaultMessage: 'Add this alert as context',
+  }
+);
diff --git a/x-pack/plugins/security_solution/public/management/cypress/e2e/mocked_data/reponse_actions_history.cy.ts b/x-pack/plugins/security_solution/public/management/cypress/e2e/mocked_data/reponse_actions_history.cy.ts
index a93562cd57785..b829e6e21c585 100644
--- a/x-pack/plugins/security_solution/public/management/cypress/e2e/mocked_data/reponse_actions_history.cy.ts
+++ b/x-pack/plugins/security_solution/public/management/cypress/e2e/mocked_data/reponse_actions_history.cy.ts
@@ -31,7 +31,8 @@ describe('Response actions history page', () => {
     }
   });
 
-  it('retains expanded action details on page reload', () => {
+  // Flakey, example build failure: https://buildkite.com/elastic/kibana-pull-request/builds/132245
+  it.skip('retains expanded action details on page reload', () => {
     cy.visit(`/app/security/administration/response_actions_history`);
     cy.getByTestSubj('response-actions-list-expand-button').eq(3).click(); // 4th row on 1st page
     cy.getByTestSubj('response-actions-list-details-tray').should('exist');
diff --git a/x-pack/plugins/security_solution/public/overview/pages/data_quality.tsx b/x-pack/plugins/security_solution/public/overview/pages/data_quality.tsx
index a04c24ea2045b..f27c239320ddc 100644
--- a/x-pack/plugins/security_solution/public/overview/pages/data_quality.tsx
+++ b/x-pack/plugins/security_solution/public/overview/pages/data_quality.tsx
@@ -38,6 +38,7 @@ import { useLocalStorage } from '../../common/components/local_storage';
 import { SecuritySolutionPageWrapper } from '../../common/components/page_wrapper';
 import { DEFAULT_BYTES_FORMAT, DEFAULT_NUMBER_FORMAT } from '../../../common/constants';
 import { useSourcererDataView } from '../../common/containers/sourcerer';
+import { useIsExperimentalFeatureEnabled } from '../../common/hooks/use_experimental_features';
 import {
   KibanaServices,
   useGetUserCasesPermissions,
@@ -128,6 +129,7 @@ const renderOption = (
 );
 
 const DataQualityComponent: React.FC = () => {
+  const isAssistantEnabled = useIsExperimentalFeatureEnabled('assistantEnabled');
   const httpFetch = KibanaServices.get().http.fetch;
   const theme = useTheme();
   const toasts = useToasts();
@@ -235,6 +237,7 @@ const DataQualityComponent: React.FC = () => {
             getGroupByFieldsOnClick={getGroupByFieldsOnClick}
             httpFetch={httpFetch}
             ilmPhases={ilmPhases}
+            isAssistantEnabled={isAssistantEnabled}
             lastChecked={lastChecked}
             openCreateCaseFlyout={openCreateCaseFlyout}
             patterns={alertsAndSelectedPatterns}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
index c5bc7821278b5..8304dd664ee63 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
@@ -68,6 +68,13 @@ Array [
             />
           </button>
         </div>
+        <div
+          class="euiFlexItem emotion-euiFlexItem-growZero"
+        >
+          <div
+            class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
+          />
+        </div>
       </div>
     </div>
   </div>,
@@ -181,7 +188,15 @@ exports[`Details Panel Component DetailsPanel:EventDetails: rendering it should
       >
         <div
           class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-flexEnd-column"
-        />
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/expandable_event.tsx b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/expandable_event.tsx
index addeb6889af1c..99ed0e32af6c4 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/expandable_event.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/expandable_event.tsx
@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { NewChatById } from '@kbn/elastic-assistant';
+import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
 import { isEmpty } from 'lodash/fp';
 import {
   EuiButtonIcon,
@@ -20,7 +22,6 @@ import {
 import React from 'react';
 import styled from 'styled-components';
 
-import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { getAlertDetailsUrl } from '../../../../common/components/link_to';
 import {
@@ -32,6 +33,10 @@ import type { BrowserFields } from '../../../../common/containers/source';
 import { EventDetails } from '../../../../common/components/event_details/event_details';
 import type { TimelineEventsDetailsItem } from '../../../../../common/search_strategy/timeline';
 import * as i18n from './translations';
+import {
+  ALERT_SUMMARY_CONVERSATION_ID,
+  EVENT_SUMMARY_CONVERSATION_ID,
+} from '../../../../common/components/event_details/translations';
 import { PreferenceFormattedDate } from '../../../../common/components/formatted_date';
 import { SecurityPageName } from '../../../../../common/constants';
 import { useGetAlertDetailsFlyoutLink } from './use_get_alert_details_flyout_link';
@@ -58,6 +63,7 @@ interface ExpandableEventTitleProps {
   eventIndex: string;
   isAlert: boolean;
   loading: boolean;
+  promptContextId?: string;
   ruleName?: string;
   timestamp: string;
   handleOnEventClosed?: HandleOnEventClosed;
@@ -80,7 +86,17 @@ const StyledEuiFlexItem = styled(EuiFlexItem)`
 `;
 
 export const ExpandableEventTitle = React.memo<ExpandableEventTitleProps>(
-  ({ eventId, eventIndex, isAlert, loading, handleOnEventClosed, ruleName, timestamp }) => {
+  ({
+    eventId,
+    eventIndex,
+    isAlert,
+    loading,
+    handleOnEventClosed,
+    promptContextId,
+    ruleName,
+    timestamp,
+  }) => {
+    const isAssistantEnabled = useIsExperimentalFeatureEnabled('assistantEnabled');
     const isAlertDetailsPageEnabled = useIsExperimentalFeatureEnabled('alertDetailsPageEnabled');
     const { onClick } = useGetSecuritySolutionLinkProps()({
       deepLinkId: SecurityPageName.alerts,
@@ -134,19 +150,35 @@ export const ExpandableEventTitle = React.memo<ExpandableEventTitleProps>(
                 />
               </EuiFlexItem>
             )}
-            {isAlert && alertDetailsLink && (
-              <EuiCopy textToCopy={alertDetailsLink}>
-                {(copy) => (
-                  <EuiButtonEmpty
-                    onClick={copy}
-                    iconType="share"
-                    data-test-subj="copy-alert-flyout-link"
-                  >
-                    {i18n.SHARE_ALERT}
-                  </EuiButtonEmpty>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup alignItems="center" direction="row" gutterSize="none">
+                {isAssistantEnabled && promptContextId != null && (
+                  <EuiFlexItem grow={false}>
+                    <NewChatById
+                      conversationId={
+                        isAlert ? ALERT_SUMMARY_CONVERSATION_ID : EVENT_SUMMARY_CONVERSATION_ID
+                      }
+                      promptContextId={promptContextId}
+                    />
+                  </EuiFlexItem>
                 )}
-              </EuiCopy>
-            )}
+                {isAlert && alertDetailsLink && (
+                  <EuiFlexItem grow={false}>
+                    <EuiCopy textToCopy={alertDetailsLink}>
+                      {(copy) => (
+                        <EuiButtonEmpty
+                          onClick={copy}
+                          iconType="share"
+                          data-test-subj="copy-alert-flyout-link"
+                        >
+                          {i18n.SHARE_ALERT}
+                        </EuiButtonEmpty>
+                      )}
+                    </EuiCopy>
+                  </EuiFlexItem>
+                )}
+              </EuiFlexGroup>
+            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
       </StyledEuiFlexGroup>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/header.tsx b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/header.tsx
index eac84c1853693..8b3d50d849c4b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/header.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/header.tsx
@@ -18,6 +18,7 @@ interface FlyoutHeaderComponentProps {
   isHostIsolationPanelOpen: boolean;
   isolateAction: 'isolateHost' | 'unisolateHost';
   loading: boolean;
+  promptContextId?: string;
   ruleName: string;
   showAlertDetails: () => void;
   timestamp: string;
@@ -30,6 +31,7 @@ const FlyoutHeaderContentComponent = ({
   isHostIsolationPanelOpen,
   isolateAction,
   loading,
+  promptContextId,
   ruleName,
   showAlertDetails,
   timestamp,
@@ -44,6 +46,7 @@ const FlyoutHeaderContentComponent = ({
           eventIndex={eventIndex}
           isAlert={isAlert}
           loading={loading}
+          promptContextId={promptContextId}
           ruleName={ruleName}
           timestamp={timestamp}
         />
@@ -60,6 +63,7 @@ const FlyoutHeaderComponent = ({
   isHostIsolationPanelOpen,
   isolateAction,
   loading,
+  promptContextId,
   ruleName,
   showAlertDetails,
   timestamp,
@@ -73,6 +77,7 @@ const FlyoutHeaderComponent = ({
         isHostIsolationPanelOpen={isHostIsolationPanelOpen}
         isolateAction={isolateAction}
         loading={loading}
+        promptContextId={promptContextId}
         ruleName={ruleName}
         showAlertDetails={showAlertDetails}
         timestamp={timestamp}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/index.tsx
index 957bd82e675c1..eda57d0a49222 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/index.tsx
@@ -5,11 +5,14 @@
  * 2.0.
  */
 
+import { USER_PROMPTS, useAssistantOverlay } from '@kbn/elastic-assistant';
 import { EuiSpacer, EuiFlyoutBody } from '@elastic/eui';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import deepEqual from 'fast-deep-equal';
 import type { EntityType } from '@kbn/timelines-plugin/common';
+
+import { getPromptContextFromEventDetailsItem } from '../../../../assistant/helpers';
 import type { BrowserFields } from '../../../../common/containers/source';
 import { ExpandableEvent, ExpandableEventTitle } from './expandable_event';
 import { useTimelineEventsDetails } from '../../../containers/details';
@@ -18,9 +21,20 @@ import type { RunTimeMappings } from '../../../../common/store/sourcerer/model';
 import { useHostIsolationTools } from './use_host_isolation_tools';
 import { FlyoutBody, FlyoutHeader, FlyoutFooter } from './flyout';
 import { useBasicDataFromDetailsData, getAlertIndexAlias } from './helpers';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { useSpaceId } from '../../../../common/hooks/use_space_id';
 import { EndpointIsolateSuccess } from '../../../../common/components/endpoint/host_isolation';
 import { HostIsolationPanel } from '../../../../detections/components/host_isolation';
+import {
+  ALERT_SUMMARY_CONVERSATION_ID,
+  ALERT_SUMMARY_CONTEXT_DESCRIPTION,
+  ALERT_SUMMARY_VIEW_CONTEXT_TOOLTIP,
+  EVENT_SUMMARY_CONVERSATION_ID,
+  EVENT_SUMMARY_CONTEXT_DESCRIPTION,
+  EVENT_SUMMARY_VIEW_CONTEXT_TOOLTIP,
+  SUMMARY_VIEW,
+  TIMELINE_VIEW,
+} from '../../../../common/components/event_details/translations';
 
 interface EventDetailsPanelProps {
   browserFields: BrowserFields;
@@ -39,6 +53,8 @@ interface EventDetailsPanelProps {
   isReadOnly?: boolean;
 }
 
+const useAssistantNoop = () => ({ promptContextId: undefined });
+
 const EventDetailsPanelComponent: React.FC<EventDetailsPanelProps> = ({
   browserFields,
   entityType = 'events', // Default to events so only alerts have to pass entityType in
@@ -51,6 +67,9 @@ const EventDetailsPanelComponent: React.FC<EventDetailsPanelProps> = ({
   scopeId,
   isReadOnly,
 }) => {
+  const isAssistantEnabled = useIsExperimentalFeatureEnabled('assistantEnabled');
+  // TODO: changing feature flags requires a hard refresh to take effect, but this temporary workaround technically violates the rules of hooks:
+  const useAssistant = isAssistantEnabled ? useAssistantOverlay : useAssistantNoop;
   const currentSpaceId = useSpaceId();
   const { indexName } = expandedEvent;
   const eventIndex = getAlertIndexAlias(indexName, currentSpaceId) ?? indexName;
@@ -76,6 +95,23 @@ const EventDetailsPanelComponent: React.FC<EventDetailsPanelProps> = ({
   const { alertId, isAlert, hostName, ruleName, timestamp } =
     useBasicDataFromDetailsData(detailsData);
 
+  const view = useMemo(() => (isFlyoutView ? SUMMARY_VIEW : TIMELINE_VIEW), [isFlyoutView]);
+
+  const getPromptContext = useCallback(
+    async () => getPromptContextFromEventDetailsItem(detailsData ?? []),
+    [detailsData]
+  );
+
+  const { promptContextId } = useAssistant(
+    isAlert ? 'alert' : 'event',
+    isAlert ? ALERT_SUMMARY_CONVERSATION_ID : EVENT_SUMMARY_CONVERSATION_ID,
+    isAlert ? ALERT_SUMMARY_CONTEXT_DESCRIPTION(view) : EVENT_SUMMARY_CONTEXT_DESCRIPTION(view),
+    getPromptContext,
+    null,
+    USER_PROMPTS.EXPLAIN_THEN_SUMMARIZE_SUGGEST_INVESTIGATION_GUIDE_NON_I18N,
+    isAlert ? ALERT_SUMMARY_VIEW_CONTEXT_TOOLTIP : EVENT_SUMMARY_VIEW_CONTEXT_TOOLTIP
+  );
+
   const header = useMemo(
     () =>
       isFlyoutView || isHostIsolationPanelOpen ? (
@@ -89,6 +125,7 @@ const EventDetailsPanelComponent: React.FC<EventDetailsPanelProps> = ({
           ruleName={ruleName}
           showAlertDetails={showAlertDetails}
           timestamp={timestamp}
+          promptContextId={promptContextId}
         />
       ) : (
         <ExpandableEventTitle
@@ -99,20 +136,22 @@ const EventDetailsPanelComponent: React.FC<EventDetailsPanelProps> = ({
           ruleName={ruleName}
           timestamp={timestamp}
           handleOnEventClosed={handleOnEventClosed}
+          promptContextId={promptContextId}
         />
       ),
     [
+      isFlyoutView,
+      isHostIsolationPanelOpen,
       expandedEvent.eventId,
       eventIndex,
-      handleOnEventClosed,
       isAlert,
-      isFlyoutView,
-      isHostIsolationPanelOpen,
       isolateAction,
       loading,
       ruleName,
       showAlertDetails,
       timestamp,
+      handleOnEventClosed,
+      promptContextId,
     ]
   );
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/data_provider.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/data_provider.ts
index 3ed66744c760f..2778874c688e5 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/data_provider.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/data_provider.ts
@@ -4,6 +4,8 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import type { QueryType } from '@kbn/elastic-assistant';
+
 import type { PrimitiveOrArrayOfPrimitives } from '../../../../common/lib/kuery';
 /** Represents the Timeline data providers */
 
@@ -67,6 +69,8 @@ export interface DataProvider {
    * Array of multiple values for a field
    */
   valueArray?: string[] | null;
+
+  queryType?: QueryType;
 }
 
 export type DataProvidersAnd = Pick<DataProvider, Exclude<keyof DataProvider, 'and'>>;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
index 0d77cfe739b3d..06516dff4370f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
@@ -6,6 +6,8 @@
  */
 
 import { EuiBadge, EuiLoadingContent, EuiTabs, EuiTab } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { Assistant } from '@kbn/elastic-assistant';
 import { isEmpty } from 'lodash/fp';
 import React, { lazy, memo, Suspense, useCallback, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
@@ -33,7 +35,9 @@ import {
   getEventIdToNoteIdsSelector,
 } from './selectors';
 import * as i18n from './translations';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { useLicense } from '../../../../common/hooks/use_license';
+import { TIMELINE_CONVERSATION_TITLE } from '../../../../assistant/content/conversations/translations';
 
 const HideShowContainer = styled.div.attrs<{ $isVisible: boolean; isOverflowYScroll: boolean }>(
   ({ $isVisible = false, isOverflowYScroll = false }) => ({
@@ -46,6 +50,11 @@ const HideShowContainer = styled.div.attrs<{ $isVisible: boolean; isOverflowYScr
   flex: 1;
 `;
 
+const AssistantTabContainer = styled.div`
+  overflow-y: auto;
+  width: 100%;
+`;
+
 const QueryTabContent = lazy(() => import('../query_tab_content'));
 const EqlTabContent = lazy(() => import('../eql_tab_content'));
 const GraphTabContent = lazy(() => import('../graph_tab_content'));
@@ -130,10 +139,39 @@ const PinnedTab: React.FC<{
 ));
 PinnedTab.displayName = 'PinnedTab';
 
-type ActiveTimelineTabProps = BasicTimelineTab & { activeTimelineTab: TimelineTabs };
+const AssistantTab: React.FC<{
+  renderCellValue: (props: CellValueElementProps) => React.ReactNode;
+  rowRenderers: RowRenderer[];
+  timelineId: TimelineId;
+  shouldRefocusPrompt: boolean;
+}> = memo(({ renderCellValue, rowRenderers, timelineId, shouldRefocusPrompt }) => (
+  <Suspense fallback={<EuiLoadingContent lines={10} />}>
+    <AssistantTabContainer>
+      <Assistant
+        conversationId={TIMELINE_CONVERSATION_TITLE}
+        shouldRefocusPrompt={shouldRefocusPrompt}
+      />
+    </AssistantTabContainer>
+  </Suspense>
+));
+
+AssistantTab.displayName = 'AssistantTab';
+
+type ActiveTimelineTabProps = BasicTimelineTab & {
+  activeTimelineTab: TimelineTabs;
+  showTimeline: boolean;
+};
 
 const ActiveTimelineTab = memo<ActiveTimelineTabProps>(
-  ({ activeTimelineTab, renderCellValue, rowRenderers, timelineId, timelineType }) => {
+  ({
+    activeTimelineTab,
+    renderCellValue,
+    rowRenderers,
+    timelineId,
+    timelineType,
+    showTimeline,
+  }) => {
+    const isAssistantEnabled = useIsExperimentalFeatureEnabled('assistantEnabled');
     const getTab = useCallback(
       (tab: TimelineTabs) => {
         switch (tab) {
@@ -202,6 +240,25 @@ const ActiveTimelineTab = memo<ActiveTimelineTabProps>(
         >
           {isGraphOrNotesTabs && getTab(activeTimelineTab)}
         </HideShowContainer>
+        {isAssistantEnabled && (
+          <HideShowContainer
+            $isVisible={activeTimelineTab === TimelineTabs.securityAssistant}
+            isOverflowYScroll={activeTimelineTab === TimelineTabs.securityAssistant}
+            data-test-subj={`timeline-tab-content-security-assistant`}
+            css={css`
+              overflow: hidden !important;
+            `}
+          >
+            <AssistantTab
+              renderCellValue={renderCellValue}
+              rowRenderers={rowRenderers}
+              timelineId={timelineId}
+              shouldRefocusPrompt={
+                showTimeline && activeTimelineTab === TimelineTabs.securityAssistant
+              }
+            />
+          </HideShowContainer>
+        )}
       </>
     );
   }
@@ -239,6 +296,7 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
   sessionViewConfig,
   timelineDescription,
 }) => {
+  const isAssistantEnabled = useIsExperimentalFeatureEnabled('assistantEnabled');
   const dispatch = useDispatch();
   const getActiveTab = useMemo(() => getActiveTabSelector(), []);
   const getShowTimeline = useMemo(() => getShowTimelineSelector(), []);
@@ -309,6 +367,10 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
     setActiveTab(TimelineTabs.session);
   }, [setActiveTab]);
 
+  const setSecurityAssistantAsActiveTab = useCallback(() => {
+    setActiveTab(TimelineTabs.securityAssistant);
+  }, [setActiveTab]);
+
   useEffect(() => {
     if (!graphEventId && activeTab === TimelineTabs.graph) {
       setQueryAsActiveTab();
@@ -389,6 +451,17 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
               </div>
             )}
           </StyledEuiTab>
+          {isAssistantEnabled && (
+            <StyledEuiTab
+              data-test-subj={`timelineTabs-${TimelineTabs.securityAssistant}`}
+              onClick={setSecurityAssistantAsActiveTab}
+              disabled={timelineType === TimelineType.template}
+              isSelected={activeTab === TimelineTabs.securityAssistant}
+              key={TimelineTabs.securityAssistant}
+            >
+              <span>{i18n.SECURITY_ASSISTANT}</span>
+            </StyledEuiTab>
+          )}
         </EuiTabs>
       )}
 
@@ -399,6 +472,7 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
         timelineId={timelineId}
         timelineType={timelineType}
         timelineDescription={timelineDescription}
+        showTimeline={showTimeline}
       />
     </>
   );
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/translations.ts
index e3a53675389b7..73baeb60ce4f4 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/translations.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/translations.ts
@@ -25,6 +25,13 @@ export const ANALYZER_TAB = i18n.translate(
   }
 );
 
+export const ASSISTANT_TAB = i18n.translate(
+  'xpack.securitySolution.timeline.tabs.assistantTabTitle',
+  {
+    defaultMessage: 'Security assistant',
+  }
+);
+
 export const NOTES_TAB = i18n.translate(
   'xpack.securitySolution.timeline.tabs.notesTabTimelineTitle',
   {
@@ -39,6 +46,13 @@ export const PINNED_TAB = i18n.translate(
   }
 );
 
+export const SECURITY_ASSISTANT = i18n.translate(
+  'xpack.securitySolution.timeline.tabs.securityAssistantTimelineTitle',
+  {
+    defaultMessage: 'Security Assistant',
+  }
+);
+
 export const SESSION_TAB = i18n.translate(
   'xpack.securitySolution.timeline.tabs.sessionTabTimelineTitle',
   {
diff --git a/x-pack/plugins/security_solution/tsconfig.json b/x-pack/plugins/security_solution/tsconfig.json
index e519189aa628e..291b30b023148 100644
--- a/x-pack/plugins/security_solution/tsconfig.json
+++ b/x-pack/plugins/security_solution/tsconfig.json
@@ -85,11 +85,13 @@
     "@kbn/kibana-react-plugin",
     "@kbn/core-chrome-browser",
     "@kbn/ecs-data-quality-dashboard",
+    "@kbn/elastic-assistant",
     "@kbn/data-views-plugin",
     "@kbn/datemath",
     "@kbn/ui-theme",
     "@kbn/securitysolution-list-api",
     "@kbn/core-http-browser",
+    "@kbn/core-http-browser-mocks",
     "@kbn/securitysolution-list-hooks",
     "@kbn/securitysolution-exception-list-components",
     "@kbn/rison",
diff --git a/yarn.lock b/yarn.lock
index 688d4f8843095..c45f3c91128e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4010,6 +4010,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/elastic-assistant@link:x-pack/packages/kbn-elastic-assistant":
+  version "0.0.0"
+  uid ""
+
 "@kbn/elasticsearch-client-plugin@link:test/plugin_functional/plugins/elasticsearch_client_plugin":
   version "0.0.0"
   uid ""