From cc7484e61e383ce0b7af6a9f1237ba1923eb8acf Mon Sep 17 00:00:00 2001 From: Derek Legenzoff Date: Wed, 19 Feb 2025 19:27:01 -0800 Subject: [PATCH] docs: updating examples on the home page (#292) Updates examples for the home page --- website/home/app/page.tsx | 238 ++++++++++++++++++++------------------ 1 file changed, 127 insertions(+), 111 deletions(-) diff --git a/website/home/app/page.tsx b/website/home/app/page.tsx index 32debc8b..f6eff5bc 100644 --- a/website/home/app/page.tsx +++ b/website/home/app/page.tsx @@ -22,126 +22,143 @@ export default function Home() { const activeExample = hoveredExample ?? committedExample; const examples: Record = { - components: `import { Component } from 'gensx'; -import { OpenAIChatCompletion, OpenAIChatCompletionProps } from 'gensx/openai'; + components: `import { gsx } from 'gensx'; +import { ChatCompletion } from 'gensx/openai'; -type WriteBlogDraftProps = { +interface WriteDraftProps { + research: string[]; prompt: string; } -type WriteBlogDraftOutput = { - draft: string; -} -const WriteBlogDraft = Component("Write Blog Draft", - (props: WriteBlogDraftProps) => { - const blogPrompt = [ - { - role: "user", - content: \`Write a blog for the prompt: \${props.prompt}\`, - }, - ]; - return ( - - ); - } -); +const WriteDraft = gsx.Component( + "WriteDraft", + ({ prompt, research }) => { + const systemMessage = \`You're an expert technical writer. + Use the information when responding to users: \${research}\`; -type RemoveBuzzWordsProps = { - blog: string; -} -type RemoveBuzzWordsOutput = { - blog: string; -} -const RemoveBuzzWords = Component("Remove Buzz Words", - (props: RemoveBuzzWordsProps) => { - const chatCompletionMessages = [ - { - role: "user", - content: \`Remove common buzzwords and jargon from this text while preserving the meaning: \${props.draft}\`, - }, - ]; - }; return ( - + ); - } + }, ); `, - workflows: `import { Workflow } from 'gensx'; -import { WriteBlog, RemoveBuzzWords } from './write-blog'; + workflows: `import { gsx } from 'gensx'; +import { OpenAIProvider } from 'gensx/openai'; +import { Research, WriteDraft, EditDraft } from './writeBlog'; -type BlogWorkflowProps = { +interface BlogWriterProps { prompt: string; } -type BlogWorkflowOutput = { - blog: string; -} -const WriteBlogWorkflow = Workflow("Blog Workflow", - (props: BlogWorkflowInput) => ( - - {(output: WriteBlogOutput) => ( - - {(output: RemoveBuzzWordsOutput) => { - return { blog: output.result }; - }} - - )} - - ) -); - -Const blogWriter = gsx.Component( - -Const blogWritingWorkflow = gsx.Workflow(“name”, BlogWriter) - -Const result = blowWritingWorkflow.run({ prompt: “foo” }); - -const result = WriteBlogWorkflow.run({ prompt: "Write a blog post about AI developer tools." }); -`, - agents: `import { Swarm, Agent, Tool } from 'ai-agent-sdk'; +export const WriteBlog = gsx.StreamComponent( + "WriteBlog", + ({ prompt }) => { + return ( + + + {(research) => ( + + {(draft) => } + + )} + + + ); + }, +); -// Define a custom tool -const calculator = new Tool({ - name: "calculator", - description: "Perform calculations", - function: async (input: string) => { - return eval(input).toString(); - } +const workflow = gsx.Workflow("WriteBlogWorkflow", WriteBlog); +const result = await workflow.run({ + prompt: "Write a blog post about AI developer tools" }); +`, + agents: `import { gsx } from 'gensx'; +import { OpenAIProvider, GSXTool, GSXChatCompletion } from 'gensx/openai'; -const agent = new Agent({ - name: "Math Helper", - tools: [calculator], +const webSearchTool = new GSXTool({ + name: "web_search", + description: "Search the internet for information", + schema: webSearchSchema, + run: async ({ query }: WebSearchParams) => { + return await searchWeb(query); + }, }); -const result = await agent.run({ - message: "What is 123 * 456?" -});`, - llms: `import { Swarm, Agent } from 'ai-agent-sdk'; - -// Create an agent with custom behavior -const agent = new Agent({ - name: "Custom Agent", - model: "gpt-4", - temperature: 0.7, - maxTokens: 1000, +const WebSearchAgent = gsx.Component<{}, Stream>( + "WebSearchAgent", + () => ( + + + + ), +);`, + llms: `import { ChatCompletion, OpenAIProvider } from "@gensx/openai"; +import { gsx } from "gensx"; +import { ClientOptions } from "openai"; - // Define custom decision making - async decide(context) { - const { message, memory } = context; +const grok3Config = { + clientOptions: { + apiKey: process.env.GROK_API_KEY, + baseURL: "https://api.x.ai/v1", + }, + model: "grok-3", +}; - // Access agent's memory - const relevantHistory = await memory.search(message); +const DocumentSummarizer = gsx.Component( + "DocumentSummarizer", + ({ document, provider }) => ( + + + + ), +); - // Make decisions based on context - if (relevantHistory.length > 0) { - return this.useHistoricalContext(relevantHistory); - } +const workflow = gsx.Workflow( + "DocumentSummarizerWorkflow", + DocumentSummarizer, +); - return this.generateNewResponse(message); - } -});`, +const result = await workflow.run({ + document: "The quick brown fox...", + provider: grok3Config, +}); +`, }; // Define an array of button/tab details so we can map over them. @@ -153,29 +170,28 @@ const agent = new Agent({ }[] = [ { type: "components", - title: "Components", - mobileTitle: "Components", + title: "Create Components", + mobileTitle: "Create Components", description: "Create building blocks for your app with reusable components.", }, { type: "workflows", - title: "Workflows", - mobileTitle: "Workflows", - description: "Use Components to build and run workflows.", + title: "Run Workflows", + mobileTitle: "Run Workflows", + description: "Combine components to build and run powerful workflows.", }, { type: "agents", - title: "Agentic Patterns", - mobileTitle: "Agentic Patterns", - description: "Expressive and powerful agentic patterns.", + title: "Build Agents", + mobileTitle: "Build Agents", + description: "Create agents to handle complex tasks.", }, { type: "llms", - title: "Composable and Reusable", - mobileTitle: "LLMs", - description: - "Install or publish components on npm and use throughout your workflows.", + title: "Use any LLM", + mobileTitle: "Use any LLM", + description: "Easily swap between models and providers.", }, ]; @@ -185,7 +201,7 @@ const agent = new Agent({ initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, ease: "easeOut" }} - className="flex flex-col gap-4 items-center w-full max-w-7xl mx-auto pt-32 px-4 md:px-8 pb-20 mt-0 md:mt-8" + className="flex flex-col gap-4 items-center w-full max-w-7xl mx-auto pt-24 px-4 md:px-8 pb-20 mt-0 md:mt-8" >