Promote connecting AI clients (Claude, ChatGPT) in Rill Cloud chat#9661
Promote connecting AI clients (Claude, ChatGPT) in Rill Cloud chat#9661nishantmonu51 wants to merge 3 commits into
Conversation
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.
b66eca7 to
e332783
Compare
| Query your Rill metrics from your favorite AI client. | ||
| </div> | ||
| <div class="connect-hero-subtitle">Or directly ask questions in Rill.</div> | ||
| <ConnectClientButtons /> |
There was a problem hiding this comment.
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()}> |
There was a problem hiding this comment.
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"> |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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} |
There was a problem hiding this comment.
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.
# Conflicts: # web-admin/src/routes/[organization]/[project]/+layout.svelte # web-admin/src/routes/[organization]/[project]/-/ai/+layout.svelte
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.
MCPConnectDialogfor the chosen provider via an optionalproviderprop.connect-clientSvelte context. Onlyweb-adminenables it, so Rill Developer and embedded dashboards render no CTA (embed is also guarded explicitly viaEmbedStore.isEmbedded()).Checklist:
Developed in collaboration with Claude Code