apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-05-16 18:25:17 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add CTAs to hosted tools error message for docs and custom servers

Browse source
This commit is contained in:
akhisud3195 2025-06-03 21:47:31 +05:30
parent 79bb6eff21
commit 5c92ff279e
2 changed files with 39 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

47
apps/rowboat/app/projects/[projectId]/tools/components/HostedServers.tsx
View file

@ -20,6 +20,7 @@ import {
ServerCard, ServerCard,
ToolManagementPanel, ToolManagementPanel,
} from './MCPServersCommon'; } from './MCPServersCommon';
import type { Key } from 'react';
type McpServerType = z.infer<typeof MCPServer>; type McpServerType = z.infer<typeof MCPServer>;
type McpToolType = z.infer<typeof MCPServer>['tools'][number]; type McpToolType = z.infer<typeof MCPServer>['tools'][number];
@ -90,7 +91,7 @@ const ErrorBanner = ({ onRetry }: { onRetry: () => void }) => (
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400" /> <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400" />
<p className="text-sm text-red-700 dark:text-red-300"> <p className="text-sm text-red-700 dark:text-red-300">
Unable to load hosted tools. Please check your connection and try again. If the problem persists, contact us on Discord. Unable to load hosted tools. Please check your connection and try again. If the problem persists, contact us on <a href={DISCORD_LINK} target="_blank" rel="noopener noreferrer" className="underline hover:text-red-600 dark:hover:text-red-300">Discord</a>.
</p> </p>
</div> </div>
<Button <Button
@ -106,7 +107,18 @@ const ErrorBanner = ({ onRetry }: { onRetry: () => void }) => (
</div> </div>
); );
export function HostedServers() { const ERROR_MESSAGE = {
NO_HOSTED_TOOLS: 'No hosted tools found. Make sure to set your <a href="https://www.klavis.ai/" target="_blank" rel="noopener noreferrer" class="underline hover:text-red-600 dark:hover:text-red-300">Klavis</a> API key. Contact us on <a href="https://discord.com/invite/rxB8pzHxaS" target="_blank" rel="noopener noreferrer" class="underline hover:text-red-600 dark:hover:text-red-300">discord</a> if you\'re still unable to see hosted tools.'
};
const DISCORD_LINK = 'https://discord.com/invite/rxB8pzHxaS';
const DOCS_LINK = 'https://docs.rowboatlabs.com/add_tools/';
type HostedServersProps = {
onSwitchTab?: (tab: string) => void;
};
export function HostedServers({ onSwitchTab }: HostedServersProps) {
const params = useParams(); const params = useParams();
const projectId = typeof params.projectId === 'string' ? params.projectId : params.projectId?.[0]; const projectId = typeof params.projectId === 'string' ? params.projectId : params.projectId?.[0];
if (!projectId) throw new Error('Project ID is required'); if (!projectId) throw new Error('Project ID is required');
@ -134,7 +146,7 @@ export function HostedServers() {
const response = await listAvailableMcpServers(projectId || ""); const response = await listAvailableMcpServers(projectId || "");
if (response.error || !response.data) { if (response.error || !response.data) {
setError('No hosted tools found. Make sure to set your Klavis API key. Contact us on discord if you\'re still unable to see hosted tools.'); setError(ERROR_MESSAGE.NO_HOSTED_TOOLS);
return; return;
} }
@ -147,7 +159,7 @@ export function HostedServers() {
setServers(serversWithType); setServers(serversWithType);
setError(null); setError(null);
} catch (err: any) { } catch (err: any) {
setError('No hosted tools found. Make sure to set your Klavis API key. Contact us on discord if you\'re still unable to see hosted tools.'); setError(ERROR_MESSAGE.NO_HOSTED_TOOLS);
console.error('Error fetching servers:', err); console.error('Error fetching servers:', err);
setServers([]); setServers([]);
} finally { } finally {
@ -307,7 +319,7 @@ export function HostedServers() {
}); });
setToggleError({ setToggleError({
serverId: serverKey, serverId: serverKey,
message: "We're having trouble setting up this server. Please reach out on discord." message: "We're having trouble setting up this server. Please reach out on <a href=\"" + DISCORD_LINK + "\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline hover:text-red-600 dark:hover:text-red-300\">discord</a>."
}); });
} }
} finally { } finally {
@ -517,10 +529,27 @@ export function HostedServers() {
if (error) { if (error) {
return ( return (
<div className="flex items-center justify-center h-[50vh]"> <div className="flex flex-col items-center justify-center h-[50vh] space-y-6 px-4">
<p className="text-center text-red-500 dark:text-red-400"> <p
{error} className="text-center text-red-500 dark:text-red-400 max-w-[600px]"
</p> dangerouslySetInnerHTML={{
__html: error
}}
/>
<div className="flex flex-col sm:flex-row gap-4">
<a href={DOCS_LINK} target="_blank" rel="noopener noreferrer">
<Button variant="secondary" className="w-full sm:w-auto">
Read our documentation
</Button>
</a>
<Button
variant="secondary"
onClick={() => onSwitchTab?.('custom')}
className="w-full sm:w-auto"
>
Set up a custom server instead
</Button>
</div>
</div> </div>
); );
} }

2
apps/rowboat/app/projects/[projectId]/tools/components/ToolsConfig.tsx
View file

@ -32,7 +32,7 @@ export function ToolsConfig() {
</div> </div>
}> }>
<div className="mt-4 p-6"> <div className="mt-4 p-6">
<HostedServers /> <HostedServers onSwitchTab={key => setActiveTab(key)} />
</div> </div>
</Tab> </Tab>
<Tab key="custom" title="Custom MCP Servers"> <Tab key="custom" title="Custom MCP Servers">