The future of AI-powered search

Why embedding and reranking matter

• Embedding models transform data into vector representations that capture meaning and context, enabling searches based on semantic similarity rather than just keyword matches.
  
• Reranking models improve search accuracy by scoring and ranking a smaller set (e.g., 1000) of documents based on their relevance to a query, ensuring the most meaningful results appear first.
  

Voyage AI’s embedding and reranking models

• Document embeddings are created for all documents in a database whenever they are added or updated, capturing the semantic meaning of the documents an application has access to. Typically generated in batch, they are optimized for scale and throughput.
  
• Query embeddings enable the system to effectively interpret the user's intent for relevant results. Produced for a user's search query at the moment it's made, they are optimized for low latency and high precision.
  

MongoDB Atlas Search + Voyage AI models today

“AI-powered search”, not “AI Search”

• More control: Developers can tune search logic and ranking strategies based on their domain.
  
• More flexibility: Models can be updated or swapped to improve on an industry-specific corpus of data.
  
• More efficiency: MongoDB handles both storage and retrieval, optimizing cost and performance at scale.
  

Building the MongoDB + Voyage AI “better together” story

• Defining the optimal approach to multi-modal information retrieval, integrating diverse inputs like text and images for richer results.
  
• Developing instruction-tuned retrieval, which allows concise prompts to precisely guide model interpretations, ensuring searches align closely with user intent. For example, enabling a search for “shoes” to prioritize sneakers or dress shoes, depending on user behavior and preferences.
  
• Determining the best ways to integrate domain-specific models tailored to the unique needs and use cases of industries such as legal, finance, and healthcare to achieve superior retrieval accuracy.
  
• Making it easy to update and change models without impacting availability.
  
• Bringing additional AI capabilities into our expressive aggregation pipeline language
  
• Improving the ability to automatically assess model performance, with the potential to offer this capability to customers.
  

Building the future of AI-powered search

• Accurate: ensuring the precision of information retrieval is always our top priority, empowering applications to achieve production-grade quality and mass adoption.
  
• Seamless: built into existing developer workflows.
  
• Scalable: optimized for performance and cost.
  
• Composable: open, flexible, and deeply integrated.
  

What Is a Design Engineer?

Chat-Interface Tools

AI-Enhanced Design Tools

Prototyping and Design with Code

Can AI Do It All ?

• Contextual judgment – AI can produce somewhat accurate designs or code snippets but often misses the broader project goals, such as balancing functionality with aesthetics or considering user experience nuances.
• Collaborative strategy – Design engineers are essential in bridging teams, aligning technical execution with business objectives and facilitating communication between designers and developers. This collaborative and strategic role remains far beyond AI’s capabilities today—and likely will be for a long time.
• Ethical and cultural awareness – Designing for diverse users involves ethical considerations and cultural sensitivity, areas where human judgment remains indispensable. AI lacks the understanding and adaptability to navigate these complexities.

Why Render Modes Matter

1. Performance: Different render modes offer varying performance characteristics, affecting metrics like First Contentful Paint (FCP) and Time to Interactive (TTI).
2. SEO: Search engines require HTML content to properly index pages. Server-side rendering provides this content immediately, while client-side rendering requires additional optimization.
3. User experience: The rendering approach directly impacts how quickly users see and interact with your content.
4. Resource usage: Server rendering can reduce client-side processing requirements but may increase server load.
5. Development experience: Different render modes affect code structure and state management approaches.

Blazor Render Modes

Static Server Rendering

@page "/static-example"
@rendermode StaticServer

<h1>Static Server Rendered Component</h1>
<p>This content is rendered on the server as static HTML.</p>

Interactive Server Rendering

@page "/interactive-server"
@rendermode InteractiveServer

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not updated yet.";

    private void UpdateMessage()
    {
        // This executes on the server
        message = "Updated on the server!";
    }
}

Interactive WebAssembly (Client) Rendering

@page "/interactive-wasm"
@rendermode InteractiveWebAssembly

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not updated yet.";

    private void UpdateMessage()
    {
        // This executes in the browser
        message = "Updated on the client!";
    }
}

Automatic (Auto) Rendering

@page "/auto-render"
@rendermode InteractiveAuto

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not updated yet.";

    private void UpdateMessage()
    {
        // Executes on server initially, 
        // then client on subsequent visits
        message = "Updated with Auto mode!";
    }
}

State Persistence During Rendering

@inject PersistentComponentState ApplicationState

@code {
    private string? data;

    protected override void OnInitialized()
    {
        if (ApplicationState.TryTake("MyDataKey", out string? persistedData))
        {
            data = persistedData; // Restore persisted state
        }
        else
        {
            data = "Hello, world!"; // Initialize state
            ApplicationState.Persist("MyDataKey", data); // Persist state
        }
    }
}

