diff --git a/examples/web/.gitignore b/examples/web/.gitignore new file mode 100644 index 0000000..9c97bbd --- /dev/null +++ b/examples/web/.gitignore @@ -0,0 +1,3 @@ +node_modules +dist +.env diff --git a/examples/web/README.md b/examples/web/README.md new file mode 100644 index 0000000..11e787a --- /dev/null +++ b/examples/web/README.md @@ -0,0 +1,17 @@ +# Decart TanStack AI Web Example + +Simple web demo with TanStack AI devtools for debugging the Decart adapter. + +## Setup + +```bash +cd examples/web +pnpm install +pnpm dev +``` + +## Usage + +1. Open http://localhost:5173 +2. Enter your Decart API key (saved to localStorage) +3. Enter a prompt and click "Generate Image" diff --git a/examples/web/index.html b/examples/web/index.html new file mode 100644 index 0000000..dd40d9e --- /dev/null +++ b/examples/web/index.html @@ -0,0 +1,12 @@ + + + + + + Decart TanStack AI Demo + + +
+ + + diff --git a/examples/web/package.json b/examples/web/package.json new file mode 100644 index 0000000..97b0926 --- /dev/null +++ b/examples/web/package.json @@ -0,0 +1,26 @@ +{ + "name": "decart-tanstack-ai-web-example", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@decartai/tanstack-ai": "workspace:*", + "@tanstack/ai": "^0.2.0", + "@tanstack/react-ai-devtools": "^0.1.1", + "@tanstack/react-devtools": "^0.9.0", + "react": "^19.0.0", + "react-dom": "^19.0.0" + }, + "devDependencies": { + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", + "@vitejs/plugin-react": "^4.4.1", + "typescript": "~5.8.3", + "vite": "^6.3.5" + } +} diff --git a/examples/web/src/App.tsx b/examples/web/src/App.tsx new file mode 100644 index 0000000..a8e4c13 --- /dev/null +++ b/examples/web/src/App.tsx @@ -0,0 +1,112 @@ +import { useState } from "react"; +import { generateImage } from "@tanstack/ai"; +import { createDecartImage } from "@decartai/tanstack-ai"; +import { TanStackDevtools } from "@tanstack/react-devtools"; +import { aiDevtoolsPlugin } from "@tanstack/react-ai-devtools"; + +function App() { + const [apiKey, setApiKey] = useState(localStorage.getItem("DECART_API_KEY") || ""); + const [prompt, setPrompt] = useState("A beautiful sunset over the ocean"); + const [imageUrl, setImageUrl] = useState(null); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + + const handleApiKeyChange = (value: string) => { + setApiKey(value); + localStorage.setItem("DECART_API_KEY", value); + }; + + const handleGenerate = async () => { + if (!apiKey) { + setError("Please enter your Decart API key"); + return; + } + + setLoading(true); + setError(null); + setImageUrl(null); + + try { + const adapter = createDecartImage("lucy-pro-t2i", apiKey); + const result = await generateImage({ + adapter, + prompt, + }); + + if (result.images[0]?.b64Json) { + setImageUrl(`data:image/png;base64,${result.images[0].b64Json}`); + } + } catch (err) { + setError(err instanceof Error ? err.message : "Failed to generate image"); + } finally { + setLoading(false); + } + }; + + return ( +
+

Decart TanStack AI Demo

+ +
+ + handleApiKeyChange(e.target.value)} + placeholder="Enter your Decart API key" + style={{ width: "100%", padding: "0.5rem", fontSize: "1rem" }} + /> +
+ +
+ +