Build an agent with Express

ATXP_CONNECTION_STRING=https://accounts.atxp.ai?connection_token=<random_string>

// Helper config object for the ATXP Image MCP Server
const imageService = {
  mcpServer: 'https://image.mcp.atxp.ai',
  toolName: 'image_create_image',
  description: 'ATXP Image MCP server',
  getArguments: (prompt: string) => ({ prompt }),
  getResult: (result: any) => {
    // Parse the JSON string from the result
    const jsonString = result.content[0].text;
    return JSON.parse(jsonString);
  }
};

// Helper config object for the ATXP Filestore MCP Server
const filestoreService = { 
  mcpServer: 'https://filestore.mcp.atxp.ai', 
  toolName: 'filestore_write', 
  description: 'ATXP Filestore MCP server', 
  getArguments: (sourceUrl: string) => ({ sourceUrl, makePublic: true }), 
  getResult: (result: any) => { 
    // Parse the JSON string from the result
    const jsonString = result.content[0].text; 
    return JSON.parse(jsonString); 
  } 
}; 

// Express API Routes
app.get('/api/texts', (req: Request, res: Response) => {
  res.json({ texts });
});

  const imageClient = await atxpClient({
    mcpServer: imageService.mcpServer,
    account: account,
  });

  // Create a client using the `atxpClient` function for the ATXP Filestore MCP Server
  const filestoreClient = await atxpClient({ 
    mcpServer: filestoreService.mcpServer, 
    account: account, 
  }); 

  // Send stage update for just before the MCP tool call
  sendStageUpdate(requestId, 'calling-mcp-tool', 'Calling ATXP MCP tool...', 'in-progress');

// TODO: Save the result of the MCP tool call to the `newText` object
// For example, if you want to use the result of the ATXP Image MCP Server, you can use the following code:
//newText.imageUrl = imageResult.url;

// Save the `newText` object to the `texts` array
texts.push(newText); 

// Return the `newText` object to the frontend
res.status(201).json(newText); 

// Store the image in the ATXP Filestore MCP Server
try {
  const result = await filestoreClient.callTool({
    name: filestoreService.toolName,
    arguments: filestoreService.getArguments(imageResult.url),
  });
  console.log(`${filestoreService.description} result successful!`);
  const fileResult = filestoreService.getResult(result);
  newText.fileName = fileResult.filename;
  newText.imageUrl = fileResult.url;

  console.log('Result:', fileResult);

  // Send stage update for completion
  sendStageUpdate(requestId, 'completed', 'Image stored successfully! Process completed.', 'final');

  texts.push(newText);
  res.status(201).json(newText);
} catch (error) {
  console.error(`Error with ${filestoreService.description}:`, error);
  // Send stage update for filestore error
  sendSSEUpdate({
    id: requestId,
    type: 'stage-update',
    stage: 'filestore-error',
    message: 'Failed to store image, but continuing without filestore service...',
    timestamp: new Date().toISOString(),
    status: 'error'
  });
  // Don't exit the process, just log the error
  console.log('Continuing without filestore service...');

  // Still save the text with the image URL from the image service
  newText.imageUrl = imageResult.url;
  texts.push(newText);
  res.status(201).json(newText);
}

// Define the Text interface that will be used to pass the results of the MCP calls to the frontend
// TODO: Update this interface to have the properties you need for your use case
interface Text {
  id: number;
  text: string;
  timestamp: string;
  imageUrl: string; 
  fileName: string; 
}

  // Create the object that will be updated with the results of the MCP calls and passed to the frontend
  let newText: Text = {
    id: Date.now(),
    text: text.trim(),
    timestamp: new Date().toISOString(),
    imageUrl: '', 
    fileName: '', 
  };

// Define the Text interface to match the Text interface in the backend
// TODO: Update this interface to have the properties you need for your use case
interface Text {
  id: number;
  text: string;
  timestamp: string;
  imageUrl: string; 
  fileName: string; 
}

<div className="texts-list">
    {texts.map((text) => (
        <div key={text.id} className="text-item">
            <p className="text-content">{text.text}</p>
            {/* TODO: Implement displaying the properties you need for your use case */}
            {text.imageUrl && ( 
                <figure> 
                    <img src={text.imageUrl} alt={text.text} className="text-image" />
                    <figcaption>{text.fileName}</figcaption> 
                </figure> 
            )} 
            <small className="text-timestamp">
                Submitted: {formatDate(text.timestamp)}
            </small>
            {text.fileId && ( 
                <small className="text-fileId">
                    File ID: {text.fileId} 
                </small> 
            )} 
        </div>
    ))}
</div>