Angular Render Modes

Client-Side Rendering (CSR)

// Standard Angular component with client-side rendering
@Component({
  selector: 'app-client-example',
  template: `
    <h1>Client-Side Rendered Component</h1>
    <button (click)="updateMessage()">Click me</button>
    <p>{{ message }}</p>
  `
})
export class ClientExampleComponent {
  message = 'Not updated yet';

  updateMessage() {
    this.message = 'Updated on the client!';
  }
}

Server-Side Rendering (SSR)

# For new projects
ng new --ssr

# For existing projects
ng add @angular/ssr

    // This component will first render on the server, then hydrate on the client
    @Component({
      selector: 'app-ssr-example',
      template: `
        <h1>Server-Side Rendered Content</h1>
        <p>This renders on the server first, then becomes interactive</p>
        <button (click)="updateMessage()">Click me</button>
        <p>{{ message }}</p>
      `
    })
    export class SsrExampleComponent {
      message = 'Not updated yet';
      updateMessage() {
        this.message = 'Updated after hydration!';
      }
    }

1. The component initially renders on the server, generating HTML that’s immediately visible to users and search engines.
2. This HTML is sent to the browser, allowing for a faster First Contentful Paint.
3. Angular then “hydrates” the component on the client, attaching event handlers to make it interactive.
4. After hydration, the component behaves identically to a client-rendered component.

Hydration

// In app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration()
  ]
};

Incremental Hydration

import {
  bootstrapApplication,
  provideClientHydration,
  withIncrementalHydration,
} from '@angular/platform-browser';
...
bootstrapApplication(AppComponent, {
  providers: [provideClientHydration(withIncrementalHydration())]
});

@defer (hydrate on viewport) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}

React Render Modes

Client Components

'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [message, setMessage] = useState('Not updated yet');
  
  return (
    <div>
      <h1>Client Component</h1>
      <button onClick={() => setMessage('Updated on client!')}>
        Click me
      </button>
      <p>{message}</p>
    </div>
  );
}

Server Components

// No 'use client' directive means this is a Server Component
import { getServerData } from '../lib/data';
import ClientComponent from './ClientComponent';

export default async function ServerComponent() {
  // This runs on the server only
  const data = await getServerData();
  
  return (
    <div>
      <h1>Server Component</h1>
      <p>Data from server: {data}</p>
      
      {/* Server Components can render Client Components */}
      <ClientComponent initialData={data} />
    </div>
  );
}

Hydration

import { hydrateRoot } from 'react-dom/client';
import App from './App';

// Assumes the HTML was server-rendered and contains the App structure
hydrateRoot(document.getElementById('root'), <App />);

Third-Party Tools

For React

• Static rendering: Pre-renders pages at build time
• Dynamic rendering: Renders pages at request time
• Streaming: Progressively renders UI from the server

// Next.js page with static rendering
export function getStaticProps() {
  return {
    props: { data: 'This was rendered at build time' }
  };
}

export default function Page({ data }) {
  return <div>{data}</div>;
}

    // Astro component with React island
    ---
    // Server-only code (runs at build time)
    const title = "Welcome to Astro";
    ---
    
    <html>
      <body>
        <h1>{title}</h1>
        
        <!-- React component that hydrates on the client -->
        <React.InteractiveComponent client:load />
      </body>
    </html>

For Angular

// server.ts (created by Angular Universal)
import 'zone.js/node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { AppServerModule } from './src/main.server';

const app = express();

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(4000);

For Blazor

Comparison of Approaches and Trade-offs

Server Rendering

Client Rendering

Hybrid Approaches

Best Practices for Choosing the Right Render Mode

When to Use Server Rendering

1. Content-focused sites: Blogs, news sites and documentation benefit from server rendering for SEO and fast initial load.
2. Low-powered client devices: Server rendering offloads processing to the server, benefiting users on mobile or low-end devices.
3. Dynamic content that changes frequently: Server rendering enables users to see the latest content.

When to Use Client Rendering

1. Highly interactive applications: Apps with complex user interactions benefit from client-side rendering.
2. Offline capabilities: Applications that need to work without a network connection should use client rendering.
3. Reduced server load: For applications with many concurrent users, client rendering can reduce server resource usage.

When to Use Hybrid Approaches

1. Ecommerce sites: Product listings can be server-rendered for SEO, while interactive elements like shopping carts can be client-rendered.
2. Dashboards: Static content can be server-rendered for fast initial load, while interactive charts and filters can be client-rendered.
3. Progressive enhancement: Start with server rendering for core content and enhance with client interactivity as resources load.

Framework-Specific Recommendations

Blazor

• Use static server for content-heavy pages with minimal interactivity.
• Use interactive server for applications with frequent small updates.
• Use interactive WebAssembly for offline-capable applications.
• Use auto for applications with returning users who benefit from caching.

