Skip to content

Promote connecting AI clients (Claude, ChatGPT) in Rill Cloud chat#9661

Open
nishantmonu51 wants to merge 3 commits into
mainfrom
connect_to_claude
Open

Promote connecting AI clients (Claude, ChatGPT) in Rill Cloud chat#9661
nishantmonu51 wants to merge 3 commits into
mainfrom
connect_to_claude

Conversation

@nishantmonu51

Copy link
Copy Markdown
Collaborator

Surfaces prominent, branded entry points for connecting external AI clients to a Rill project over MCP, replacing the single generic button that was buried at the bottom of the chat sidebar.

  • Empty-state hero card ("Query your metrics from Claude, ChatGPT, and more") in every Cloud chat surface: global, dashboard, and developer chat.
  • Restores the "Connect your own client" button in the project chat's left sidebar (expanded and collapsed).
  • Adds a compact connect button to the dashboard/developer chat header (which has no sidebar).
  • Brands MCPConnectDialog for the chosen provider via an optional provider prop.
  • Wired through a shared connect-client Svelte context. Only web-admin enables it, so Rill Developer and embedded dashboards render no CTA (embed is also guarded explicitly via EmbedStore.isEmbedded()).

Checklist:

  • Covered by tests
  • Ran it and it works as intended
  • Reviewed the diff before requesting a review
  • Checked for unhandled edge cases
  • Linked the issues it closes
  • Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
  • Intend to cherry-pick into the release branch
  • I'm proud of this work!

Developed in collaboration with Claude Code

@nishantmonu51 nishantmonu51 requested a review from AdityaHegde July 7, 2026 18:06
Surface prominent, branded entry points for connecting external AI clients
(Claude, ChatGPT, Gemini) to a Rill project over MCP:

- Empty-state hero card in every Cloud chat surface (global, dashboard, developer)
- Restore the "Connect your own client" button in the project chat sidebar
- Compact connect button in the dashboard/developer chat header
- Brand the MCPConnectDialog for the chosen provider

Wired via a shared connect-client Svelte context; only web-admin enables it, so
Rill Developer and embedded dashboards render no CTA.
Query your Rill metrics from your favorite AI client.
</div>
<div class="connect-hero-subtitle">Or directly ask questions in Rill.</div>
<ConnectClientButtons />

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only other instance of this is test harness. Even those tests are not really testing anything singnificant. Lets move the markup here and remove those tests.

const label = "Connect Claude, ChatGPT & more";
</script>

<IconButton ariaLabel={label} bgGray onclick={() => connectClient.open()}>

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since there is no way to change the provider in MCPConnectDialog this button feels like a restricted action. How about adding some way to switch privoder in MCPConnectDialog?

Or conversely since there is no difference for providers, just label and icon how about just generalising messages in MCPConnectDialog?

</div>
{#if connectClient.enabled}
<div class="collapsed-footer">
<span title="Connect your own client">

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is very similar to ConnectClientHeaderButton.svelte. How about adding variants to ConnectClientHeaderButton and using it?

// Never surface connect CTAs inside an embedded dashboard, regardless of
// whether a shell wired the context.
if (EmbedStore.isEmbedded()) return DISABLED_CONTEXT;
if (!hasContext(CONNECT_CLIENT_CONTEXT_KEY)) return DISABLED_CONTEXT;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should throw an error IMO. Not having CONNECT_CLIENT_CONTEXT_KEY means there was a dev error, if this silently hides then it might get missed.

<div class="chatbot-header">
<span class="chatbot-title">{currentConversationDto?.title || ""}</span>
<div class="chatbot-header-actions">
{#if connectClient.enabled}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe good to move this check inside ConnectClientHeaderButton?

- Inline the branded provider buttons into ConnectClientHero; remove the
  single-use ConnectClientButtons component and its tests.
- Generalize MCPConnectDialog: drop the per-provider prop/branding.
- Consolidate the connect buttons into one ConnectClientButton with
  full/square/icon variants that self-gates; use it in the sidebar and header.
- getConnectClientContext() now throws when no provider ancestor is present;
  consumers gate on the adminServer flag, so Cloud dev errors are loud while
  Rill Developer and embedded dashboards (adminServer=false) never call it.
@nishantmonu51 nishantmonu51 added Type:Feature New feature request Size:M Medium change: 100-499 lines labels Jul 10, 2026
# Conflicts:
#	web-admin/src/routes/[organization]/[project]/+layout.svelte
#	web-admin/src/routes/[organization]/[project]/-/ai/+layout.svelte
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Size:M Medium change: 100-499 lines Type:Feature New feature request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants