diff --git a/lucid-docs/public/landing.html b/lucid-docs/public/landing.html new file mode 100644 index 00000000..fadeb917 --- /dev/null +++ b/lucid-docs/public/landing.html @@ -0,0 +1,481 @@ + + + + + + Lucid + + + +
+ + +
+ + +
+ + +
+

Agent commerce
infrastructure

+

Route to paid AI agents. Pay per request. Open protocols.

+
+ $ bunx @lucid-agents/cli my-agent +
+
+ + +
+
+ game + price + +
+ + +
+
+ 01 + sentiment + text analysis & scoring +
+
$0.01
+
→
+
+ + + +
+
+ 02 + code-review + automated code analysis +
+
$0.05
+
→
+
+ + + +
+
+ 03 + market-feed + real-time data streams +
+
$0.10
+
→
+
+ + + +
+
+ 04 + image-gen + ai image generation +
+
$0.15
+
→
+
+ + + +
+
+ 05 + scheduler + autonomous task orchestration +
+
$0.03
+
→
+
+ + + +
+
+ 06 + a2a-broker + agent-to-agent marketplace +
+
$0.02
+
→
+
+ +
+ + +
+
supporting protocols
+
+ +
+ + x402 +
+
HTTP-native payments. USDC on Base & Solana.
+ + +
+ + A2A +
+
Agent discovery & invocation protocol.
+ + +
+ + ERC-8004 +
+
On-chain identity & domain verification.
+ + +
+ + SIWX +
+
Sign-In With X. Cross-chain auth.
+ + +
+ + MPP +
+
Machine Payments Protocol.
+ +
+
+ + + + +
+ + diff --git a/lucid-docs/src/routes/index.tsx b/lucid-docs/src/routes/index.tsx index caedeabb..2eb9679d 100644 --- a/lucid-docs/src/routes/index.tsx +++ b/lucid-docs/src/routes/index.tsx @@ -6,592 +6,121 @@ export const Route = createFileRoute('/')({ component: Home, }); +const games = [ + { idx: '01', name: 'sentiment', desc: 'text analysis & scoring', price: '$0.01', href: 'examples' }, + { idx: '02', name: 'code-review', desc: 'automated code analysis', price: '$0.05', href: 'examples' }, + { idx: '03', name: 'market-feed', desc: 'real-time data streams', price: '$0.10', href: 'examples' }, + { idx: '04', name: 'image-gen', desc: 'ai image generation', price: '$0.15', href: 'examples' }, + { idx: '05', name: 'scheduler', desc: 'autonomous task orchestration', price: '$0.03', href: 'examples' }, + { idx: '06', name: 'a2a-broker', desc: 'agent-to-agent marketplace', price: '$0.02', href: 'examples' }, +] as const; + +const protocols = [ + { name: 'x402', desc: 'HTTP-native payments. USDC on Base & Solana.', color: 'bg-green-500', href: 'packages/payments' }, + { name: 'A2A', desc: 'Agent discovery & invocation protocol.', color: 'bg-blue-500', href: 'packages/a2a' }, + { name: 'ERC-8004', desc: 'On-chain identity & domain verification.', color: 'bg-violet-500', href: 'packages/identity' }, + { name: 'SIWX', desc: 'Sign-In With X. Cross-chain auth.', color: 'bg-amber-500', href: 'getting-started/introduction' }, + { name: 'MPP', desc: 'Machine Payments Protocol.', color: 'bg-pink-500', href: 'packages/mpp' }, +] as const; + function Home() { return ( -
- {/* Animated border lines */} -
-
-
-
-
-
-
-
-
+
+ {/* Hero */} -
-

- The Agent Commerce Framework -

-

- Build. Deploy. Monetize. +
+

+ Agent commerce
infrastructure

-

- TypeScript framework for AI agents with{' '} - x402 payments,{' '} - A2A interoperability, and{' '} - ERC-8004 identity. +

+ Route to paid AI agents. Pay per request. Open protocols.

- -
- - Get Started - - - GitHub - -
-
- {/* Stats Bar */} -
- - - - -
- - {/* 3 Pillars */} -
-
-
-

- x402 -

-

Monetize Instantly

-

- HTTP-native payments. Accept USDC on Base or Solana with automatic paywalls. -

-
-
-
-

- A2A -

-

Agent Interoperability

-

- Discovery and communication protocol. Agents buy and sell services from each other. -

-
-
-
-

- ERC-8004 -

-

Verifiable Identity

-

- On-chain identity and reputation. Domain binding and verifiable trust signals. -

-
-
- - {/* Code */} -
-
-

- Developer Experience -

-

- Ship a Paid Agent in Minutes -

-

- Define your API with Zod schemas. Add pricing. Deploy. That's it. -

-
    -
  • - - Automatic input/output validation -
    • -
  • - - Full TypeScript inference -
    • -
  • - - JSON Schema generation -
    • -
-
- - Quickstart - - - Examples - -
+ {/* Games Table */} +
+ {/* Table Header */} +
+ game + price +
-
-
- agent.ts - - 18 lines - -
- 
-              {codeExample}
-
-
-
- {/* Skills + Autonomous Agents */} -
-
-

- Skills -

-

- Copy the Skill in One Command -

-

- Install the `lucid-agent-creator` skill directly into your local `.claude/skills` folder. -

-
-
- skills install - -
- 
-                {skillsInstallScript}
-
-
+ {/* Rows */} + {games.map((game) => ( - Skills Documentation +
+ {game.idx} + {game.name} + {game.desc} +
+
+ {game.price} +
+
+ + → + +
-
- -
-

- Autonomous Agents -

-

- Agents That Build Applications -

-

- Use AI + skills to generate, configure, and ship new Lucid-powered applications end-to-end. -

-
    -
  • - - Generate handlers and schemas from natural language prompts -
    • -
  • - - Create and host production agents via `create_lucid_agent` -
    • -
  • - - Iterate by updating prompts instead of hand-writing boilerplate -
    • -
-
- - Autonomous Agents - - - Build Applications - -
-
-
- - {/* AI Router */} -
-
-

- AI Router -

-

- OpenAI-Compatible x402 Routing -

-

- Route inference through x402 with permit sessions, async settlement, and streaming responses. -

-
    -
  • - - ERC-2612 permits in `PAYMENT-SIGNATURE` -
    • -
  • - - Session tracking via `X-Upto-Session` -
    • -
  • - - OpenCode plugin auto-signs and injects headers -
    • -
-
- - Overview - - - OpenCode - - - OpenClaw - -
-
-
-
- opencode.json - -
- 
-              {opencodeRouterConfig}
-
-
-
- - {/* Features Grid */} -
-
-
-

- Features -

-

- Built for Production -

-
- - Open Standards - -
-
- - - - - - -
+ ))}
- {/* Use Cases */} -
-
-

- Use Cases -

-

- What You Can Build -

+ {/* Protocols */} +
+
+ supporting protocols
-
- - - - -
-
- - {/* Deploy Anywhere */} -
-
-

- Frameworks -

-
- - - - -
-
-
-

- Chains -

-
- - - -
-
-
- - {/* Final CTA */} -
-
-
-

- Start Building the Agent Economy -

-

- Open source. Open standards. No lock-in. -

- -
+
+ {protocols.map((proto) => ( - Read the Docs +
+ + {proto.name} +
+
+ {proto.desc} +
- - View Examples - -
- -

- MIT Licensed ·{' '} - - GitHub - -

+ ))}
-
- - ); -} - -const codeExample = `import { createAgent } from '@lucid-agents/core' -import { http } from '@lucid-agents/http' -import { payments } from '@lucid-agents/payments' -import { z } from 'zod' - -const agent = createAgent({ name: 'my-agent' }) - .use(http()) - .use(payments({ address: '0x...' })) - -agent.entrypoint({ - name: 'analyze', - input: z.object({ text: z.string() }), - output: z.object({ sentiment: z.string(), score: z.number() }), - price: { amount: '0.01', currency: 'USDC' }, - handler: async ({ input }) => { - // Your AI logic here - return { sentiment: 'positive', score: 0.92 } - } -})`; -const skillsInstallScript = `mkdir -p .claude/skills/lucid-agent-creator && \\ -curl -fsSL https://raw.githubusercontent.com/daydreamsai/skills-market/main/plugins/lucid-agent-creator/skills/SKILL.md \\ - -o .claude/skills/lucid-agent-creator/SKILL.md`; - -const opencodeRouterConfig = `{ - "$schema": "https://opencode.ai/config.json", - "plugin": ["@lucid-agents/opencode-x402-plugin"], - "provider": { - "x402": { - "npm": "@ai-sdk/anthropic", - "name": "x402 Router", - "options": { "baseURL": "https://ai.xgate.run/v1" } - } - } -}`; - -function StatCell({ - value, - label, - border, - className, -}: { - value: string; - label: string; - border?: boolean; - className?: string; -}) { - return ( -
-

{value}

-

{label}

-
- ); -} - -function FeatureCell({ - title, - description, - border, - accent, -}: { - title: string; - description: string; - border: string; - accent: string; -}) { - return ( -
-
-

{title}

-

- {description} -

-
- ); -} + {/* Footer */} + -function UseCaseCell({ - title, - description, - border, - tag, -}: { - title: string; - description: string; - border: string; - tag: string; -}) { - return ( -
-
-

{title}

- - {tag} -
-

- {description} -

-
- ); -} - -function Badge({ name, highlight }: { name: string; highlight?: boolean }) { - return ( - - {name} - + ); } diff --git a/packages/cli/adapters/next/components/dashboard.tsx b/packages/cli/adapters/next/components/dashboard.tsx index 9d69432b..e03bf49a 100644 --- a/packages/cli/adapters/next/components/dashboard.tsx +++ b/packages/cli/adapters/next/components/dashboard.tsx @@ -143,145 +143,129 @@ export default function Dashboard({ ); return ( -
-
-
-
-
-
-
- 🤖 -
-
-

- {initialData.meta?.name ?? 'Lucid Agent'} -

-

- v{initialData.meta?.version ?? '0.0.0'} -

-
-
-

- {initialData.meta?.description ?? - 'Monitor agent health, review entrypoints, and interact with invoke and streaming flows.'} -

-
- +
+
+ {/* ── Header ── */} +
+
+ + {initialData.meta?.name ?? 'Lucid Agent'} + + . + + v{initialData.meta?.version ?? '0.0.0'} +
- -
- -
-
-
-
- 📊 -
-

- Configuration -

-
-
-
-
Entrypoints
-
{entrypointCount}
-
-
-
Network
-
{networkInfo.label}
-
-
-
Default Price
-
- {initialData.payments?.defaultPrice ?? 'Free'} -
-
-
+
+ +
+ -
-
-
- 💰 -
-

Payment

+ {/* ── Hero ── */} +
+

+ {initialData.meta?.description ?? 'Agent commerce infrastructure'} +

+

+ {entrypointCount} {entrypointLabel.toLowerCase()} available.{' '} + {initialData.payments?.defaultPrice + ? `Default price: ${initialData.payments.defaultPrice}.` + : 'Free tier.'}{' '} + Network: {networkInfo.label}. +

+ {initialData.payments?.payTo && ( +
+ payTo + + {initialData.payments.payTo} +
-
-
-
Recipient
-
- {initialData.payments?.payTo ?? '—'} -
-
-
-
+ )}
-
-
-
-
- ⚡ -
-
-

- {entrypointCount} {entrypointLabel} -

-

- Configure payloads and test your agent endpoints -

-
-
-
- -
- {cards.map(card => ( - - ))} + {/* ── Entrypoints Table ── */} +
+
+ entrypoint + price + type
+ + {cards.map((card, index) => ( +
+ +
+ + {String(index + 1).padStart(2, '0')} + + + {card.key} + + + {card.description} + +
+
+ {card.priceLabel} +
+
+ {card.streaming && ( + + stream + + )} + + → + +
+ + + {/* ── Expanded entrypoint card ── */} +
+ +
+
+ ))}
- + {/* ── Manifest ── */} +
+ +
-
-
-
- 💻 -
-
-

- Code Examples -

-

- Integration snippets for your applications -

-
+ {/* ── Code Examples ── */} +
+
+ integration
- -
- +
+
+ +
-
-
-

Powered by Lucid Agents Framework

-

Built with Next.js

-
+ {/* ── Footer ── */} +
+ Powered by Lucid Agents Framework + {networkInfo.label}
diff --git a/packages/cli/adapters/tanstack/headless/src/routes/index.tsx b/packages/cli/adapters/tanstack/headless/src/routes/index.tsx index 37475329..fb7e6487 100644 --- a/packages/cli/adapters/tanstack/headless/src/routes/index.tsx +++ b/packages/cli/adapters/tanstack/headless/src/routes/index.tsx @@ -43,64 +43,116 @@ function HeadlessDashboard() { const loaderData = Route.useLoaderData(); const network = getNetworkInfo(); + const agentName = loaderData.meta?.name ?? 'Agent'; + return ( -
-
-

- Lucid Agent · API Runtime -

-

- {loaderData.meta?.name ?? 'Headless Agent'} -

- {loaderData.meta?.description ? ( -

{loaderData.meta.description}

- ) : null} -
+
+
+ {/* Header */} +
+
+ {agentName} +
+ +
-
-

- This project scaffolds the TanStack runtime without a UI shell. Invoke - entrypoints via HTTP: -

- 
-          {`curl -X POST https:///api/agent/entrypoints//invoke \\
-  -H "Content-Type: application/json" \\
-  -d '{ "input": { ... } }'`}
-
-
+ {/* Hero */} +
+

+ {agentName} +

+ {loaderData.meta?.description && ( +

+ {loaderData.meta.description} +

+ )} +
+ $ + {`curl -X POST /api/agent/entrypoints//invoke`} +
+
+ + {/* Entrypoints Table */} +
+
+ entrypoint + price + +
-
-

Entrypoints

-
    {loaderData.entrypoints.map( - (entry: { - key: string; - description?: string | null; - streaming: boolean; - price?: string | null; - }) => ( -
  1. ( +
    -

    {entry.key}

    - {entry.description ? ( -

    {entry.description}

    - ) : null} -

    - Streaming: {entry.streaming ? 'yes' : 'no'} · Price:{' '} - {entry.price ?? 'free'} -

    -
    2. +
    + + {String(i + 1).padStart(2, '0')} + + {entry.key} + {entry.description && ( + + {entry.description} + + )} +
    +
    + {entry.price != null ? `$${entry.price}` : 'free'} +
    +
    + + → + +
    +
) )} - -
-
- Serving from {network.label} · Update `src/routes/index.tsx` to expose - your own status page. -
-
+ {loaderData.entrypoints.length === 0 && ( +
+ No entrypoints registered yet. +
+ )} +
+ + {/* Footer */} +
+ + {agentName} + {loaderData.meta?.version ? ` v${loaderData.meta.version}` : ''} + {' \u00B7 '} + {network.label} + + + {loaderData.entrypoints.length} entrypoint + {loaderData.entrypoints.length !== 1 ? 's' : ''} + {' \u00B7 '} + { + loaderData.entrypoints.filter( + (e: { streaming: boolean }) => e.streaming + ).length + }{' '} + streaming + +
+
+
); } diff --git a/packages/cli/adapters/tanstack/ui/src/routes/index.tsx b/packages/cli/adapters/tanstack/ui/src/routes/index.tsx index 04833be4..443b78c7 100644 --- a/packages/cli/adapters/tanstack/ui/src/routes/index.tsx +++ b/packages/cli/adapters/tanstack/ui/src/routes/index.tsx @@ -258,7 +258,7 @@ const StatusChip = ({ state }: { state: HealthState }) => { return ( @@ -596,347 +596,312 @@ function HomePage() { '// Ensure WALLET_CONNECT_PROJECT_ID is configured to use WalletConnect.', ].join('\n'); + const [expandedEntry, setExpandedEntry] = useState(null); + return ( -
-
-
-
-
-
- 🤖 -
-
-

- {meta?.name ?? 'Lucid Agent'} -

-

- v{meta?.version ?? '0.0.0'} -

-
-
-

- {meta?.description ?? - 'Monitor agent health, review entrypoints, and interact with invoke and streaming flows.'} +

+
+ {/* ── Header ── */} +
+
+

+ {meta?.name ?? 'agent'} + . +

+ + v{meta?.version ?? '0.0.0'} + + +
+
+ +
+
+ + {/* ── Description ── */} + {meta?.description && ( +
+

+ {meta.description}

- -
+ )} -
-
-
-
-
- 💚 -
-

- Health -

-
- + {/* ── Stats Row ── */} +
+
+
+ entrypoints +
+
+ {entrypointCount}
-
-
-
Status
-
- {healthData?.status ?? - (healthState === 'healthy' ? 'ok' : 'unknown')} -
-
-
-
Last Checked
-
- {healthData?.timestamp ?? 'Just now'} -
-
-
- -
-
-
- 📊 -
-

- Configuration -

+
+
+ network
-
-
-
Entrypoints
-
{entrypointCount}
-
-
-
Network
-
{networkInfo.label}
-
-
-
Default Price
-
- {payments?.defaultPrice ?? 'Free'} -
-
-
+
{networkInfo.label}
- -
-
-
- 💰 -
-

Payment

+
+
+ default price +
+
+ {payments?.defaultPrice ?? 'Free'}
-
-
-
Recipient
-
- {payments?.payTo ?? '—'} -
-
-
-
- -
-
-
-
- ⚡ -
-
-

- {entrypointCount} {entrypointLabel} -

-

- Configure payloads and test your agent endpoints -

-
+
+
+ pay to +
+
+ {payments?.payTo ?? '--'}
-
- -
- {cards?.map(card => { - const state = getEntryState(card.key); - return ( -
+
+ + {/* ── Entrypoints Table ── */} +
+
+ entrypoint + price + type +
+ + {cards?.map((card, index) => { + const state = getEntryState(card.key); + const isExpanded = expandedEntry === card.key; + + return ( +
+ {/* ── Row ── */} +
setExpandedEntry(isExpanded ? null : card.key)} > -
-
-
-

- {card.key} -

- - {card.streaming ? 'Stream' : 'Invoke'} - -
-

- {card.description} -

-
-
- -
-
- Pricing - - {card.priceLabel} - -
-
- Network - - { - getNetworkInfo( - card.networkId ?? payments?.network ?? undefined - ).label - } - -
-
- Invoke Path - - {card.invokePath} - -
- {card.streamPath && ( -
- Stream Path - - {card.streamPath} - -
- )} +
+ + {String(index + 1).padStart(2, '0')} + + + {card.key} + + + {card.description} +
+
+ {card.priceLabel} +
+
+ + {card.streaming ? 'stream' : 'invoke'} + +
+
- - updateEntryState(card.key, { payload: value }) - } - /> - - {card.outputSchema && card.outputSchema.properties && ( -
- - - ▶ + {/* ── Expanded Detail ── */} + {isExpanded && ( +
+ {/* Paths */} +
+
+ + invoke + + {card.invokePath} +
+ {card.streamPath && ( +
+ + stream + + + {card.streamPath} + +
+ )} +
+ + network + + + { + getNetworkInfo( + card.networkId ?? payments?.network ?? undefined + ).label + } - Expected Output Schema -
-
-
- {Object.entries(card.outputSchema.properties).map( - ([name, schema]: [string, any]) => ( -
-
- {name}: -
-
- {schema.type} - {schema.description && - ` - ${schema.description}`} -
-
- ) - )} -
-
- )} - - {state.error && ( -
- ⚠ -

- {state.error} -

- )} -
- - {card.streaming && ( + /> + + {/* Output Schema */} + {card.outputSchema && card.outputSchema.properties && ( +
+ + + → + + output schema + +
+
+ {Object.entries(card.outputSchema.properties).map( + ([name, schema]: [string, any]) => ( +
+
+ {name}: +
+
+ {schema.type} + {schema.description && + ` -- ${schema.description}`} +
+
+ ) + )} +
+
+
+ )} + + {/* Error */} + {state.error && ( +
+ {state.error} +
+ )} + + {/* Action Buttons */} +
- )} - {card.streaming && - state.streamingStatus === 'streaming' && ( + {card.streaming && ( )} - -
+ {card.streaming && + state.streamingStatus === 'streaming' && ( + + )} + +
+ + {/* cURL preview */} +
+ + + → + + curl command + + 
+                        {card.invokeCurl}
+
+ {card.streamCurl && ( + 
+                          {card.streamCurl}
+
+ )} +
-
-
-
- - Response + {/* Response */} +
+
+ + response - {Boolean(state.result) && ( - - - + {state.paymentUsed && ( + + paid )}
- {state.paymentUsed && ( - - 💰 - Paid - - )} -
- 
-                      {formatResult(state.result) || (
-                        
-                          Click "Invoke" to see the response here...
-                        
-                      )}
-
+ 
+                        {formatResult(state.result) || (
+                          
+                            -- invoke to see response --
+                          
+                        )}
+
+
+ {/* Stream Events */} {card.streaming && (
-
- - Stream Events - - {state.streamingStatus === 'streaming' && ( - - - - - )} -
+ + stream events + {state.streamingStatus === 'streaming' - ? '● Live' - : '○ Idle'} + ? '● live' + : '○ idle'}
-
+
{state.streamingEvents.length === 0 ? ( -

- Click "Start Stream" to see live events here... +

+ -- stream to see events --

) : ( -
    - {state.streamingEvents.map((event, index) => ( +
      + {state.streamingEvents.map((event, idx) => (
    • {event}
      • @@ -946,49 +911,35 @@ function HomePage() {
{state.streamingStatus === 'error' && state.streamingError && ( -
- ⚠ -

- {state.streamingError} -

+
+ {state.streamingError}
)}
)} -
- - ); - })} -
+
+ )} +
+ ); + })}
-
-
-
- 📄 -
-
-

- Agent Manifest -

-

- Complete agent specification served from{' '} - - {MANIFEST_PATH} - -

-
-
- -
- + {/* ── Manifest ── */} +
+
+
- ▶ + → - View Full Manifest JSON + manifest + + {MANIFEST_PATH} + {manifestState === 'loading' && ( -
+ + loading... + )}
-
- 
+            

+              
                 {manifestState === 'loading' ? (
-                  

-                    

-                    Loading manifest…
-                  

+                  
+                    loading manifest...
+                  
                 ) : (
                   manifestText
                 )}
@@ -1017,51 +967,42 @@ function HomePage() {
-
-
-
- 💻 -
-
-

- Code Examples -

-

- Integration snippets for your applications -

-
-
- -
-
-
-
- - WalletConnect - - - AppKit - -
- -
- 
+        {/* ── Code Examples ── */}
+        

+          

+            
+              

+                
+                  →
+                
+                walletconnect integration
+                
+                  appkit
+                
+              

+              
+            
+            

+              
                 {appKitSnippet}
               

-
-
+
+
-

diff --git a/packages/cli/tests/cli.test.ts b/packages/cli/tests/cli.test.ts index ced61748..e8d738d0 100644 --- a/packages/cli/tests/cli.test.ts +++ b/packages/cli/tests/cli.test.ts @@ -407,7 +407,7 @@ describe('create-agent-kit CLI', () => { ); await expect(readdir(componentsDir)).rejects.toThrow(); - expect(indexRoute).toContain('TanStack runtime without a UI shell'); + expect(indexRoute).toContain('HeadlessDashboard'); }); it('prompts for a project name when not provided and prompt is available', async () => {