8 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/app/agents/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { PoweredByCrossmint } from "@/components/powered-by-crossmint";
4 | import { Skeleton } from "@/components/skeleton";
5 | import { useQuery } from "@tanstack/react-query";
6 |
7 | import { useWallet } from "../providers/wallet-provider";
8 | import { getMyDeployedAgents } from "../_actions/get-agents";
9 | import AgentCard from "./agent-card";
10 | import { Typography } from "@/components/typography";
11 |
12 | export default function Index() {
13 | const { isLoading } = useWallet();
14 |
15 | const { data, isLoading: isLoadingAgents } = useQuery({
16 | queryKey: ["agents"],
17 | queryFn: getMyDeployedAgents,
18 | refetchOnWindowFocus: false,
19 | refetchOnMount: false,
20 | staleTime: 1000 * 60 * 5, // 5 minutes
21 | });
22 |
23 | if (isLoading || isLoadingAgents) {
24 | return (
25 |
9 |
25 |
26 |
10 |
11 | {agent.hosted.name}
12 |
13 | ID: {agent.hosted.id}
14 | Instance ID: {agent.hosted.instance_id}
15 |
16 |
17 |
22 | {agent.status}
23 |
24 |
27 |
44 |
45 |
28 | Uptime
29 | {agent.hosted.uptime}
30 |
31 |
32 | Node
33 | {agent.node.name}
34 |
35 |
36 | Memory
37 | {agent.hosted.configuration.memory}MB
38 |
39 |
40 | vCPU
41 | {agent.hosted.configuration.vcpu}
42 |
43 |
46 |
53 |
60 |
61 |
26 |
33 | );
34 | }
35 |
36 | return (
37 |
27 |
31 |
28 |
30 |
38 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/app/api/deploy/route.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from "next/server";
2 | import { ContainerManager } from "@/server/services/container";
3 | import { getOrCreateDelegatedSigner } from "@/server/services/delegated-signer";
4 |
5 | const CHAIN = process.env.NEXT_PUBLIC_PREFERRED_CHAIN || "base-sepolia";
6 |
7 | const containerManager = new ContainerManager();
8 |
9 | // set to true to debug the container
10 | const DEBUG_CONTAINER = true;
11 |
12 | export async function POST(request: Request) {
13 | try {
14 | const { smartWalletAddress, walletSignerType } = await request.json();
15 |
16 | if (smartWalletAddress == null || walletSignerType == null) {
17 | return NextResponse.json(
18 | { success: false, error: "body must contain smartWalletAddress and walletSignerType" },
19 | { status: 400 }
20 | );
21 | }
22 |
23 | // 1. Start TEE container if not already running
24 | if (!containerManager.isRunning()) {
25 | console.log("Starting TEE container...");
26 | await containerManager.startContainer();
27 | }
28 |
29 | // 2. Get agent key from deployed TEE instance
30 | const { publicKey } = await fetch(`${containerManager.deploymentUrl}/api/initialize`, {
31 | method: "POST",
32 | headers: {
33 | "x-api-key": process.env.CROSSMINT_SERVER_API_KEY as string,
34 | "x-wallet-address": smartWalletAddress,
35 | "x-alchemy-api-key": process.env.ALCHEMY_API_KEY as string,
36 | "x-coingecko-api-key": process.env.COINGECKO_API_KEY as string,
37 | "x-openai-api-key": process.env.OPENAI_API_KEY as string,
38 | "x-solana-rpc-url": process.env.SOLANA_RPC_URL as string,
39 | "x-chain": CHAIN,
40 | },
41 | }).then((res) => res.json());
42 | console.log(`Agent public key: ${publicKey}`);
43 |
44 | // 3. Get existing or create a new delegated signer request
45 | const delegatedSigner = await getOrCreateDelegatedSigner(
46 | smartWalletAddress,
47 | publicKey,
48 | CHAIN,
49 | walletSignerType
50 | );
51 |
52 | return NextResponse.json({
53 | success: true,
54 | containerId: containerManager.containerId,
55 | targetSignerLocator: delegatedSigner?.targetSignerLocator,
56 | delegatedSignerMessage: delegatedSigner?.message,
57 | delegatedSignerId: delegatedSigner?.id,
58 | delegatedSignerAlreadyActive: delegatedSigner?.delegatedSignerAlreadyActive ?? false,
59 | });
60 | } catch (error) {
61 | console.error("Deployment error:", error);
62 | // Ensure container is stopped on error
63 | if (!DEBUG_CONTAINER) {
64 | await containerManager.stopContainer();
65 | }
66 |
67 | return NextResponse.json(
68 | {
69 | success: false,
70 | error: error instanceof Error ? error.message : "Unknown error",
71 | },
72 | { status: 500 }
73 | );
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/app/api/deploy/stop/route.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from "next/server";
2 | import { ContainerManager } from "@/server/services/container";
3 |
4 | const containerManager = new ContainerManager();
5 |
6 | export async function POST() {
7 | try {
8 | await containerManager.stopContainer();
9 | return NextResponse.json({
10 | success: true,
11 | message: "Agent stopped successfully",
12 | });
13 | } catch (error) {
14 | return NextResponse.json(
15 | {
16 | success: false,
17 | error: error instanceof Error ? error.message : "Unknown error",
18 | },
19 | { status: 500 }
20 | );
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/app/api/health/route.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from "next/server";
2 |
3 | export function GET() {
4 | return NextResponse.json({ status: "ok" });
5 | }
6 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Crossmint/agent-launchpad-starter-kit/b8fd81fe969153bb7dcb337886b41ebc36b0bc88/launchpad-starter-next-app/src/app/favicon.ico
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | /* Define color variables */
8 | --color-background: 104 52% 95%; /* #eff9ec */
9 | --color-foreground: 210 14.3% 4.1%; /* #2d2d2d */
10 | --color-card: 0 0% 100%; /* #ffffff */
11 | --color-card-foreground: 210 14.3% 4.1%; /* #2d2d2d */
12 | --color-popover: 0 0% 100%; /* #ffffff */
13 | --color-popover-foreground: 210 14.3% 4.1%; /* #2d2d2d */
14 | --color-primary: 210 95% 53.1%; /* #0066ff */
15 | --color-primary-foreground: 210 30% 62%; /* #82A6BC */
16 | --color-secondary: 210 4.8% 95.9%; /* #f2f2f2 */
17 | --color-secondary-foreground: 210 56% 24%; /* #1B3960 */
18 | --color-muted: 210 18% 74%; /* #B1BCC9 */
19 | --color-muted-foreground: 210 77% 29%; /* #114983 */
20 | --color-accent: 210 4.8% 95.9%; /* #f2f2f2 */
21 | --color-accent-foreground: 210 9.8% 10%; /* #3d3d3d */
22 | --color-destructive: 0 84.2% 60.2%; /* #ff3333 */
23 | --color-destructive-foreground: 210 9.1% 97.8%; /* #f5f5f5 */
24 | --color-border: 210 26% 80%; /* #C0CBD9 */
25 | --color-input: 210 5.9% 90%; /* #e6e6e6 */
26 | --color-ring: 210 95% 53.1%; /* #0066ff */
27 | --color-chart-1: 210 76% 61%; /* #47A2FF */
28 | --color-skeleton: 210 33% 88%; /* #D7E2EB */
29 |
30 | /* Use color variables */
31 | --background: var(--color-background);
32 | --foreground: var(--color-foreground);
33 | --card: var(--color-card);
34 | --card-foreground: var(--color-card-foreground);
35 | --popover: var(--color-popover);
36 | --popover-foreground: var(--color-popover-foreground);
37 | --primary: var(--color-primary);
38 | --primary-foreground: var(--color-primary-foreground);
39 | --secondary: var(--color-secondary);
40 | --secondary-foreground: var(--color-secondary-foreground);
41 | --muted: var(--color-muted);
42 | --muted-foreground: var(--color-muted-foreground);
43 | --accent: var(--color-accent);
44 | --accent-foreground: var(--color-accent-foreground);
45 | --destructive: var(--color-destructive);
46 | --destructive-foreground: var(--color-destructive-foreground);
47 | --border: var(--color-border);
48 | --input: var(--color-input);
49 | --ring: var(--color-ring);
50 | --shadow-light: 0 1px 2px 0 rgba(193, 208, 234, 0.6);
51 | --shadow-heavy: 0 4px 8px 0 rgba(193, 208, 234, 0.6);
52 | --shadow-dropdown: 0 2px 12px 0 rgba(193, 208, 234, 0.6);
53 | --chart-1: var(--color-chart-1);
54 | --radius: 0.5rem;
55 | }
56 | }
57 | @layer base {
58 | body {
59 | @apply bg-background text-foreground;
60 | font-feature-settings: "rlig" 1, "calt" 1;
61 | }
62 | }
63 |
64 | @layer utilities {
65 | .text-balance {
66 | text-wrap: balance;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import type React from "react";
3 | import { Inter, Raleway } from "next/font/google";
4 |
5 | import { cn } from "../lib/utils";
6 | import "./globals.css";
7 | import { Header } from "@/components/header";
8 | import { Toaster } from "@/components/toaster";
9 | import { Providers } from "./providers/providers";
10 |
11 | export const metadata: Metadata = {
12 | title: "Crossmint Agent Launchpad",
13 | description: "Crossmint Agent Launchpad",
14 | };
15 |
16 | const inter = Inter({
17 | subsets: ["latin"],
18 | display: "swap",
19 | variable: "--font-inter",
20 | });
21 |
22 | const raleway = Raleway({
23 | subsets: ["latin"],
24 | display: "swap",
25 | variable: "--font-raleway",
26 | });
27 |
28 | export default function RootLayout({
29 | children,
30 | }: {
31 | children: React.ReactNode;
32 | }) {
33 | return (
34 |
38 |
39 |
39 | Deployed Agents
40 |
46 |
41 | {(data || []).map((agent) => (
42 |
45 |
27 |
31 | View Rufus
32 |
33 |
34 |
35 | );
36 | } else {
37 | return
46 |
85 | );
86 | }
87 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/app/providers/providers.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState, type ReactNode } from "react";
4 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
5 | import { CrossmintProvider, CrossmintAuthProvider } from "@crossmint/client-sdk-react-ui";
6 | import { WalletProvider } from "./wallet-provider";
7 | import { WalletType } from "../types/wallet";
8 |
9 | const DEFAULT_WALLET_TYPE = process.env.NEXT_PUBLIC_PREFERRED_CHAIN?.includes("solana")
10 | ? WalletType.Solana
11 | : WalletType.EVM;
12 |
13 | export function Providers({ children }: { children: ReactNode }) {
14 | const queryClient = new QueryClient();
15 | /* State needed lifting to the top level due to a re-render issue happening from CrossmintAuthProvider */
16 | const [walletType, setWalletType] = useState(DEFAULT_WALLET_TYPE);
17 |
18 | return (
19 |
47 |
84 |
48 |
56 | Agent Launchpad
57 |
58 |
59 | A secure, non-custodial Next.js application for deploying AI agents with integrated wallet
60 | functionality
61 |
62 |
63 |
64 |
65 |
75 |
76 |
66 |
68 |
69 |
74 |
70 |
73 | Agent Rufus
71 |by Crossmint
72 |
79 |
81 |
82 |
26 |
28 | Deploying Rufus...
29 |
31 |
32 | );
33 | }
34 |
35 | const handleDeployAgent = async () => {
36 | setIsLoadingDeploy(true);
37 | try {
38 | if (!wallet?.address) {
39 | toast({ title: "Error occurred during wallet creation" });
40 | return;
41 | }
42 | const isEVMWallet = wallet.type.includes("evm");
43 | const walletSignerType = !isEVMWallet ? "solana-keypair" : "evm-passkey";
44 |
45 | // 1. Deploy the agent
46 | const response = await fetch(`/api/deploy`, {
47 | method: "POST",
48 | headers: {
49 | "Content-Type": "application/json",
50 | },
51 | body: JSON.stringify({ smartWalletAddress: wallet.address, walletSignerType }),
52 | });
53 |
54 | const data = (await response.json()) as {
55 | success: true;
56 | containerId: string;
57 | delegatedSignerMessage: string;
58 | delegatedSignerId: string;
59 | delegatedSignerAlreadyActive?: boolean;
60 | targetSignerLocator: string;
61 | };
62 |
63 | // If the delegated signer is already active, we can skip the signature approval step
64 | if (data?.delegatedSignerAlreadyActive) {
65 | setAgentSuccessfullyDeployed(true);
66 | return;
67 | }
68 |
69 | if (isEVMWallet) {
70 | // 2 Sign the delegated signer message for EVM passkey wallet
71 | const { metadata, signature } = await WebAuthnP256.sign({
72 | credentialId: wallet.credentialId,
73 | challenge: data.delegatedSignerMessage as `0x${string}`,
74 | });
75 | // 3. call the server-side action to submit the signature approval
76 | await submitSignatureApproval(
77 | { r: signature.r.toString(), s: signature.s.toString() },
78 | data.targetSignerLocator,
79 | wallet.address,
80 | data.delegatedSignerId,
81 | metadata
82 | );
83 | } else {
84 | // 2 Sign the delegated signer message for Solana keypair wallet
85 | const signature = await signSolanaMessage(data.delegatedSignerMessage);
86 | // 3. call the server-side action to submit the signature approval
87 | await submitTransactionApproval(
88 | signature,
89 | data.targetSignerLocator,
90 | wallet.address,
91 | data.delegatedSignerId
92 | );
93 | }
94 |
95 | setAgentSuccessfullyDeployed(true);
96 | } catch (error) {
97 | console.error("Error deploying Rufus:", error);
98 | toast({ title: "Error occurred during deployment" });
99 | } finally {
100 | setIsLoadingDeploy(false);
101 | }
102 | };
103 |
104 | return (
105 |
123 | );
124 | };
125 |
126 | const Timer = () => {
127 | const [count, setCount] = useState(0);
128 |
129 | useEffect(() => {
130 | const interval = setInterval(() => {
131 | setCount((prevCount) => prevCount + 1);
132 | }, 1000);
133 | return () => clearInterval(interval);
134 | }, []);
135 |
136 | return count + "s";
137 | };
138 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/components/dropdown-menu.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { cn } from "@/lib/utils";
4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
5 | import { Check, ChevronRight, Circle } from "lucide-react";
6 | import * as React from "react";
7 |
8 | const DropdownMenu = DropdownMenuPrimitive.Root;
9 |
10 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
11 |
12 | const DropdownMenuGroup = DropdownMenuPrimitive.Group;
13 |
14 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
15 |
16 | const DropdownMenuSub = DropdownMenuPrimitive.Sub;
17 |
18 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
19 |
20 | const DropdownMenuSubTrigger = React.forwardRef<
21 | React.ElementRef
20 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/components/header.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type React from "react";
4 | import { LogoutIcon } from "@/icons/logout";
5 | import { Copy, Image as ImageIcon, User, WalletMinimal } from "lucide-react";
6 | import Link from "next/link";
7 |
8 | import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
9 | import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "./dropdown-menu";
10 | import { Typography } from "./typography";
11 | import { useToast } from "./use-toast";
12 | import { useWallet } from "@/app/providers/wallet-provider";
13 | import { useAuth } from "@crossmint/client-sdk-react-ui";
14 |
15 | function formatWalletAddress(address: string, startLength: number, endLength: number): string {
16 | return `${address.substring(0, startLength)}...${address.substring(address.length - endLength)}`;
17 | }
18 |
19 | export const Header: React.FC = () => {
20 | const { logout } = useAuth();
21 | const { wallet, isLoading } = useWallet();
22 | const { toast } = useToast();
23 |
24 | const handleLogout = () => {
25 | window.location.reload();
26 | logout();
27 | };
28 |
29 | const handleCopyAddress = async () => {
30 | if (wallet?.address) {
31 | await navigator.clipboard.writeText(wallet.address);
32 | toast({ title: "Address copied to clipboard", duration: 5000 });
33 | }
34 | };
35 |
36 | return (
37 |
21 | 
22 |
23 |
22 |
38 |
48 | );
49 | };
50 |
51 | const HeaderLogo: React.FC = () => (
52 |
53 | 
54 |
55 | );
56 |
57 | const UserMenu: React.FC<{
58 | wallet: string | undefined;
59 | walletStatus: string;
60 | onLogout: () => void;
61 | onCopyAddress: () => void;
62 | }> = ({ wallet, walletStatus, onLogout, onCopyAddress }) => (
63 |
66 |
68 |
70 |
72 |
73 |
74 |
77 | Agents
84 |
85 |
90 |
78 | {wallet ? formatWalletAddress(wallet, 14, 6) : ""}
79 |
81 |
82 |
86 | Logout
88 |
89 |
99 | {isLoading ? "Loading..." : address ? formatWalletAddress(address, 6, 3) : ""}
101 |
102 | );
103 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/components/powered-by-crossmint.tsx:
--------------------------------------------------------------------------------
1 | import { CrossmintLeaf } from "@/icons/crossmint-leaf";
2 | import { cn } from "@/lib/utils";
3 |
4 | import { Typography } from "./typography";
5 |
6 | export const PoweredByCrossmint = ({ className }: { className?: string }) => {
7 | return (
8 |
21 |
37 |
38 | Waiting for your wallet...
39 |
40 |
41 | );
42 | }
43 |
44 | return (
45 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/components/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import type React from "react";
2 | import { cn } from "@/lib/utils";
3 |
4 | function Skeleton({ className, ...props }: React.HTMLAttributes
15 | {title && {title} }
16 | {description && {description} }
17 |
18 | {action}
19 |
18 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/icons/crossmint-leaf.tsx:
--------------------------------------------------------------------------------
1 | export const CrossmintLeaf = () => {
2 | return (
3 |
83 | );
84 | };
85 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/icons/logo.tsx:
--------------------------------------------------------------------------------
1 | export const Logo = () => (
2 |
48 | );
49 |
50 | export const MobileLogo = () => (
51 |
90 | );
91 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/icons/logout.tsx:
--------------------------------------------------------------------------------
1 | export const LogoutIcon = ({ className }: { className?: string }) => (
2 |
18 | );
19 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/icons/passkey.tsx:
--------------------------------------------------------------------------------
1 | export const Passkey = () => (
2 |
11 | );
12 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/icons/spinner.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | export const Spinner = ({ className }: { className?: string }) => (
4 |
20 | );
21 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { APIKeyEnvironmentPrefix, getEnvironmentForKey } from "@crossmint/common-sdk-base";
2 | import { type ClassValue, clsx } from "clsx";
3 | import { twMerge } from "tailwind-merge";
4 |
5 | /**
6 | * Combines multiple class names into a single string.
7 | *
8 | * @param inputs - The class names to combine.
9 | * @returns The combined class names as a string.
10 | */
11 | export function cn(...inputs: ClassValue[]) {
12 | return twMerge(clsx(inputs));
13 | }
14 |
15 | export function getBaseUrlFromApiKey(apiKey: string) {
16 | switch (getEnvironmentForKey(apiKey)) {
17 | case APIKeyEnvironmentPrefix.STAGING:
18 | return "https://staging.crossmint.com/api/2022-06-09";
19 | case APIKeyEnvironmentPrefix.PRODUCTION:
20 | return "https://www.crossmint.com/api/2022-06-09";
21 | default:
22 | return "http://localhost:3000/api/2022-06-09";
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/launchpad-starter-next-app/src/server/services/container.ts:
--------------------------------------------------------------------------------
1 | import { exec } from "child_process";
2 | import { promisify } from "util";
3 | import path from "path";
4 | import { PhalaCloud } from "./phala/phala-cloud";
5 |
6 | const execAsync = promisify(exec);
7 |
8 | const IS_DEV = !process.env.PHALA_CLOUD_API_KEY;
9 | const LOCAL_COMPOSE_FILE_PATH = path.join(
10 | process.cwd(),
11 | "..",
12 | "agent-tee-phala",
13 | ".tee-cloud/compose-files/tee-compose.yaml"
14 | );
15 |
16 | export class ContainerManager {
17 | public containerId: string | null = null;
18 | public deploymentUrl: string | null = null;
19 | public simulatorId?: string | null = null;
20 |
21 | async startContainer(): Promise
19 |
24 |
25 |
20 | 1
21 |
22 | Select your preferred wallet type
23 |
26 |
40 |
41 |
55 |
56 |
57 | {hintText != null ? {hintText}
: null}
58 |