Angular

• Use client-side rendering for internal applications where SEO isn’t a concern.
• Use server-side rendering for public-facing sites that need SEO.
• Use incremental hydration for large applications to prioritize critical UI elements.

React

• Use Server Components for data-fetching and content rendering.
• Use Client Components for interactive elements.
• Consider Next.js to leverage its flexible rendering options.

Conclusion

1. All three frameworks support both server and client rendering.
2. All three use some form of hydration to bridge server rendering with client interactivity.
3. All three are moving toward hybrid approaches that combine the benefits of server and client rendering.

Credits

Check Out Telerik DevCraft

The KendoReact AIPrompt Component

import { AIPrompt } from "@progress/kendo-react-conversational-ui";

import React, { useState } from "react";
import { Chat } from "@progress/kendo-react-conversational-ui";

const user = {
  id: 1,
  avatarUrl:
    "https://demos.telerik.com/kendo-react-ui/assets/dropdowns/contacts/RICSU.jpg",
  avatarAltText: "User Avatar",
};

const bot = { id: 0 };

const initialMessages = [
  {
    author: bot,
    text: "Hello! I'm your AI assistant. How can I assist you today?",
    timestamp: new Date(),
  },
];

const App = () => {
  const [messages, setMessages] = useState(initialMessages);

  const handleSendMessage = (event) => {
    setMessages((prev) => [...prev, event.message]);

    const botResponse = {
      author: bot,
      text: "Processing your request...",
      timestamp: new Date(),
    };

    setTimeout(() => {
      setMessages((prev) => [...prev, botResponse]);
    }, 1000);
  };

  return (
    <Chat
      user={user}
      messages={messages}
      onMessageSend={handleSendMessage}
      placeholder="Type your message..."
      width={400}
    />
  );
};

export default App;

import {
  AIPrompt,
  AIPromptView,
  AIPromptOutputView,
  AIPromptCommandsView,
} from "@progress/kendo-react-conversational-ui";

• AIPrompt: The main container for AI interaction
• AIPromptView: The UI where users enter their prompts
• AIPromptOutputView: Displays AI-generated responses
• AIPromptCommandsView: Provides predefined commands (e.g., Simplify, Expand) to modify AI-generated text

1. Active view – Tracks whether the UI displays the prompt input or AI-generated output
2. AI outputs – Stores responses received from the AI
3. Loading status – Prevents multiple simultaneous requests

const [activeView, setActiveView] = useState("prompt");
const [outputs, setOutputs] = useState([]);
const [loading, setLoading] = useState(false);

const handleActiveViewChange = (view) => {
  setActiveView(view);
};

const handleOnRequest = async (prompt) => {
  if (!prompt || loading) return; // Prevent empty or duplicate requests

  setLoading(true);

  // Placeholder for AI response while waiting
  setOutputs([
    {
      id: outputs.length + 1,
      title: prompt,
      responseContent: "Thinking...",
    },
    ...outputs,
  ]);

  try {
    const API_KEY = "YOUR_OPENAI_API_KEY"; // Replace with a valid API key
    const API_URL = "https://api.openai.com/v1/chat/completions";

    const response = await fetch(API_URL, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "gpt-4",
        messages: [{ role: "user", content: prompt }],
      }),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();
    const aiResponse =
      data.choices[0]?.message?.content || "Unable to process request.";

    // Replace "Thinking..." with actual AI response
    setOutputs((prevOutputs) =>
      prevOutputs.map((output, index) =>
        index === 0 ? { ...output, responseContent: aiResponse } : output
      )
    );
  } catch (error) {
    // Handle API errors
    setOutputs([
      {
        id: outputs.length + 1,
        title: prompt,
        responseContent: "Error processing request.",
      },
      ...outputs,
    ]);
  } finally {
    setLoading(false);
    setActiveView("output"); // Switch to output view after processing
  }
};

<AIPrompt
  style={{ width: "400px", height: "400px" }}
  activeView={activeView}
  onActiveViewChange={handleActiveViewChange}
  onPromptRequest={handleOnRequest}
  disabled={loading}
>
  {/* Prompt Input UI */}
  <AIPromptView
    promptSuggestions={["Out of office", "Write a LinkedIn post"]}
  />

  {/* AI Response Output UI */}
  <AIPromptOutputView outputs={outputs} showOutputRating={true} />

  {/* Commands View */}
  <AIPromptCommandsView
    commands={[
      { id: "1", text: "Simplify", disabled: loading },
      { id: "2", text: "Expand", disabled: loading },
    ]}
  />
</AIPrompt>

import React, { useState } from "react";
import {
  AIPrompt,
  AIPromptView,
  AIPromptOutputView,
  AIPromptCommandsView,
} from "@progress/kendo-react-conversational-ui";
import { Chat } from "@progress/kendo-react-conversational-ui";

