31 |
59 | )
60 | }
61 |
--------------------------------------------------------------------------------
/docs/components/mobile-nav.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from "react"
4 | import Link from "next/link"
5 | import { Menu } from "lucide-react"
6 |
7 | import { Button } from "@/components/ui/button"
8 | import {
9 | Sheet,
10 | SheetContent,
11 | SheetHeader,
12 | SheetTitle,
13 | SheetTrigger,
14 | } from "@/components/ui/sheet"
15 |
16 | export function MobileNav() {
17 | const [open, setOpen] = React.useState(false)
18 |
19 | return (
20 |
32 |
40 |
34 |
39 | 35 | {isLoading ? '...' : error ? '0' : formatNumber(data?.stargazers_count || 0)} 36 |
37 |GitHub Stars
38 |
41 |
49 |
43 |
48 | 44 | {isLoading ? '...' : error ? '0' : formatNumber(data?.forks_count || 0)} 45 |
46 |Forks
47 |
50 |
58 |
52 |
57 | 53 | {isLoading ? '...' : error ? '0' : formatNumber(data?.subscribers_count || 0)} 54 |
55 |Watchers
56 |
18 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/frontend/app/(core)/components/create-connection-card.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Card,
3 | CardHeader,
4 | CardContent,
5 | CardFooter,
6 | } from "@/components/ui/card";
7 | import { Plus } from "lucide-react";
8 | import { useRouter } from "next/navigation";
9 |
10 | export function CreateConnectionCard() {
11 | const router = useRouter();
12 |
13 | const handleCardClick = () => {
14 | router.push(`/tools/new`);
15 | };
16 |
17 | return (
18 |
19 |
28 |
29 |
30 |
50 |
31 |
49 |
32 |
39 |
48 | 33 | {appData.name} 34 |
35 |36 | {appData.description} 37 |
38 |
24 |
34 |
25 |
33 |
26 |
28 |
29 | Create New
30 | Connection
31 |
32 | 37 | Create a new connection to integrate with your tools and services. 38 |
39 |
42 |
46 |
43 | Configure a new tool connection
44 |
45 |
20 |
29 |
30 | Required Secrets
31 |
32 |
33 |
57 |
58 |
59 |
21 |
27 |
28 | Environment Variables
22 | 26 |
34 | {Object.entries(envVars).map(([key, value]) => (
35 |
56 |
39 |
54 | ))}
55 |
40 |
43 |
44 |
45 | {value.startsWith("${") && value.endsWith("}")
46 | ? "Not configured"
47 | : "Configured"}
48 |
49 |
52 |
53 |
7 |
12 | );
13 | }
14 |
15 | export function ErrorState() {
16 | return (
17 |
8 |
11 | Loading connections...
10 |
18 |
19 | Error
21 |
22 | Failed to load connections. Please try again later.
23 |
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/frontend/app/(core)/components/tools-tab.tsx:
--------------------------------------------------------------------------------
1 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
2 | import { Button } from "@/components/ui/button";
3 | import { Code2, FileText } from "lucide-react";
4 | import { ScrollArea } from "@/components/ui/scroll-area";
5 | import type { MCPTool } from "@/app/(core)/types";
6 |
7 | interface ToolsTabProps {
8 | templateId: string;
9 | onOpenSchema: (tool: MCPTool) => void;
10 | }
11 |
12 | export function ToolsTab({ templateId, onOpenSchema }: ToolsTabProps) {
13 | const template = getMCPTemplateById(templateId);
14 | if (!template) return null;
15 |
16 | return (
17 |
19 | {template.tools.map((tool) => (
20 |
21 |
22 |
40 |
41 | ))}
42 |
43 |
23 |
31 |
39 |
24 | {tool.name}
26 |
27 | 28 | {tool.description} 29 |
30 |{children}
24 |
12 |
17 | );
18 | }
19 |
20 | export default function LogsPage() {
21 | return (
22 |
13 |
16 | Loading logs...
15 |
23 |
32 |
33 |
39 |
40 |
41 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/frontend/app/(core)/utils.ts:
--------------------------------------------------------------------------------
1 | import type { ToolDefinition, ToolInstance } from './types';
2 |
3 | export const fetcher = async (url: string) => {
4 | const res = await fetch(url);
5 | if (!res.ok) {
6 | throw new Error('Failed to fetch data');
7 | }
8 | return res.json();
9 | };
10 |
11 | export function filterTools(
12 | tools: ToolDefinition[],
13 | searchQuery: string,
14 | ): ToolDefinition[] {
15 | const query = searchQuery.toLowerCase().trim();
16 | if (!query) return tools;
17 |
18 | return tools.filter((tool) => {
19 | const name = String(tool.toolMetadata?.name || tool.id).toLowerCase();
20 | const description = String(
21 | tool.toolMetadata?.description || '',
22 | ).toLowerCase();
23 | return name.includes(query) || description.includes(query);
24 | });
25 | }
26 |
27 | export function filterToolInstances(
28 | tools: ToolInstance[],
29 | searchQuery: string,
30 | ): ToolInstance[] {
31 | const query = searchQuery.toLowerCase().trim();
32 | if (!query) return tools;
33 |
34 | return tools.filter((tool) => {
35 | const name = String(
36 | tool.definition.toolSchema?.name || tool.id,
37 | ).toLowerCase();
38 | const description = String(
39 | tool.definition.toolSchema?.description || '',
40 | ).toLowerCase();
41 | return name.includes(query) || description.includes(query);
42 | });
43 | }
44 |
--------------------------------------------------------------------------------
/frontend/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NeuclaiLabs/centroid/ec2c4b619cc246eb30912413ac0142db56d7de52/frontend/app/favicon.ico
--------------------------------------------------------------------------------
/frontend/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { redirect } from "next/navigation";
2 |
3 | export default function HomePage() {
4 | redirect("/mcp/templates");
5 | }
6 |
--------------------------------------------------------------------------------
/frontend/artifacts/actions.ts:
--------------------------------------------------------------------------------
1 | 'use server';
2 |
3 | import { getSuggestionsByDocumentId } from '@/lib/db/queries';
4 |
5 | export async function getSuggestions({ documentId }: { documentId: string }) {
6 | const suggestions = await getSuggestionsByDocumentId({ documentId });
7 | return suggestions ?? [];
8 | }
9 |
--------------------------------------------------------------------------------
/frontend/artifacts/code/server.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod';
2 | import { streamObject } from 'ai';
3 | import { myProvider } from '@/lib/ai/providers';
4 | import { codePrompt, updateDocumentPrompt } from '@/lib/ai/prompts';
5 | import { createDocumentHandler } from '@/lib/artifacts/server';
6 |
7 | export const codeDocumentHandler = createDocumentHandler<'code'>({
8 | kind: 'code',
9 | onCreateDocument: async ({ title, dataStream }) => {
10 | let draftContent = '';
11 |
12 | const { fullStream } = streamObject({
13 | model: myProvider.languageModel('artifact-model'),
14 | system: codePrompt,
15 | prompt: title,
16 | schema: z.object({
17 | code: z.string(),
18 | }),
19 | });
20 |
21 | for await (const delta of fullStream) {
22 | const { type } = delta;
23 |
24 | if (type === 'object') {
25 | const { object } = delta;
26 | const { code } = object;
27 |
28 | if (code) {
29 | dataStream.writeData({
30 | type: 'code-delta',
31 | content: code ?? '',
32 | });
33 |
34 | draftContent = code;
35 | }
36 | }
37 | }
38 |
39 | return draftContent;
40 | },
41 | onUpdateDocument: async ({ document, description, dataStream }) => {
42 | let draftContent = '';
43 |
44 | const { fullStream } = streamObject({
45 | model: myProvider.languageModel('artifact-model'),
46 | system: updateDocumentPrompt(document.content, 'code'),
47 | prompt: description,
48 | schema: z.object({
49 | code: z.string(),
50 | }),
51 | });
52 |
53 | for await (const delta of fullStream) {
54 | const { type } = delta;
55 |
56 | if (type === 'object') {
57 | const { object } = delta;
58 | const { code } = object;
59 |
60 | if (code) {
61 | dataStream.writeData({
62 | type: 'code-delta',
63 | content: code ?? '',
64 | });
65 |
66 | draftContent = code;
67 | }
68 | }
69 | }
70 |
71 | return draftContent;
72 | },
73 | });
74 |
--------------------------------------------------------------------------------
/frontend/artifacts/image/client.tsx:
--------------------------------------------------------------------------------
1 | import { Artifact } from '@/components/create-artifact';
2 | import { CopyIcon, RedoIcon, UndoIcon } from '@/components/icons';
3 | import { ImageEditor } from '@/components/image-editor';
4 | import { toast } from 'sonner';
5 |
6 | export const imageArtifact = new Artifact({
7 | kind: 'image',
8 | description: 'Useful for image generation',
9 | onStreamPart: ({ streamPart, setArtifact }) => {
10 | if (streamPart.type === 'image-delta') {
11 | setArtifact((draftArtifact) => ({
12 | ...draftArtifact,
13 | content: streamPart.content as string,
14 | isVisible: true,
15 | status: 'streaming',
16 | }));
17 | }
18 | },
19 | content: ImageEditor,
20 | actions: [
21 | {
22 | icon:
24 |
29 |
30 | Application Logs
25 |26 | Monitor and analyze system activity with user-friendly controls 27 |
28 |
20 |
27 | );
28 | } else {
29 | return (
30 |
24 | {children}
25 |
26 |
34 | {children}
35 |
36 | );
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/frontend/components/connection-header.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { usePathname } from "next/navigation";
4 | import { SidebarToggle } from "@/components/sidebar-toggle";
5 |
6 | export function ConnectionHeader() {
7 | const pathname = usePathname();
8 | const pathSegments = pathname?.split("/") || [];
9 | const lastSegment = pathSegments[pathSegments.length - 1] || "Apps";
10 |
11 | const titleMap: Record{title}
23 | {/* Spacer to balance the layout */} 24 |
12 |
13 |
14 | ) : (
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | );
25 | };
26 |
27 | export const InlineDocumentSkeleton = () => {
28 | return (
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/frontend/components/image-editor.tsx:
--------------------------------------------------------------------------------
1 | import { LoaderIcon } from './icons';
2 | import cn from 'classnames';
3 |
4 | interface ImageEditorProps {
5 | title: string;
6 | content: string;
7 | isCurrentVersion: boolean;
8 | currentVersionIndex: number;
9 | status: string;
10 | isInline: boolean;
11 | }
12 |
13 | export function ImageEditor({
14 | title,
15 | content,
16 | status,
17 | isInline,
18 | }: ImageEditorProps) {
19 | return (
20 |
26 | {status === 'streaming' ? (
27 |
37 | 
44 |
45 | )}
46 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/frontend/components/message-reasoning.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useState } from 'react';
4 | import { ChevronDownIcon, LoaderIcon } from './icons';
5 | import { motion, AnimatePresence } from 'framer-motion';
6 | import { Markdown } from './markdown';
7 |
8 | interface MessageReasoningProps {
9 | isLoading: boolean;
10 | reasoning: string;
11 | }
12 |
13 | export function MessageReasoning({
14 | isLoading,
15 | reasoning,
16 | }: MessageReasoningProps) {
17 | const [isExpanded, setIsExpanded] = useState(true);
18 |
19 | const variants = {
20 | collapsed: {
21 | height: 0,
22 | opacity: 0,
23 | marginTop: 0,
24 | marginBottom: 0,
25 | },
26 | expanded: {
27 | height: 'auto',
28 | opacity: 1,
29 | marginTop: '1rem',
30 | marginBottom: '0.5rem',
31 | },
32 | };
33 |
34 | return (
35 |
28 | {!isInline && (
29 |
35 | ) : (
36 |
30 |
32 | )}
33 | Generating Image...
34 |
36 | {isLoading ? (
37 |
60 | {isExpanded && (
61 |
72 | {reasoning}
73 |
74 | )}
75 |
76 |
77 | );
78 | }
79 |
--------------------------------------------------------------------------------
/frontend/components/nav-documents.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | FolderIcon,
5 | MoreHorizontalIcon,
6 | ShareIcon,
7 | type LucideIcon,
8 | } from "lucide-react";
9 |
10 | import {
11 | DropdownMenu,
12 | DropdownMenuContent,
13 | DropdownMenuItem,
14 | DropdownMenuTrigger,
15 | } from "@/components/ui/dropdown-menu";
16 | import {
17 | SidebarGroup,
18 | SidebarGroupLabel,
19 | SidebarMenu,
20 | SidebarMenuAction,
21 | SidebarMenuButton,
22 | SidebarMenuItem,
23 | useSidebar,
24 | } from "@/components/ui/sidebar";
25 |
26 | export function NavDocuments({
27 | items,
28 | }: {
29 | items: {
30 | name: string;
31 | url: string;
32 | icon: LucideIcon;
33 | }[];
34 | }) {
35 | const { isMobile } = useSidebar();
36 |
37 | return (
38 |
38 |
43 | ) : (
44 | Reasoning
39 |
40 |
42 |
45 |
57 | )}
58 |
59 | Reasoned for a few seconds
46 |
56 |
17 | {/*
50 |
18 |
23 | This is an{' '}
24 |
29 | open source
30 | {' '}
31 | chatbot template built with Next.js and the AI SDK by Vercel. It uses
32 | the{' '}
33 | streamText{' '}
34 | function in the server and the{' '}
35 | useChat hook
36 | on the client to create a seamless chat experience.
37 |
39 | You can learn more about the AI SDK by visiting the{' '} 40 | 45 | docs 46 | 47 | . 48 |
*/} 49 |
16 |
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/frontend/components/sidebar-toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type { ComponentProps } from "react";
4 |
5 | import { type SidebarTrigger, useSidebar } from "@/components/ui/sidebar";
6 | import {
7 | Tooltip,
8 | TooltipContent,
9 | TooltipTrigger,
10 | } from "@/components/ui/tooltip";
11 |
12 | import { SidebarLeftIcon } from "./icons";
13 | import { Button } from "./ui/button";
14 |
15 | export function SidebarToggle({
16 | className,
17 | }: ComponentProps
17 | {contentType ? (
18 | contentType.startsWith('image') ? (
19 | // NOTE: it is recommended to use next/image for images
20 | // eslint-disable-next-line @next/next/no-img-element
21 | 
27 | ) : (
28 |
29 | )
30 | ) : (
31 |
32 | )}
33 |
34 | {isUploading && (
35 |
43 |
39 |
41 | )}
42 | {name}
44 |
23 |
37 | );
38 | }
39 |
40 | interface ToastProps {
41 | id: string | number;
42 | type: 'success' | 'error';
43 | description: string;
44 | }
45 |
--------------------------------------------------------------------------------
/frontend/components/ui/alert.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cva, type VariantProps } from "class-variance-authority";
3 |
4 | import { cn } from "@/lib/utils";
5 |
6 | const alertVariants = cva(
7 | "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
8 | {
9 | variants: {
10 | variant: {
11 | default: "bg-background text-foreground",
12 | destructive:
13 | "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14 | },
15 | },
16 | defaultVariants: {
17 | variant: "default",
18 | },
19 | },
20 | );
21 |
22 | const Alert = React.forwardRef<
23 | HTMLDivElement,
24 | React.HTMLAttributes
28 |
36 |
32 | {iconsByType[type]}
33 |
34 | {description}
35 |