const user = {
  id: 1,
  avatarUrl:
    "https://demos.telerik.com/kendo-react-ui/assets/dropdowns/contacts/RICSU.jpg",
  avatarAltText: "User Avatar",
};

const bot = { id: 0 };

const App = () => {
  const [activeView, setActiveView] = useState("prompt");
  const [outputs, setOutputs] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleActiveViewChange = (view) => {
    setActiveView(view);
  };

  const handleOnRequest = async (prompt) => {
    if (!prompt || loading) return;

    setLoading(true);

    const API_KEY = "YOUR_OPENAI_API_KEY"; // Replace with a valid API key
    const API_URL = "https://api.openai.com/v1/chat/completions";

    try {
      setOutputs([
        {
          id: outputs.length + 1,
          title: prompt,
          responseContent: "Thinking...",
        },
        ...outputs,
      ]);
      const response = await fetch(API_URL, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${API_KEY}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          model: "gpt-4",
          messages: [{ role: "user", content: prompt }],
        }),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }

      const data = await response.json();
      const aiResponse =
        data.choices[0]?.message?.content || "Unable to process request.";
      setOutputs((prevOutputs) =>
        prevOutputs.map((output, index) =>
          index === 0 ? { ...output, responseContent: aiResponse } : output
        )
      );
    } catch (error) {
      setOutputs([
        {
          id: outputs.length + 1,
          title: prompt,
          responseContent: "Error processing request.",
        },
        ...outputs,
      ]);
    } finally {
      setLoading(false);
      setActiveView("output");
    }
  };

  return (
    <div
      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <Chat
        user={user}
        messages={outputs.map((output) => ({
          author: bot,
          text: output.responseContent,
        }))}
        width={400}
      />
      <AIPrompt
        style={{ width: "400px", height: "400px" }}
        activeView={activeView}
        onActiveViewChange={handleActiveViewChange}
        onPromptRequest={handleOnRequest}
        disabled={loading}
      >
        <AIPromptView
          promptSuggestions={["Out of office", "Write a LinkedIn post"]}
        />
        <AIPromptOutputView outputs={outputs} showOutputRating={true} />
        <AIPromptCommandsView
          commands={[
            { id: "1", text: "Simplify", disabled: loading },
            { id: "2", text: "Expand", disabled: loading },
          ]}
        />
      </AIPrompt>
    </div>
  );
};

export default App;

Wrap-up

Creating a Blazor Component Library

<link href="https://www.telerik.com@Assets["_content/ComponentLibrary/additionalStyles.css"]" rel="stylesheet">

<link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet">

AdditionalAssemblies="new[] { typeof(ComponentLibrary.Component1).Assembly }"

<img alt="Profile Picture" src="_content/ComponentLibrary/profile.png" />

How to Publish a Blazor Component Library as a NuGet Package

Best Practices for Versioning, Documentation and Maintaining a Component Library

// Option 1: Using the rendermode attribute
<HeadOutlet @rendermode="InteractiveServer" />

// Option 2: Using the @rendermode directive
@rendermode InteractiveServer

Conclusion

• Saved development time
• Better consistency
• Simpler maintainability

1. 支持给多个项目同时设置负责人、添加成员、添加管理员；
2. 项目集甘特图支持平铺展示；
3. 在创建任务时，支持上传附件；

支持给多个项目同时设置负责人、添加成员、添加管理员

设置负责人

1. 选择一个企业成员作为负责人；
2. 选择是否将此负责人添加为项目成员（项目负责人可以不是项目成员）；点击「确定」按钮，即可将选择的成员，设置为选中的所有项目的负责人。

添加成员

添加管理员

项目集甘特图支持平铺展示

在创建任务时，支持上传附件

The pitfalls of feature-first development

The importance of bedrock

Practical strategies for building financial products that stick

1. Start with a clear "why": What problem are you trying to solve? For whom? Make sure your mission is crystal clear before building anything. Make sure it aligns with your company’s objectives, too.
2. Focus on a single, core feature and obsess on getting that right before moving on to something else: Resist the temptation to add too many features at once. Instead, choose one that delivers real value and iterate from there.
3. Prioritize simplicity over complexity: Less is often more when it comes to financial products. Cut out unnecessary bells and whistles and keep the focus on what matters most.
4. Embrace continuous iteration: Bedrock isn't a fixed destination—it's a dynamic process. Continuously gather user feedback, refine your product, and iterate towards that bedrock state.
5. Stop, look and listen: Don't just test your product as part of your delivery process—test it repeatedly in the field. Use it yourself. Run A/B tests. Gather user feedback. Talk to people who use it, and refine accordingly.

The bedrock paradox